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

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