@tmagic/stage 1.3.0-alpha.9 → 1.3.0-beta.1

package/dist/tmagic-stage.umd.cjs

@@ -556,6 +556,8 @@
     }
   }
 
+  const ableCss = ".moveable-button {\n  width: 20px;\n  height: 20px;\n  background: #4af;\n  border-radius: 4px;\n  appearance: none;\n  border: 0;\n  color: white;\n  font-size: 12px;\n  font-weight: bold;\n  margin-left: 2px;\n  position: relative;\n}\n.moveable-remove-button:before, .moveable-remove-button:after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 14px;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n  cursor: pointer;\n}\n.moveable-remove-button:after {\n  transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.moveable-select-parent-arrow-top-icon {\n  transform: rotateZ(-45deg);\n  width: 4px;\n  height: 4px;\n  border-color: #fff;\n  border-width: 2px 2px 0 0;\n  border-style: solid;\n  position: absolute;\n  left: 4px;\n  top: 4px;\n}\n\n.moveable-select-parent-arrow-body-icon {\n  width: 7px;\n  height: 11px;\n  border-color: #fff;\n  border-width: 0 0 2px 2px;\n  border-style: solid;\n}\n\n.moveable-drag-area-button {\n  cursor: move;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {\n  width: 2px;\n  height: 2px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {\n  transform: rotateZ(-45deg) translateX(-50%);\n  left: 50%;\n  top: 3px;\n  transform-origin: left;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {\n  transform: rotateZ(135deg) translateX(-50%);\n  transform-origin: left;\n  left: 50%;\n  top: auto;\n  bottom: 3px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {\n  transform: rotateZ(45deg)  translateY(-50%);\n  transform-origin: top;\n  right: 3px;\n  left: auto;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {\n  transform: rotateZ(235deg) translateY(-50%);\n  transform-origin: top;\n  left: 3px;\n  top: 50%;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {\n  width: 2px;\n  height: 11px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateX(-50%);\n  left: 50%;\n  top: 4px;\n}\n\n.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {\n  width: 11px;\n  height: 2px;\n  background-color: #fff;\n  position: absolute;\n  transform: translateY(-50%);\n  left: 4px;\n  top: 50%;;\n}\n\n";
+
   var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
     ContainerHighlightType2["DEFAULT"] = "default";
     ContainerHighlightType2["ALT"] = "alt";
@@ -580,10 +582,8 @@
 
   const MoveableActionsAble = (handler) => ({
     name: "actions",
-    props: {
-      selectParent: Boolean
-    },
-    events: {},
+    props: [],
+    events: [],
     render(moveable, React) {
       const rect = moveable.getRect();
       const { pos2 } = moveable.state;
@@ -598,34 +598,7 @@
         transform-origin: 0px 0px;
         display: flex;
       }
-      .moveable-button {
-        width: 20px;
-        height: 20px;
-        background: #4af;
-        border-radius: 4px;
-        appearance: none;
-        border: 0;
-        color: white;
-        font-size: 12px;
-        font-weight: bold;
-        margin-left: 2px;
-        position: relative;
-      }
-      .moveable-remove-button:before, .moveable-remove-button:after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%) rotate(45deg);
-        width: 14px;
-        height: 2px;
-        background: #fff;
-        border-radius: 1px;
-        cursor: pointer;
-      }
-      .moveable-remove-button:after {
-        transform: translate(-50%, -50%) rotate(-45deg);
-      }
+      ${ableCss}
       `
       );
       return React.createElement(
@@ -633,7 +606,7 @@
         {
           className: "moveable-editable",
           style: {
-            transform: `translate(${pos2[0] - 48}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg) translate(10px)`
+            transform: `translate(${pos2[0] - 60}px, ${pos2[1] - 28}px) rotate(${rect.rotation}deg)`
           }
         },
         [
@@ -646,27 +619,12 @@
                 handler(AbleActionEventType.SELECT_PARENT);
               }
             },
-            React.createElement(
-              "svg",
-              {
-                width: "20px",
-                height: "20px",
-                viewBox: "0 0 16 16",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg",
-                style: {
-                  transform: "rotate(90deg)",
-                  position: "absolute",
-                  left: 0,
-                  top: 0
-                }
-              },
-              React.createElement("path", {
-                d: "M13.0001 4V10H4.20718L5.85363 8.35355L5.14652 7.64645L2.64652 10.1464C2.45126 10.3417 2.45126 10.6583 2.64652 10.8536L5.14652 13.3536L5.85363 12.6464L4.20718 11H13.0001C13.5524 11 14.0001 10.5523 14.0001 10V4H13.0001Z",
-                fill: "currentColor",
-                fillOpacity: "0.9"
-              })
-            )
+            React.createElement("div", {
+              className: "moveable-select-parent-arrow-top-icon"
+            }),
+            React.createElement("div", {
+              className: "moveable-select-parent-arrow-body-icon"
+            })
           ),
           React.createElement("button", {
             className: "moveable-button moveable-remove-button",
@@ -674,7 +632,32 @@
             onClick: () => {
               handler(AbleActionEventType.REMOVE);
             }
-          })
+          }),
+          React.createElement(
+            "button",
+            {
+              className: "moveable-button moveable-drag-area-button",
+              title: "拖动"
+            },
+            React.createElement("div", {
+              className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-top"
+            }),
+            React.createElement("div", {
+              className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-bottom"
+            }),
+            React.createElement("div", {
+              className: "moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-left"
+            }),
+            React.createElement("div", {
+              className: " moveable-select-parent-arrow-top-icon moveable-select-parent-arrow-top-icon-right"
+            }),
+            React.createElement("div", {
+              className: "moveable-select-parent-arrow-body-icon-horizontal"
+            }),
+            React.createElement("div", {
+              className: "moveable-select-parent-arrow-body-icon-vertical"
+            })
+          )
         ]
       );
     }
@@ -685,6 +668,7 @@
     mode = Mode.ABSOLUTE;
     /** 画布容器 */
     container;
+    options = {};
     /** 水平参考线 */
     horizontalGuidelines = [];
     /** 垂直参考线 */
@@ -701,6 +685,9 @@
       this.container = config.container;
       this.getRootContainer = config.getRootContainer;
     }
+    getOption(key) {
+      return this.options[key];
+    }
     /**
      * 设置水平/垂直参考线
      * @param type 参考线类型
@@ -745,7 +732,8 @@
     getOptions(isMultiSelect, runtimeOptions = {}) {
       const defaultOptions = this.getDefaultOptions(isMultiSelect);
       const customizedOptions = this.getCustomizeOptions();
-      return lodashEs.merge(defaultOptions, customizedOptions, runtimeOptions);
+      this.options = lodashEs.merge(defaultOptions, customizedOptions, runtimeOptions);
+      return this.options;
     }
     /**
      * 获取单选和多选的moveable公共参数
@@ -765,9 +753,8 @@
         elementGuidelines: this.elementGuidelines,
         bounds: {
           top: 0,
-          // 设置0的话无法移动到left为0，所以只能设置为-1
-          left: -1,
-          right: this.container.clientWidth - 1,
+          left: 0,
+          right: this.container.clientWidth,
           bottom: isSortable ? void 0 : this.container.clientHeight
         }
       };
@@ -805,6 +792,8 @@
           left: isAbsolute
         },
         isDisplayInnerSnapDigit: true,
+        dragTarget: ".moveable-drag-area-button",
+        dragTargetSelf: true,
         props: {
           actions: true
         },
@@ -931,14 +920,17 @@
       Object.entries(options).forEach(([key, value]) => {
         this.moveable[key] = value;
       });
-      this.moveable.updateTarget();
+      this.moveable.updateRect();
     }
     clearSelectStatus() {
       if (!this.moveable)
         return;
       this.dragResizeHelper.destroyShadowEl();
       this.moveable.target = null;
-      this.moveable.updateTarget();
+      this.moveable.updateRect();
+    }
+    getDragStatus() {
+      return this.dragStatus;
     }
     /**
      * 销毁实例
@@ -1002,6 +994,7 @@
           throw new Error("未选中组件");
         this.dragStatus = StageDragStatus.START;
         this.dragResizeHelper.onDragStart(e);
+        this.emit("drag-start", e);
       }).on("drag", (e) => {
         if (!this.target || !this.dragResizeHelper.getShadowEl())
           return;
@@ -1150,13 +1143,18 @@
       if (!el || el === this.target)
         return;
       this.target = el;
-      this.moveable?.destroy();
-      this.moveable = new Moveable(this.container, {
-        target: this.targetShadow.update(el),
-        origin: false,
-        rootContainer: this.getRootContainer(),
-        zoom: 2
-      });
+      this.targetShadow?.update(el);
+      if (this.moveable) {
+        this.moveable.zoom = 2;
+        this.moveable.updateRect();
+      } else {
+        this.moveable = new Moveable(this.container, {
+          target: this.targetShadow?.el,
+          origin: false,
+          rootContainer: this.getRootContainer(),
+          zoom: 2
+        });
+      }
     }
     /**
      * 清空高亮
@@ -1164,16 +1162,18 @@
     clearHighlight() {
       if (!this.moveable || !this.target)
         return;
+      this.moveable.zoom = 0;
+      this.moveable.updateRect();
       this.target = void 0;
-      this.moveable.target = null;
-      this.moveable.updateTarget();
     }
     /**
      * 销毁实例
      */
     destroy() {
       this.moveable?.destroy();
-      this.targetShadow.destroy();
+      this.targetShadow?.destroy();
+      this.moveable = void 0;
+      this.targetShadow = void 0;
     }
   }
 
@@ -1192,7 +1192,7 @@
     constructor(config) {
       const moveableOptionsManagerConfig = {
         container: config.container,
-        moveableOptions: config.multiMoveableOptions,
+        moveableOptions: config.moveableOptions,
         getRootContainer: config.getRootContainer
       };
       super(moveableOptionsManagerConfig);
@@ -1289,7 +1289,7 @@
       Object.entries(options).forEach(([key, value]) => {
         this.moveableForMulti[key] = value;
       });
-      this.moveableForMulti.updateTarget();
+      this.moveableForMulti.updateRect();
     }
     /**
      * 清除多选状态
@@ -1364,6 +1364,7 @@
         this.clearHighlight();
         return;
       }
+      this.emit("mousemove", event);
       this.highlight(el);
     }, throttleTime);
     constructor(config) {
@@ -1384,7 +1385,7 @@
       this.dr = new StageDragResize({
         container: config.container,
         disabledDragStart: config.disabledDragStart,
-        moveableOptions: this.changeCallback(config.moveableOptions),
+        moveableOptions: this.changeCallback(config.moveableOptions, false),
         dragResizeHelper: createDrHelper(),
         getRootContainer: config.getRootContainer,
         getRenderDocument: config.getRenderDocument,
@@ -1393,7 +1394,7 @@
       });
       this.multiDr = new StageMultiDragResize({
         container: config.container,
-        multiMoveableOptions: config.multiMoveableOptions,
+        moveableOptions: this.changeCallback(config.moveableOptions, true),
         dragResizeHelper: createDrHelper(),
         getRootContainer: config.getRootContainer,
         getRenderDocument: config.getRenderDocument,
@@ -1448,6 +1449,14 @@
     getSelectedElList() {
       return this.selectedElList;
     }
+    getMoveableOption(key) {
+      if (this.dr.getTarget()) {
+        return this.dr.getOption(key);
+      }
+      if (this.multiDr.targetList.length) {
+        return this.multiDr.getOption(key);
+      }
+    }
     /**
      * 获取鼠标下方第一个可选中元素，如果元素层叠，返回到是最上层元素
      * @param event 鼠标事件
@@ -1455,6 +1464,7 @@
      */
     async getElementFromPoint(event) {
       const els = this.getElementsFromPoint(event);
+      this.emit("get-elements-from-point", els);
       let stopped = false;
       const stop = () => stopped = true;
       for (const el of els) {
@@ -1577,6 +1587,9 @@
       }
       return void 0;
     }
+    getDragStatus() {
+      return this.dr.getDragStatus();
+    }
     destroy() {
       this.container.removeEventListener("mousedown", this.mouseDownHandler);
       this.container.removeEventListener("mousemove", this.mouseMoveHandler);
@@ -1586,12 +1599,16 @@
       this.multiDr.destroy();
       this.highlightLayer.destroy();
     }
-    changeCallback(options) {
+    changeCallback(options, isMulti) {
       if (typeof options === "function") {
         return () => {
           if (typeof options === "function") {
             const cfg = {
-              targetElId: this.selectedEl?.id
+              targetEl: this.selectedEl,
+              targetElId: this.selectedEl?.id,
+              targetEls: this.selectedElList,
+              targetElIds: this.selectedElList?.map((item) => item.id),
+              isMulti
             };
             return options(cfg);
           }
@@ -1688,6 +1705,8 @@
           data: [{ el: drTarget }]
         };
         this.emit("remove", data);
+      }).on("drag-start", (e) => {
+        this.emit("drag-start", e);
       });
       this.multiDr.on("update", (data) => {
         this.emit("multi-update", data);
@@ -2367,6 +2386,9 @@
     highlight(idOrEl) {
       this.actionManager.highlight(idOrEl);
     }
+    clearHighlight() {
+      this.actionManager.clearHighlight();
+    }
     /**
      * 更新组件
      * @param data 更新组件的数据
@@ -2434,6 +2456,12 @@
     delayedMarkContainer(event, excludeElList = []) {
       return this.actionManager.delayedMarkContainer(event, excludeElList);
     }
+    getMoveableOption(key) {
+      return this.actionManager.getMoveableOption(key);
+    }
+    getDragStatus() {
+      return this.actionManager.getDragStatus();
+    }
     /**
      * 销毁实例
      */
@@ -2464,7 +2492,6 @@
         containerHighlightDuration: config.containerHighlightDuration,
         containerHighlightType: config.containerHighlightType,
         moveableOptions: config.moveableOptions,
-        multiMoveableOptions: config.multiMoveableOptions,
         container: this.mask.content,
         disabledDragStart: config.disabledDragStart,
         canSelect: config.canSelect,
@@ -2500,6 +2527,7 @@
       this.initDrEvent();
       this.initMulDrEvent();
       this.initHighlightEvent();
+      this.initMouseEvent();
     }
     /**
      * 初始化ActionManager类本身抛出来的事件监听
@@ -2548,6 +2576,18 @@
         this.emit("highlight", highlightEl);
       });
     }
+    /**
+     * 初始化Highlight类通过ActionManager抛出来的事件监听
+     */
+    initMouseEvent() {
+      this.actionManager.on("mousemove", async (event) => {
+        this.emit("mousemove", event);
+      }).on("mouseleave", async (event) => {
+        this.emit("mouseleave", event);
+      }).on("drag-start", (e) => {
+        this.emit("drag-start", e);
+      });
+    }
   }
 
   exports.AbleActionEventType = AbleActionEventType;