@tmagic/stage 1.2.6 → 1.2.8

package/types/StageDragResize.d.ts

@@ -17,6 +17,7 @@ export default class StageDragResize extends MoveableOptionsManager {
     private markContainerEnd;
     private delayedMarkContainer;
     constructor(config: StageDragResizeConfig);
+    getTarget(): HTMLElement | undefined;
     /**
      * 将选中框渲染并覆盖到选中的组件Dom节点上方
      * 当选中的节点不是absolute时，会创建一个新的节点出来作为拖拽目标

package/types/StageMultiDragResize.d.ts

@@ -11,6 +11,8 @@ export default class StageMultiDragResize extends MoveableOptionsManager {
     dragStatus: StageDragStatus;
     private dragResizeHelper;
     private getRenderDocument;
+    private delayedMarkContainer;
+    private markContainerEnd;
     constructor(config: StageMultiDragResizeConfig);
     /**
      * 多选

package/types/types.d.ts

@@ -3,6 +3,7 @@ import type { MoveableOptions } from 'moveable';
 import Core from '@tmagic/core';
 import type { Id, MApp, MContainer, MNode } from '@tmagic/schema';
 import { GuidesType, ZIndex } from './const';
+import DragResizeHelper from './DragResizeHelper';
 import StageCore from './StageCore';
 export declare type TargetElement = HTMLElement | SVGElement;
 export declare type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
@@ -79,20 +80,22 @@ export interface StageMaskConfig {
 }
 export interface StageDragResizeConfig {
     container: HTMLElement;
+    dragResizeHelper: DragResizeHelper;
     moveableOptions?: CustomizeMoveableOptions;
     disabledDragStart?: boolean;
     getRootContainer: GetRootContainer;
     getRenderDocument: GetRenderDocument;
     markContainerEnd: MarkContainerEnd;
     delayedMarkContainer: DelayedMarkContainer;
-    updateDragEl?: UpdateDragEl;
 }
 export interface StageMultiDragResizeConfig {
     container: HTMLElement;
+    dragResizeHelper: DragResizeHelper;
     multiMoveableOptions?: CustomizeMoveableOptions;
     getRootContainer: GetRootContainer;
     getRenderDocument: GetRenderDocument;
-    updateDragEl?: UpdateDragEl;
+    markContainerEnd: MarkContainerEnd;
+    delayedMarkContainer: DelayedMarkContainer;
 }
 export interface DragResizeHelperConfig {
     container: HTMLElement;
@@ -147,6 +150,11 @@ export interface UpdateEventData {
     }[];
     parentEl: HTMLElement | null;
 }
+export interface RemoveEventData {
+    data: {
+        el: HTMLElement;
+    }[];
+}
 export interface SortEventData {
     src: Id;
     dist: Id;
@@ -193,3 +201,7 @@ export interface TargetShadowConfig {
     updateDragEl?: UpdateDragEl;
     idPrefix?: string;
 }
+export declare enum AbleActionEventType {
+    SELECT_PARENT = "select-parent",
+    REMOVE = "remove"
+}

package/src/MoveableSelectParentAble.ts

@@ -1,76 +0,0 @@
-import { MoveableManagerInterface, Renderer } from 'moveable';
-
-export default (selectParentHandler: () => void) => ({
-  name: 'select-parent',
-  props: {},
-  events: {},
-  render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
-    const rect = moveable.getRect();
-    const { pos2 } = moveable.state;
-
-    // use css for able
-    const editableViewer = moveable.useCSS(
-      'div',
-      `
-      {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        will-change: transform;
-        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;
-      }
-      `,
-    );
-    // Add key (required)
-    // Add class prefix moveable-(required)
-    return React.createElement(
-      editableViewer,
-      {
-        className: 'moveable-editable',
-        style: {
-          transform: `translate(${pos2[0] - 25}px, ${pos2[1] - 30}px) rotate(${rect.rotation}deg) translate(10px)`,
-        },
-      },
-      React.createElement(
-        'button',
-        {
-          className: 'moveable-button',
-          title: '选中父组件',
-          onClick: () => {
-            selectParentHandler();
-          },
-        },
-        React.createElement(
-          'svg',
-          {
-            width: '1em',
-            height: '1em',
-            viewBox: '0 0 16 16',
-            fill: 'none',
-            xmlns: 'http://www.w3.org/2000/svg',
-            style: {
-              transform: 'rotate(90deg)',
-            },
-          },
-          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',
-          }),
-        ),
-      ),
-    );
-  },
-});