@plait/angular-board 0.62.0-next.0

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@plait/angular-board" />
+export * from './public-api';

package/island/island-base.component.d.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { PlaitBoard } from '@plait/core';
+import * as i0 from "@angular/core";
+export declare abstract class PlaitIslandBaseComponent {
+    protected cdr: ChangeDetectorRef;
+    board: PlaitBoard;
+    constructor(cdr: ChangeDetectorRef);
+    initialize(board: PlaitBoard): void;
+    markForCheck(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlaitIslandBaseComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PlaitIslandBaseComponent, never, never, {}, {}, never, never, false, never>;
+}
+export declare abstract class PlaitIslandPopoverBaseComponent implements OnInit, OnDestroy {
+    cdr: ChangeDetectorRef;
+    board: PlaitBoard;
+    private subscription?;
+    constructor(cdr: ChangeDetectorRef);
+    initialize(board: PlaitBoard): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * use islandOnInit replace ngOnInit to avoid ngOnInit being overridden
+     */
+    abstract islandOnInit(): void;
+    /**
+     * use islandOnDestroy replace ngOnDestroy to avoid ngOnDestroy being overridden
+     */
+    abstract islandOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlaitIslandPopoverBaseComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PlaitIslandPopoverBaseComponent, never, never, { "board": { "alias": "board"; "required": false; }; }, {}, never, never, false, never>;
+}
+export interface OnBoardChange {
+    onBoardChange: () => void;
+}
+export declare const hasOnBoardChange: (value: any) => value is OnBoardChange;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@plait/angular-board",
+  "version": "0.62.0-next.0",
+  "peerDependencies": {
+    "@angular/common": "^17.2.4",
+    "@angular/core": "^17.2.4",
+    "is-hotkey": "^0.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "exports": {
+    "./styles/styles": {
+      "sass": "./styles/styles.scss"
+    },
+    "./styles/*": {
+      "sass": "./styles/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/plait-angular-board.mjs",
+      "esm": "./esm2022/plait-angular-board.mjs",
+      "default": "./fesm2022/plait-angular-board.mjs"
+    }
+  },
+  "module": "fesm2022/plait-angular-board.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/plugins/angular-board.d.ts

@@ -0,0 +1,18 @@
+import { PlaitElement, PlaitOperation, PlaitTheme, Viewport, Selection, ComponentType } from '@plait/core';
+import { RenderComponentRef } from '@plait/common';
+import { ComponentRef } from '@angular/core';
+export interface AngularBoard {
+    renderComponent: <T, K extends {
+        nativeElement: () => HTMLElement;
+    }>(type: ComponentType<K>, container: Element | DocumentFragment, props: T) => {
+        ref: RenderComponentRef<T>;
+        componentRef: ComponentRef<K>;
+    };
+}
+export interface OnChangeData {
+    children: PlaitElement[];
+    operations: PlaitOperation[];
+    viewport: Viewport;
+    selection: Selection | null;
+    theme: PlaitTheme;
+}

package/plugins/with-angular.d.ts

@@ -0,0 +1,4 @@
+import { PlaitBoard } from '@plait/core';
+import { AngularBoard } from './angular-board';
+import { PlaitTextBoard } from '@plait/common';
+export declare const withAngular: (board: PlaitBoard & PlaitTextBoard) => PlaitBoard & PlaitTextBoard & AngularBoard;

package/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './board/board.component';
+export * from './board/board.component.interface';
+export * from './plugins/angular-board';
+export * from './island/island-base.component';

package/styles/mixins.scss

@@ -0,0 +1,18 @@
+@mixin board-background-color {
+    &.theme-colorful .board-host-svg,
+    &.theme-default .board-host-svg {
+        background-color: #ffffff;
+    }
+    &.theme-soft .board-host-svg {
+        background-color: #f5f5f5;
+    }
+    &.theme-retro .board-host-svg {
+        background-color: #f9f8ed;
+    }
+    &.theme-dark .board-host-svg {
+        background-color: #141414;
+    }
+    &.theme-starry .board-host-svg {
+        background-color: #0d2537;
+    }
+}

package/styles/styles.scss

@@ -0,0 +1,84 @@
+@use './mixins.scss' as mixins;
+
+.plait-board-container {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+
+    // safari can not set this style, it will prevent text being from selected in edit mode
+    // resolve the issue text being selected when user drag and move on board in firefox
+    &.firefox {
+        user-select: none;
+    }
+
+    .viewport-container {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+    }
+
+    &.disabled-scroll {
+        .viewport-container {
+            overflow: hidden;
+        }
+    }
+
+    svg {
+        transform: matrix(1, 0, 0, 1, 0, 0);
+    }
+
+    // https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari
+    .plait-text-container {
+        // chrome show position is not correct, safari not working when don't assigned position property
+        // can not assign absolute, because safari can not show correctly position
+        position: initial;
+    }
+
+    .plait-toolbar {
+        position: absolute;
+        display: flex;
+        height: 30px;
+        z-index: 100;
+    }
+
+    &.element-moving {
+        .element-active-host {
+            & > g:not(.active-with-moving) {
+                display: none;
+            }
+        }
+    }
+
+    &.element-rotating {
+        .element-active-host {
+            g.resize-handle,
+            g[class^='line-auto-complete-'] {
+                display: none;
+            }
+        }
+    }
+
+    &.pointer-selection {
+        cursor: default;
+    }
+
+    &.ns-resize {
+        cursor: ns-resize;
+    }
+    &.ew-resize {
+        cursor: ew-resize;
+    }
+    &.nwse-resize {
+        cursor: nwse-resize;
+    }
+    &.nesw-resize {
+        cursor: nesw-resize;
+    }
+    &.crosshair {
+        cursor: crosshair;
+    }
+
+    @include mixins.board-background-color();
+}

package/utils/weak-maps.d.ts

@@ -0,0 +1,3 @@
+import { PlaitBoard } from '@plait/core';
+import { BoardComponentInterface } from '../board/board.component.interface';
+export declare const BOARD_TO_COMPONENT: WeakMap<PlaitBoard, BoardComponentInterface>;