@tmagic/stage 1.3.0-alpha.14 → 1.3.0-alpha.16

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"
+          })
+        )
       ]
     );
   }
@@ -813,6 +796,8 @@ class MoveableOptionsManager extends EventEmitter {
         left: isAbsolute
       },
       isDisplayInnerSnapDigit: true,
+      dragTarget: ".moveable-drag-area-button",
+      dragTargetSelf: true,
       props: {
         actions: true
       },