@plait/core 0.5.0 → 0.8.0

package/interfaces/board.d.ts

@@ -13,9 +13,11 @@ import { RectangleClient } from './rectangle-client';
 import { PathRef, PathRefOptions } from './path-ref';
 import { PlaitNode } from './node';
 import { Path } from './path';
+import { PlaitTheme, ThemeColor } from './theme';
 export interface PlaitBoard {
     viewport: Viewport;
     children: PlaitElement[];
+    theme: PlaitTheme;
     operations: PlaitOperation[];
     selection: Selection | null;
     pointer: PlaitPointerType | string;
@@ -46,17 +48,20 @@ export interface PlaitBoard {
     isWithinSelection: (element: PlaitElement) => boolean;
     pathRef: (path: Path, options?: PathRefOptions) => PathRef;
     pathRefs: () => Set<PathRef>;
+    applyTheme: (element: PlaitElement) => void;
 }
 export interface PlaitBoardChangeEvent {
     children: PlaitElement[];
     operations: PlaitOperation[];
     viewport: Viewport;
     selection: Selection | null;
+    theme: PlaitTheme;
 }
 export interface PlaitBoardOptions {
-    readonly: boolean;
-    hideScrollbar: boolean;
-    disabledScrollOnNonFocus: boolean;
+    readonly?: boolean;
+    hideScrollbar?: boolean;
+    disabledScrollOnNonFocus?: boolean;
+    themeColors?: ThemeColor[];
 }
 export interface PlaitBoardMove {
     x: number;
@@ -73,9 +78,10 @@ export declare const PlaitBoard: {
     getRectangle(board: PlaitBoard): RectangleClient;
     getViewportContainer(board: PlaitBoard): HTMLElement;
     isFocus(board: PlaitBoard): boolean;
-    isReadonly(board: PlaitBoard): boolean;
+    isReadonly(board: PlaitBoard): boolean | undefined;
     hasBeenTextEditing(board: PlaitBoard): boolean;
     getPointer<T = PlaitPointerType>(board: PlaitBoard): T;
     isPointer<T_1 = PlaitPointerType>(board: PlaitBoard, pointer: T_1): boolean;
     getMovingPoint(board: PlaitBoard): Point | undefined;
+    getThemeColors<T_2 extends ThemeColor = ThemeColor>(board: PlaitBoard): T_2[];
 };

package/interfaces/index.d.ts

@@ -13,3 +13,4 @@ export * from './selection';
 export * from './viewport';
 export * from './history';
 export * from './plugin-key';
+export * from './theme';

package/interfaces/operation.d.ts

@@ -1,6 +1,7 @@
 import { PlaitNode } from '../interfaces/node';
 import { Path } from './path';
 import { Selection } from './selection';
+import { PlaitTheme } from './theme';
 import { Viewport } from './viewport';
 export type InsertNodeOperation = {
     type: 'insert_node';
@@ -17,6 +18,11 @@ export type MoveNodeOperation = {
     path: Path;
     newPath: Path;
 };
+export type SetThemeOperation = {
+    type: 'set_theme';
+    properties: Partial<PlaitTheme>;
+    newProperties: Partial<PlaitTheme>;
+};
 export type SetViewportOperation = {
     type: 'set_viewport';
     properties: Partial<Viewport>;
@@ -33,7 +39,7 @@ export type SetNodeOperation = {
     properties: Partial<PlaitNode>;
     newProperties: Partial<PlaitNode>;
 };
-export type PlaitOperation = InsertNodeOperation | SetViewportOperation | SetSelectionOperation | SetNodeOperation | RemoveNodeOperation | MoveNodeOperation;
+export type PlaitOperation = InsertNodeOperation | SetViewportOperation | SetSelectionOperation | SetNodeOperation | RemoveNodeOperation | MoveNodeOperation | SetThemeOperation;
 export interface PlaitOperationInterface {
     inverse: (op: PlaitOperation) => PlaitOperation;
     isSetViewportOperation: (value: any) => boolean;

package/interfaces/theme.d.ts

@@ -0,0 +1,23 @@
+export interface PlaitTheme {
+    themeColorMode: ThemeColorMode;
+}
+export interface ThemeColor {
+    mode: ThemeColorMode | string;
+    boardBackground?: string;
+    textColor: string;
+}
+export declare enum ThemeColorMode {
+    'default' = "default",
+    'colorful' = "colorful",
+    'soft' = "soft",
+    'retro' = "retro",
+    'dark' = "dark",
+    'starry' = "starry"
+}
+export declare const DefaultThemeColor: ThemeColor;
+export declare const ColorfulThemeColor: ThemeColor;
+export declare const SoftThemeColor: ThemeColor;
+export declare const RetroThemeColor: ThemeColor;
+export declare const DarkThemeColor: ThemeColor;
+export declare const StarryThemeColor: ThemeColor;
+export declare const ThemeColors: ThemeColor[];

package/interfaces/viewport.d.ts

@@ -2,7 +2,6 @@ import { ExtendedType } from './custom-types';
 import { Point } from './point';
 export interface BaseViewport {
     [key: string]: any;
-    viewBackgroundColor: string;
     zoom: number;
     origination?: Point;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plait/core",
-  "version": "0.5.0",
+  "version": "0.8.0",
   "peerDependencies": {
     "@angular/common": "^15.2.2",
     "@angular/core": "^15.2.2"

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

@@ -1,3 +1,5 @@
+@use './mixins.scss' as mixins;
+
 .plait-board-container {
     display: block;
     width: 100%;
@@ -49,4 +51,6 @@
             opacity: 0;
         }
     }
+
+    @include mixins.board-background-color();
 }

package/transforms/board.d.ts

@@ -1,13 +1,20 @@
+import { ThemeColorMode } from '../interfaces/theme';
 import { PlaitBoard } from '../interfaces/board';
 import { Point } from '../interfaces/point';
 import { PlaitPointerType } from '../interfaces/pointer';
 declare function updateViewport(board: PlaitBoard, origination: Point, zoom?: number): void;
 declare function updateZoom(board: PlaitBoard, newZoom: number, isCenter?: boolean): void;
 declare function fitViewport(board: PlaitBoard): void;
+/**
+ * apply theme to every element (remove element custom properties)
+ * invoke applyThemeColor
+ */
+declare function updateThemeColor(board: PlaitBoard, mode: ThemeColorMode): void;
 export declare const BoardTransforms: {
     updatePointerType: <T extends string = PlaitPointerType>(board: PlaitBoard, pointer: T) => void;
     updateViewport: typeof updateViewport;
     fitViewport: typeof fitViewport;
     updateZoom: typeof updateZoom;
+    updateThemeColor: typeof updateThemeColor;
 };
 export {};

package/transforms/theme.d.ts

@@ -0,0 +1,7 @@
+import { PlaitBoard } from '../interfaces/board';
+import { PlaitTheme } from '../interfaces';
+export declare function setTheme(board: PlaitBoard, themeColorMode: PlaitTheme): void;
+export interface ThemeTransforms {
+    setTheme: (board: PlaitBoard, themeColorMode: PlaitTheme) => void;
+}
+export declare const ViewportTransforms: ThemeTransforms;