@plait/mind 0.82.0-next.0 → 0.83.0

package/generators/node-more.generator.d.ts

@@ -0,0 +1,30 @@
+import { PlaitBoard, Point } from '@plait/core';
+import { MindElement, BaseData, LayoutDirection } from '../interfaces';
+import { Generator } from '@plait/common';
+export interface NodeMoreExtraData {
+    isSelected: boolean;
+    isHovered?: boolean;
+    isHoveredCollapseArea?: boolean;
+    isHoveredExpandArea?: boolean;
+    isHoveredAddArea?: boolean;
+    isShowCollapseAnimation?: boolean;
+    isShowAddAnimation?: boolean;
+}
+export declare class NodeMoreGenerator extends Generator<MindElement, NodeMoreExtraData> {
+    static key: string;
+    collapseOrAddG: SVGGElement | undefined | null;
+    expandG: SVGGElement | undefined | null;
+    canDraw(element: MindElement<BaseData>, extraData: NodeMoreExtraData): boolean;
+    draw(element: MindElement<BaseData>, extraData: NodeMoreExtraData): SVGGElement;
+    toggleCollapseOrAdd(center: Point, addCenter: Point | null, stroke: string, parentG: SVGGElement, isShowCollapse: boolean, isShowAdd: boolean, isHoveredAddArea: boolean, isShowCollapseAnimation: boolean, isShowAddAnimation: boolean): void;
+    toggleExpandBadge(element: MindElement, moreStartAndEnd: [Point, Point], center: Point, stroke: string, parentG: SVGGElement, isCollapsed: boolean, isHoveredExpandIcon: boolean): void;
+}
+export declare const getCollapseAndAddCenterPoint: (board: PlaitBoard, element: MindElement) => {
+    collapseCenter: Point;
+    addCenter: Point;
+};
+export declare const getAddCenterByCollapseOrExpandCenter: (target: MindElement, collapseOrExpandCenter: Point, layoutDirection: LayoutDirection) => Point;
+export declare const getNodeMoreLayoutDirection: (board: PlaitBoard, element: MindElement) => LayoutDirection;
+export declare const getMoreStartAndEnd: (board: PlaitBoard, element: MindElement, linkLineDirection: LayoutDirection) => [Point, Point];
+export declare const isLastSelectedMindElement: (board: PlaitBoard, element: MindElement) => boolean;
+export declare const canHandleNodeMore: (board: PlaitBoard) => boolean;

package/mind-node.component.d.ts

@@ -3,26 +3,23 @@ import { RoughSVG } from 'roughjs/bin/svg';
 import { MindElement } from './interfaces/element';
 import { MindNode } from './interfaces/node';
 import { NodeEmojisGenerator } from './generators/node-emojis.generator';
-import { NodePlusGenerator } from './generators/node-plus.generator';
 import { PlaitMindBoard } from './plugins/with-mind.board';
 import { NodeActiveGenerator } from './generators/node-active.generator';
-import { CollapseGenerator } from './generators/node-collapse.generator';
 import { CommonElementFlavour, ImageGenerator, TextManage } from '@plait/common';
 import { NodeShapeGenerator } from './generators/node-shape.generator';
 import { ImageData } from './interfaces';
+import { NodeMoreGenerator } from './generators/node-more.generator';
 export declare class MindNodeComponent extends CommonElementFlavour<MindElement, PlaitMindBoard> implements OnContextChanged<MindElement, PlaitMindBoard> {
     roughSVG: RoughSVG;
     node: MindNode;
     index: number;
     shapeG: SVGGElement | null;
-    linkG?: SVGGElement;
-    extendG?: SVGGElement;
+    linkLineG?: SVGGElement;
     nodeEmojisGenerator: NodeEmojisGenerator;
     nodeShapeGenerator: NodeShapeGenerator;
-    nodePlusGenerator: NodePlusGenerator;
     imageGenerator: ImageGenerator<MindElement<ImageData>>;
     activeGenerator: NodeActiveGenerator;
-    collapseGenerator: CollapseGenerator;
+    nodeMoreGenerator: NodeMoreGenerator;
     get textManage(): TextManage;
     constructor();
     initializeGenerator(): void;
@@ -30,7 +27,6 @@ export declare class MindNodeComponent extends CommonElementFlavour<MindElement,
     onContextChanged(value: PlaitPluginElementContext<MindElement, PlaitMindBoard>, previous: PlaitPluginElementContext<MindElement, PlaitMindBoard>): void;
     drawEmojis(): void;
     drawLink(): void;
-    drawExtend(): void;
     drawTopic(): void;
     updateTopic(): void;
     trackBy: (index: number, node: MindNode) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plait/mind",
-  "version": "0.82.0-next.0",
+  "version": "0.83.0",
   "peerDependencies": {},
   "dependencies": {
     "tslib": "^2.3.0"

package/plugins/with-node-more.d.ts

@@ -0,0 +1,10 @@
+import { PlaitBoard } from '@plait/core';
+import { MindElement } from '../interfaces';
+export interface NodeMoreRef {
+    target: MindElement;
+    isHovered: boolean;
+    isHoveredCollapseArea: boolean;
+    isHoveredExpandArea: boolean;
+    isHoveredAddArea: boolean;
+}
+export declare const withNodeMore: (board: PlaitBoard) => PlaitBoard;

package/styles/styles.scss

@@ -19,50 +19,29 @@ $primary: #4e8afa;
         .slate-editable-container {
             min-width: 5px;
         }
-
-        .extend {
-            opacity: 0;
-            cursor: default;
-        }
-
-        .collapsed {
-            .extend {
-                opacity: 1;
+        .collapse-button, .add-button {
+            transform-origin: center center;
+            transform-box: fill-box;
+            cursor: pointer;
+            &.animated {
+                animation: scale-in 0.15s ease-out forwards;
             }
         }
-
-        .dragging-node {
-            opacity: 0.6;
-        }
-    }
-    &.focused:not(.selection-moving):not(.element-moving):not(.abstract-resizing-horizontal):not(.abstract-resizing-vertical):not(.pointer-mind):not(.mind-node-dragging):not(.mind-node-resizing) {
-        .extend {
+        .expanded-button {
             cursor: pointer;
-            &:hover {
-                opacity: 1;
-            }
         }
-
-        g[plait-mindmap='true'] {
-            .hovered {
-                .extend {
-                    opacity: 1;
-                }
+        
+        @keyframes scale-in {
+            from {
+                transform: scale(0);
+            }
+            to {
+                transform: scale(1);
             }
         }
-    }
-
-    &[class*='-resizing'] {
-        :not(.collapsed) > .extend {
-            display: none;
-        }
-    }
 
-    &:not(.readonly) {
-        &[class*='pointer-']:not(.pointer-selection) {
-            :not(.collapsed) > .extend {
-                display: none;
-            }
+        .dragging-node {
+            opacity: 0.6;
         }
     }
 
@@ -70,14 +49,6 @@ $primary: #4e8afa;
         .board-host-svg {
             cursor: grab;
         }
-        .collapsed {
-            .extend:hover {
-                cursor: grab;
-            }
-        }
-        :not(.collapsed) > .extend {
-            display: none;
-        }
     }
 
     &.pointer-mind {
@@ -87,17 +58,6 @@ $primary: #4e8afa;
     }
 
     &.readonly {
-        .collapsed {
-            .extend:hover {
-                cursor: pointer;
-            }
-        }
-        :not(.collapsed) > .extend {
-            display: block;
-            .plus {
-                display: none;
-            }
-        }
         .mind-node-image {
             cursor: zoom-in;
         }

package/utils/clipboard.d.ts

@@ -5,7 +5,7 @@ import { PlaitMindBoard } from '../plugins/with-mind.board';
 export declare const buildClipboardData: (board: PlaitBoard, selectedElements: MindElement[], startPoint: Point) => MindElement<import("../interfaces").BaseData>[];
 export declare const insertClipboardData: (board: PlaitMindBoard, elements: PlaitElement[], targetPoint: Point, operationType?: WritableClipboardOperationType) => void;
 export declare const insertClipboardText: (board: PlaitMindBoard, targetParent: PlaitElement, text: string | Element) => void;
-export declare const getTopicSizeByElement: (element: MindElement, parentElement?: MindElement) => {
+export declare const getTopicSizeByElement: (board: PlaitBoard, element: MindElement, parentElement?: MindElement) => {
     width: number;
     height: number;
 };

package/utils/common.d.ts

@@ -4,7 +4,7 @@ export declare const MIND_CENTRAL_TEXT = "\u4E2D\u5FC3\u4E3B\u9898";
 export declare const ABSTRACT_NODE_TEXT = "\u6982\u8981";
 export declare const getDefaultMindNameText: (board: PlaitBoard) => string;
 export declare const getAbstractNodeText: (board: PlaitBoard) => string;
-export declare const getTopicSize: (isRoot: boolean, isBranch: boolean, topic: ParagraphElement, manualWidth?: number) => {
+export declare const getTopicSize: (board: PlaitBoard | null, isRoot: boolean, isBranch: boolean, topic: ParagraphElement, manualWidth?: number) => {
     width: number;
     height: number;
 };

package/utils/point-placement.d.ts

@@ -7,9 +7,6 @@ export interface PlacementRef {
     placement: PointPlacement;
     client: RectangleClient;
 }
-export declare const getXDistanceBetweenPoint: (point1: Point, point2: Point, isHorizontalLayout: boolean) => number;
 export declare const getYDistanceBetweenPoint: (point1: Point, point2: Point, isHorizontalLayout: boolean) => void;
 export declare const getLayoutDirection: (node: MindNode, isHorizontal: boolean) => LayoutDirection;
-export declare const moveXOfPoint: (point: Point, distance: number, direction?: LayoutDirection) => Point;
-export declare const moveYOfPoint: (point: Point, distance: number, direction?: LayoutDirection) => Point;
 export declare const transformPlacement: (placement: PointPlacement, direction: LayoutDirection) => void;

package/generators/node-collapse.generator.d.ts

@@ -1,8 +0,0 @@
-import { MindElement, BaseData } from '../interfaces';
-import { AfterDraw, Generator } from '@plait/common';
-export declare class CollapseGenerator extends Generator<MindElement> implements AfterDraw {
-    canDraw(element: MindElement<BaseData>): boolean;
-    draw(element: MindElement<BaseData>): SVGGElement;
-    afterDraw(element: MindElement): void;
-    private getArrowPoints;
-}

package/generators/node-plus.generator.d.ts

@@ -1,7 +0,0 @@
-import { MindElement, BaseData } from '../interfaces';
-import { AfterDraw, Generator } from '@plait/common';
-export declare class NodePlusGenerator extends Generator<MindElement> implements AfterDraw {
-    canDraw(element: MindElement<BaseData>): boolean;
-    draw(element: MindElement<BaseData>): SVGGElement;
-    afterDraw(element: MindElement): void;
-}

package/plugins/with-node-hover-hit-test.d.ts

@@ -1,2 +0,0 @@
-import { PlaitBoard } from '@plait/core';
-export declare const withNodeHoverHitTest: (board: PlaitBoard) => PlaitBoard;

package/utils/node-hover/extend.d.ts

@@ -1,9 +0,0 @@
-import { PlaitBoard } from '@plait/core';
-import { MindElement } from '../../interfaces/element';
-export interface NodeExtendHoveredRef {
-    element: MindElement;
-}
-export declare const pointerMoveHandle: (board: PlaitBoard, event: PointerEvent, nodeExtendHoveredRef: NodeExtendHoveredRef | null) => NodeExtendHoveredRef | null;
-export declare const pointerLeaveHandle: (board: PlaitBoard, event: PointerEvent, nodeExtendHoveredRef: NodeExtendHoveredRef | null) => void;
-export declare const addHovered: (element: MindElement) => void;
-export declare const removeHovered: (element: MindElement) => void;