@plait/core 0.0.58 → 0.1.0

package/interfaces/board.d.ts

@@ -3,11 +3,14 @@ import { ComponentType, PlaitElement } from './element';
 import { PlaitPluginElementContext } from '../core/element/context';
 import { PlaitHistory } from './history';
 import { PlaitOperation } from './operation';
-import { Selection } from './selection';
+import { Selection, Range } from './selection';
 import { Viewport } from './viewport';
 import { PlaitPluginElementComponent } from '../core/element/plugin-element';
+import { RoughSVG } from 'roughjs/bin/svg';
+import { BoardComponentInterface } from '../board/board.component.interface';
+import { Point } from './point';
+import { RectangleClient } from './rectangle-client';
 export interface PlaitBoard {
-    host: SVGElement;
     viewport: Viewport;
     children: PlaitElement[];
     operations: PlaitOperation[];
@@ -20,17 +23,22 @@ export interface PlaitBoard {
     apply: (operation: PlaitOperation) => void;
     onChange: () => void;
     mousedown: (event: MouseEvent) => void;
-    globalMouseup: (event: MouseEvent) => void;
     mousemove: (event: MouseEvent) => void;
+    globalMousemove: (event: MouseEvent) => void;
+    mouseup: (event: MouseEvent) => void;
+    globalMouseup: (event: MouseEvent) => void;
     keydown: (event: KeyboardEvent) => void;
     keyup: (event: KeyboardEvent) => void;
     setFragment: (data: DataTransfer | null) => void;
-    insertFragment: (data: DataTransfer | null) => void;
+    insertFragment: (data: DataTransfer | null, targetPoint?: Point) => void;
     deleteFragment: (data: DataTransfer | null) => void;
     dblclick: (event: MouseEvent) => void;
     drawElement: (context: PlaitPluginElementContext) => SVGGElement[] | ComponentType<PlaitPluginElementComponent>;
     redrawElement: (context: PlaitPluginElementContext, previousContext?: PlaitPluginElementContext) => SVGGElement[] | void;
     destroyElement: (context: PlaitPluginElementContext) => void;
+    isIntersectionSelection: (element: PlaitElement, range: Range) => boolean;
+    getRectangle: (element: PlaitElement) => RectangleClient | null;
+    isWithinSelection: (element: PlaitElement) => boolean;
 }
 export interface PlaitBoardChangeEvent {
     children: PlaitElement[];
@@ -40,7 +48,6 @@ export interface PlaitBoardChangeEvent {
 }
 export interface PlaitBoardOptions {
     readonly: boolean;
-    allowClearBoard: boolean;
     hideScrollbar: boolean;
 }
 export interface PlaitBoardMove {
@@ -57,3 +64,12 @@ export interface PlaitBoardViewport {
     scrollLeft?: number;
     scrollTop?: number;
 }
+export declare const PlaitBoard: {
+    getHost(board: PlaitBoard): SVGSVGElement;
+    getElementHost(board: PlaitBoard): SVGGElement;
+    getRoughSVG(board: PlaitBoard): RoughSVG;
+    getComponent(board: PlaitBoard): BoardComponentInterface;
+    getBoardNativeElement(board: PlaitBoard): HTMLElement;
+    getRectangle(board: PlaitBoard): RectangleClient;
+    getViewportContainer(board: PlaitBoard): HTMLElement;
+};

package/interfaces/element.d.ts

@@ -1,9 +1,13 @@
 import { PlaitNode } from './node';
 import { Point } from './point';
 export interface PlaitElement extends PlaitNode {
+    id: string;
     points?: Point[];
     type?: string;
 }
+export declare const PlaitElement: {
+    isElement: (value: any) => value is PlaitElement;
+};
 export interface ComponentType<T> {
     new (...args: any[]): T;
 }

package/interfaces/index.d.ts

@@ -3,7 +3,7 @@ export * from './pointer';
 export * from '../core/element/context';
 export * from './custom-types';
 export * from './element';
-export * from './graph';
+export * from './rectangle-client';
 export * from './node';
 export * from './operation';
 export * from './path';

package/interfaces/point.d.ts

@@ -1 +1,5 @@
 export declare type Point = [number, number];
+export interface XYPosition {
+    x: number;
+    y: number;
+}

package/interfaces/rectangle-client.d.ts

@@ -0,0 +1,16 @@
+import { Point } from './point';
+export interface RectangleClient {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const RectangleClient: {
+    isIntersect: (origin: RectangleClient, target: RectangleClient) => boolean;
+    toRectangleClient: (points: [Point, Point]) => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};

package/interfaces/selection.d.ts

@@ -1,5 +1,13 @@
 import { Point } from './point';
-export interface Selection {
+export declare const SELECTION_BORDER_COLOR = "#6698FF";
+export declare const SELECTION_FILL_COLOR = "#6698FF19";
+export interface Range {
     anchor: Point;
     focus: Point;
 }
+export interface Selection {
+    ranges: Range[];
+}
+export declare const Selection: {
+    isCollapsed(selection: Range): boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plait/core",
-  "version": "0.0.58",
+  "version": "0.1.0",
   "peerDependencies": {
     "@angular/common": "^12.2.0",
     "@angular/core": "^12.2.0"

package/plugins/create-board.d.ts

@@ -1,3 +1,3 @@
 import { PlaitBoard, PlaitBoardOptions } from '../interfaces/board';
 import { PlaitElement } from '../interfaces/element';
-export declare function createBoard(host: SVGElement, children: PlaitElement[], options: PlaitBoardOptions): PlaitBoard;
+export declare function createBoard(children: PlaitElement[], options: PlaitBoardOptions): PlaitBoard;

package/utils/draw/arrow.d.ts

@@ -0,0 +1,8 @@
+import { RoughSVG } from 'roughjs/bin/svg';
+import { Options } from 'roughjs/bin/core';
+import { Point } from '../../interfaces';
+export declare function arrowPoints(start: Point, end: Point, maxHypotenuseLength?: number, degree?: number): {
+    pointLeft: Point;
+    pointRight: Point;
+};
+export declare function drawArrow(rs: RoughSVG, start: Point, end: Point, options: Options, maxHypotenuseLength?: number, degree?: number): SVGGElement[];

package/utils/draw/rectangle.d.ts

@@ -0,0 +1,14 @@
+import { Options } from 'roughjs/bin/core';
+import { RoughSVG } from 'roughjs/bin/svg';
+/**
+ * drawRoundRectangle
+ * @param rs RoughSVG
+ * @param x1 number
+ * @param y1 number
+ * @param x2 number
+ * @param y2 number
+ * @param options Options
+ * @param outline boolean
+ * @returns SVGGElement
+ */
+export declare function drawRoundRectangle(rs: RoughSVG, x1: number, y1: number, x2: number, y2: number, options: Options, outline?: boolean, borderRadius?: number): SVGGElement;

package/utils/element.d.ts

@@ -0,0 +1,3 @@
+import { PlaitBoard, PlaitElement, RectangleClient } from '../interfaces';
+export declare function getRectangleByElements(board: PlaitBoard, elements: PlaitElement[], recursion: boolean): RectangleClient;
+export declare function getBoardRectangle(board: PlaitBoard): RectangleClient;

package/utils/index.d.ts

@@ -1,7 +1,6 @@
 export * from './board';
 export * from './dom';
 export * from './environment';
-export * from './graph';
 export * from './helper';
 export * from './history';
 export * from './hotkeys';
@@ -9,3 +8,8 @@ export * from './id-creator';
 export * from './math';
 export * from './matrix';
 export * from './weak-maps';
+export * from './selected-element';
+export * from './draw/rectangle';
+export * from './draw/arrow';
+export * from './tree';
+export * from './element';

package/utils/math.d.ts

@@ -1,3 +1,5 @@
+import { RectangleClient } from '../interfaces/rectangle-client';
 export declare function distanceBetweenPointAndSegment(x: number, y: number, x1: number, y1: number, x2: number, y2: number): number;
 export declare function rotate(x1: number, y1: number, x2: number, y2: number, angle: number): number[];
 export declare function distanceBetweenPointAndPoint(x1: number, y1: number, x2: number, y2: number): number;
+export declare function distanceBetweenPointAndRectangle(x: number, y: number, rect: RectangleClient): number;

package/utils/selected-element.d.ts

@@ -0,0 +1,8 @@
+import { PlaitBoard } from '../interfaces/board';
+import { PlaitElement } from '../interfaces/element';
+export declare const calcElementIntersectionSelection: (board: PlaitBoard) => PlaitElement[];
+export declare const cacheSelectedElements: (board: PlaitBoard, selectedElements: PlaitElement[]) => void;
+export declare const getSelectedElements: (board: PlaitBoard) => PlaitElement[];
+export declare const addSelectedElement: (board: PlaitBoard, element: PlaitElement) => void;
+export declare const removeSelectedElement: (board: PlaitBoard, element: PlaitElement) => void;
+export declare const isSelectedElement: (board: PlaitBoard, element: PlaitElement) => boolean;

package/utils/tree.d.ts

@@ -0,0 +1,4 @@
+export declare function depthFirstRecursion<T extends TreeNode = TreeNode>(node: T, callback: (node: T) => void): void;
+export interface TreeNode {
+    children?: TreeNode[];
+}

package/utils/weak-maps.d.ts

@@ -1,8 +1,14 @@
 import { RoughSVG } from 'roughjs/bin/svg';
 import { BoardComponentInterface } from '../board/board.component.interface';
+import { PlaitElement } from '../interfaces/element';
 import { PlaitBoard } from '../interfaces/board';
+import { Point } from '../interfaces/point';
 export declare const FLUSHING: WeakMap<PlaitBoard, boolean>;
 export declare const IS_TEXT_EDITABLE: WeakMap<PlaitBoard, boolean>;
 export declare const BOARD_TO_ON_CHANGE: WeakMap<PlaitBoard, () => void>;
-export declare const HOST_TO_ROUGH_SVG: WeakMap<SVGElement, RoughSVG>;
-export declare const PLAIT_BOARD_TO_COMPONENT: WeakMap<PlaitBoard, BoardComponentInterface>;
+export declare const BOARD_TO_COMPONENT: WeakMap<PlaitBoard, BoardComponentInterface>;
+export declare const BOARD_TO_ROUGH_SVG: WeakMap<PlaitBoard, RoughSVG>;
+export declare const BOARD_TO_HOST: WeakMap<PlaitBoard, SVGSVGElement>;
+export declare const BOARD_TO_ELEMENT_HOST: WeakMap<PlaitBoard, SVGGElement>;
+export declare const BOARD_TO_SELECTED_ELEMENT: WeakMap<PlaitBoard, PlaitElement[]>;
+export declare const BOARD_TO_MOVING_POINT: WeakMap<PlaitBoard, Point>;

package/esm2020/interfaces/graph.mjs

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JhcGguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9wbGFpdC9zcmMvaW50ZXJmYWNlcy9ncmFwaC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBSZWN0YW5nbGVDbGllbnQge1xuICAgIHg6IG51bWJlcjtcbiAgICB5OiBudW1iZXI7XG4gICAgd2lkdGg6IG51bWJlcjtcbiAgICBoZWlnaHQ6IG51bWJlcjtcbn1cbiJdfQ==

package/esm2020/utils/graph.mjs

@@ -1,11 +0,0 @@
-export function toRectangleClient(points) {
-    const xArray = points.map(ele => ele[0]);
-    const yArray = points.map(ele => ele[1]);
-    const xMin = Math.min(...xArray);
-    const xMax = Math.max(...xArray);
-    const yMin = Math.min(...yArray);
-    const yMax = Math.max(...yArray);
-    const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
-    return rect;
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JhcGguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9wbGFpdC9zcmMvdXRpbHMvZ3JhcGgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0EsTUFBTSxVQUFVLGlCQUFpQixDQUFDLE1BQXNCO0lBQ3BELE1BQU0sTUFBTSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN6QyxNQUFNLE1BQU0sR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDekMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxDQUFDO0lBQ2pDLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxNQUFNLENBQUMsQ0FBQztJQUNqQyxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsTUFBTSxDQUFDLENBQUM7SUFDakMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxDQUFDO0lBQ2pDLE1BQU0sSUFBSSxHQUFHLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxJQUFJLEdBQUcsSUFBSSxFQUFFLE1BQU0sRUFBRSxJQUFJLEdBQUcsSUFBSSxFQUFFLENBQUM7SUFDM0UsT0FBTyxJQUFJLENBQUM7QUFDaEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlY3RhbmdsZUNsaWVudCB9IGZyb20gJy4uL2ludGVyZmFjZXMvZ3JhcGgnO1xuaW1wb3J0IHsgUG9pbnQgfSBmcm9tICcuLi9pbnRlcmZhY2VzL3BvaW50JztcblxuZXhwb3J0IGZ1bmN0aW9uIHRvUmVjdGFuZ2xlQ2xpZW50KHBvaW50czogW1BvaW50LCBQb2ludF0pOiBSZWN0YW5nbGVDbGllbnQge1xuICAgIGNvbnN0IHhBcnJheSA9IHBvaW50cy5tYXAoZWxlID0+IGVsZVswXSk7XG4gICAgY29uc3QgeUFycmF5ID0gcG9pbnRzLm1hcChlbGUgPT4gZWxlWzFdKTtcbiAgICBjb25zdCB4TWluID0gTWF0aC5taW4oLi4ueEFycmF5KTtcbiAgICBjb25zdCB4TWF4ID0gTWF0aC5tYXgoLi4ueEFycmF5KTtcbiAgICBjb25zdCB5TWluID0gTWF0aC5taW4oLi4ueUFycmF5KTtcbiAgICBjb25zdCB5TWF4ID0gTWF0aC5tYXgoLi4ueUFycmF5KTtcbiAgICBjb25zdCByZWN0ID0geyB4OiB4TWluLCB5OiB5TWluLCB3aWR0aDogeE1heCAtIHhNaW4sIGhlaWdodDogeU1heCAtIHlNaW4gfTtcbiAgICByZXR1cm4gcmVjdDtcbn1cbiJdfQ==

package/interfaces/graph.d.ts

@@ -1,6 +0,0 @@
-export interface RectangleClient {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}

package/utils/graph.d.ts

@@ -1,3 +0,0 @@
-import { RectangleClient } from '../interfaces/graph';
-import { Point } from '../interfaces/point';
-export declare function toRectangleClient(points: [Point, Point]): RectangleClient;