@tmagic/stage 1.3.0-alpha.8 → 1.3.0-beta.0

package/dist/tmagic-stage.js

@@ -559,6 +559,8 @@ class DragResizeHelper {
   }
 }
 
+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";
@@ -583,10 +585,8 @@ var AbleActionEventType = /* @__PURE__ */ ((AbleActionEventType2) => {
 
 const MoveableActionsAble = (handler) => ({
   name: "actions",
-  props: {
-    selectParent: Boolean
-  },
-  events: {},
+  props: [],
+  events: [],
   render(moveable, React) {
     const rect = moveable.getRect();
     const { pos2 } = moveable.state;
@@ -601,34 +601,7 @@ const MoveableActionsAble = (handler) => ({
         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(
@@ -636,7 +609,7 @@ const MoveableActionsAble = (handler) => ({
       {
         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)`
         }
       },
       [
@@ -649,27 +622,12 @@ const MoveableActionsAble = (handler) => ({
               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",
@@ -677,7 +635,32 @@ const MoveableActionsAble = (handler) => ({
           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"
+          })
+        )
       ]
     );
   }
@@ -688,6 +671,7 @@ class MoveableOptionsManager extends EventEmitter {
   mode = Mode.ABSOLUTE;
   /** 画布容器 */
   container;
+  options = {};
   /** 水平参考线 */
   horizontalGuidelines = [];
   /** 垂直参考线 */
@@ -704,6 +688,9 @@ class MoveableOptionsManager extends EventEmitter {
     this.container = config.container;
     this.getRootContainer = config.getRootContainer;
   }
+  getOption(key) {
+    return this.options[key];
+  }
   /**
    * 设置水平/垂直参考线
    * @param type 参考线类型
@@ -748,7 +735,8 @@ class MoveableOptionsManager extends EventEmitter {
   getOptions(isMultiSelect, runtimeOptions = {}) {
     const defaultOptions = this.getDefaultOptions(isMultiSelect);
     const customizedOptions = this.getCustomizeOptions();
-    return merge(defaultOptions, customizedOptions, runtimeOptions);
+    this.options = merge(defaultOptions, customizedOptions, runtimeOptions);
+    return this.options;
   }
   /**
    * 获取单选和多选的moveable公共参数
@@ -768,9 +756,8 @@ class MoveableOptionsManager extends EventEmitter {
       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
       }
     };
@@ -808,6 +795,8 @@ class MoveableOptionsManager extends EventEmitter {
         left: isAbsolute
       },
       isDisplayInnerSnapDigit: true,
+      dragTarget: ".moveable-drag-area-button",
+      dragTargetSelf: true,
       props: {
         actions: true
       },
@@ -934,14 +923,14 @@ class StageDragResize extends MoveableOptionsManager {
     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();
   }
   /**
    * 销毁实例
@@ -1153,13 +1142,18 @@ class StageHighlight extends EventEmitter$1 {
     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
+      });
+    }
   }
   /**
    * 清空高亮
@@ -1167,16 +1161,18 @@ class StageHighlight extends EventEmitter$1 {
   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;
   }
 }
 
@@ -1195,7 +1191,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
   constructor(config) {
     const moveableOptionsManagerConfig = {
       container: config.container,
-      moveableOptions: config.multiMoveableOptions,
+      moveableOptions: config.moveableOptions,
       getRootContainer: config.getRootContainer
     };
     super(moveableOptionsManagerConfig);
@@ -1292,7 +1288,7 @@ class StageMultiDragResize extends MoveableOptionsManager {
     Object.entries(options).forEach(([key, value]) => {
       this.moveableForMulti[key] = value;
     });
-    this.moveableForMulti.updateTarget();
+    this.moveableForMulti.updateRect();
   }
   /**
    * 清除多选状态
@@ -1387,7 +1383,7 @@ class ActionManager extends EventEmitter {
     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,
@@ -1396,7 +1392,7 @@ class ActionManager extends EventEmitter {
     });
     this.multiDr = new StageMultiDragResize({
       container: config.container,
-      multiMoveableOptions: config.multiMoveableOptions,
+      moveableOptions: this.changeCallback(config.moveableOptions, true),
       dragResizeHelper: createDrHelper(),
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
@@ -1451,6 +1447,14 @@ class ActionManager extends EventEmitter {
   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 鼠标事件
@@ -1589,12 +1593,16 @@ class ActionManager extends EventEmitter {
     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);
         }
@@ -2370,6 +2378,9 @@ class StageCore extends EventEmitter$1 {
   highlight(idOrEl) {
     this.actionManager.highlight(idOrEl);
   }
+  clearHighlight() {
+    this.actionManager.clearHighlight();
+  }
   /**
    * 更新组件
    * @param data 更新组件的数据
@@ -2437,6 +2448,9 @@ class StageCore extends EventEmitter$1 {
   delayedMarkContainer(event, excludeElList = []) {
     return this.actionManager.delayedMarkContainer(event, excludeElList);
   }
+  getMoveableOption(key) {
+    return this.actionManager.getMoveableOption(key);
+  }
   /**
    * 销毁实例
    */
@@ -2467,7 +2481,6 @@ class StageCore extends EventEmitter$1 {
       containerHighlightDuration: config.containerHighlightDuration,
       containerHighlightType: config.containerHighlightType,
       moveableOptions: config.moveableOptions,
-      multiMoveableOptions: config.multiMoveableOptions,
       container: this.mask.content,
       disabledDragStart: config.disabledDragStart,
       canSelect: config.canSelect,