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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.15",
+  "version": "1.3.0-alpha.16",
   "name": "@tmagic/stage",
   "type": "module",
   "sideEffects": [
@@ -29,14 +29,14 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@scena/guides": "^0.23.3",
-    "@tmagic/core": "1.3.0-alpha.15",
-    "@tmagic/schema": "1.3.0-alpha.15",
-    "@tmagic/utils": "1.3.0-alpha.15",
+    "@scena/guides": "^0.29.1",
+    "@tmagic/core": "1.3.0-alpha.16",
+    "@tmagic/schema": "1.3.0-alpha.16",
+    "@tmagic/utils": "1.3.0-alpha.16",
     "events": "^3.3.0",
-    "keycon": "^1.1.2",
+    "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.43.1",
+    "moveable": "^0.51.1",
     "moveable-helper": "^0.4.0"
   },
   "devDependencies": {

package/src/MoveableActionsAble.ts

@@ -1,13 +1,12 @@
 import { MoveableManagerInterface, Renderer } from 'moveable';
 
+import ableCss from './moveable-able.css?raw';
 import { AbleActionEventType } from './types';
 
 export default (handler: (type: AbleActionEventType) => void) => ({
   name: 'actions',
-  props: {
-    selectParent: Boolean,
-  },
-  events: {},
+  props: [],
+  events: [],
   render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
     const rect = moveable.getRect();
     const { pos2 } = moveable.state;
@@ -24,34 +23,7 @@ export default (handler: (type: AbleActionEventType) => void) => ({
         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}
       `,
     );
     // Add key (required)
@@ -61,7 +33,7 @@ export default (handler: (type: AbleActionEventType) => void) => ({
       {
         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)`,
         },
       },
       [
@@ -74,27 +46,12 @@ export default (handler: (type: AbleActionEventType) => void) => ({
               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',
@@ -103,6 +60,31 @@ export default (handler: (type: AbleActionEventType) => void) => ({
             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',
+          }),
+        ),
       ],
     );
   },

package/src/MoveableOptionsManager.ts

@@ -177,7 +177,8 @@ export default class MoveableOptionsManager extends EventEmitter {
         left: isAbsolute,
       },
       isDisplayInnerSnapDigit: true,
-
+      dragTarget: '.moveable-drag-area-button',
+      dragTargetSelf: true,
       props: {
         actions: true,
       },

package/src/moveable-able.css

@@ -0,0 +1,108 @@
+.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);
+}
+
+.moveable-select-parent-arrow-top-icon {
+  transform: rotateZ(-45deg);
+  width: 4px;
+  height: 4px;
+  border-color: #fff;
+  border-width: 2px 2px 0 0;
+  border-style: solid;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+}
+
+.moveable-select-parent-arrow-body-icon {
+  width: 7px;
+  height: 11px;
+  border-color: #fff;
+  border-width: 0 0 2px 2px;
+  border-style: solid;
+}
+
+.moveable-drag-area-button {
+  cursor: move;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon {
+  width: 2px;
+  height: 2px;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-top {
+  transform: rotateZ(-45deg) translateX(-50%);
+  left: 50%;
+  top: 3px;
+  transform-origin: left;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-bottom {
+  transform: rotateZ(135deg) translateX(-50%);
+  transform-origin: left;
+  left: 50%;
+  top: auto;
+  bottom: 3px;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-right {
+  transform: rotateZ(45deg)  translateY(-50%);
+  transform-origin: top;
+  right: 3px;
+  left: auto;
+  top: 50%;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-top-icon-left {
+  transform: rotateZ(235deg) translateY(-50%);
+  transform-origin: top;
+  left: 3px;
+  top: 50%;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-horizontal {
+  width: 2px;
+  height: 11px;
+  background-color: #fff;
+  position: absolute;
+  transform: translateX(-50%);
+  left: 50%;
+  top: 4px;
+}
+
+.moveable-drag-area-button .moveable-select-parent-arrow-body-icon-vertical {
+  width: 11px;
+  height: 2px;
+  background-color: #fff;
+  position: absolute;
+  transform: translateY(-50%);
+  left: 4px;
+  top: 50%;;
+}
+

package/types/MoveableActionsAble.d.ts

@@ -2,10 +2,8 @@ import { MoveableManagerInterface, Renderer } from 'moveable';
 import { AbleActionEventType } from './types';
 declare const _default: (handler: (type: AbleActionEventType) => void) => {
     name: string;
-    props: {
-        selectParent: BooleanConstructor;
-    };
-    events: {};
+    props: never[];
+    events: never[];
     render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any;
 };
 export default _default;