@x-viewer/plugins 0.9.0

package/dist/types/toolbars/Toolbar.constants.d.ts

@@ -0,0 +1,95 @@
+import { type BaseViewer, IconClass } from "@x-viewer/core";
+import type { Toolbar } from "./Toolbar";
+/**
+ * @type
+ * 1: click event
+ * 2：show popup
+ * 3：show submenu
+ * 4：turn on/off
+ */
+export declare enum MenuTypeEnums {
+    ClickEvent = 1,
+    Popup = 2,
+    SubMenu = 3,
+    Switch = 4
+}
+/**
+ * Buildin toolbar ids
+ */
+export declare enum ToolbarMenuId {
+    HomeView = "HomeView",
+    OrthoMode = "OrthoMode",
+    Measure = "Measure",
+    MeasureDistance = "MeasureDistance",
+    MeasureArea = "MeasureArea",
+    MeasureAngle = "MeasureAngle",
+    MeasureCoordinate = "MeasureCoordinate",
+    MeasureClear = "MeasureClear",
+    MarkupVisibility = "MarkupVisibility",
+    Markup = "Markup",
+    MarkupArrow = "Arrow",
+    MarkupRect = "Rect",
+    MarkupCloudRect = "CloudRect",
+    MarkupPolyLine = "PolyLine",
+    MarkupCloudLine = "CloudLine",
+    MarkupEllipse = "Ellipse",
+    MarkupCircle = "Circle",
+    MarkupDot = "Dot",
+    MarkupText = "Text",
+    MarkupX = "X",
+    MarkupStrokeStyle = "StrokeStyle",
+    MarkupLineWidth = "LineWidth",
+    MarkupLineWidth2 = "LineWidth2",
+    MarkupLineWidth5 = "LineWidth5",
+    MarkupLineWidth10 = "LineWidth10",
+    MarkupFontSize = "FontSize",
+    MarkupFontSize14 = "FontSize14",
+    MarkupFontSize18 = "FontSize18",
+    MarkupFontSize24 = "FontSize24",
+    MarkupClear = "MarkupClear",
+    MarkupQuit = "MarkupQuit",
+    Section = "Section",
+    SectionBox = "SectionBox",
+    SectionPlane = "SectionPlane",
+    SectionAxis = "SectionAxis",
+    TreeView = "Tree View",
+    Viewpoint = "Viewpoint",
+    Annotation = "Annotation",
+    Property = "Property",
+    Settings = "Settings",
+    Compared = "Compared",
+    QuitCompare = "QuitCompare",
+    Fullscreen = "FullScreen",
+    SceneClear = "SceneClear",
+    Layers = "Layers",
+    ZoomToRectangle = "ZoomToRectangle",
+    Screenshot = "GetScreenshot"
+}
+/**
+ * Toolbar menu config.
+ * Used to define menu item name, icon, child items, etc.
+ */
+export interface ToolbarMenuConfig {
+    menuName?: string;
+    icon?: IconClass;
+    children?: ToolbarConfig;
+    visible?: boolean;
+    mutexIds?: ToolbarMenuId[];
+    defaultActive?: boolean;
+    type?: MenuTypeEnums;
+    customElement?: (viewer: BaseViewer, menuId: string, cfg: ToolbarMenuConfig) => HTMLDivElement;
+    onActive?: (viewer: BaseViewer, toolbar: Toolbar) => void;
+    onDeactive?: (viewer: BaseViewer) => void;
+    onClick?: (viewer: BaseViewer, toolbar: Toolbar, event: MouseEvent | TouchEvent) => void;
+}
+/**
+ * Toolbar config.
+ * The key is ToolbarMenuId, and the value is a ToolbarMenuConfig.
+ */
+export type ToolbarConfig = {
+    [key in ToolbarMenuId]?: ToolbarMenuConfig;
+};
+/**
+ * @internal
+ */
+export declare const GroupConfig: ToolbarMenuId[][];

package/dist/types/toolbars/Toolbar.d.ts

@@ -0,0 +1,107 @@
+import { type BaseViewer } from "@x-viewer/core";
+import { ToolbarConfig, ToolbarMenuConfig, ToolbarMenuId } from "./Toolbar.constants";
+/**
+ * @class Toolbar
+ * @description A customized toolbar.
+ *
+ * For example:
+ * #### Example 1:
+ * Using {@link updateMenu} to modify the toolbar configuration
+ * ```typescript
+ *     const toolbar = this.viewer.toolbar;
+ *     toolbar.updateMenu(ToolbarMenuId.Viewpoint, { onActive: this.handleActive });
+ *     toolbar.updateMenu(ToolbarMenuId.Annotation, { visible: false });
+ * ```
+ *
+ * #### Example 2:
+ * Using {@link addMenu} to add a new menu to the toolbar with specific position.
+ * ```typescript
+ *     const toolbar = this.viewer.toolbar;
+ *     toolbar.addMenu(
+ *         "newMenu",
+ *         { icon: { default: "icon-new" }, menuName: "New menu item", controller: TreeViewerController },
+ *         [2, 5]
+ *     );
+ * ```
+ *
+ * #### Example 3:
+ * Modify the configuration in to custmize the toolbar directly, and then {@link refresh} the whole toolbar.
+ * ```typescript
+ *     const toolbar = this.viewer.toolbar;
+ *     const toolbarGroupConfig = [
+ *         [ToolbarMenuId.OrthoMode, ToolbarMenuId.FullScreen],
+ *         [ToolbarMenuId.Measure, ToolbarMenuId.Section],
+ *         [ToolbarMenuId.TreeView, ToolbarMenuId.Viewpoint, ToolbarMenuId.Annotation, ToolbarMenuId.Property],
+ *         [ToolbarMenuId.Setting, "newMenu"],
+ *     ];
+ *     toolbar.toolbarGroupConfig = toolbarGroupConfig;
+ *     toolbar.refresh();
+ * ```
+ */
+export declare class Toolbar {
+    protected viewer: BaseViewer;
+    protected element: HTMLDivElement | undefined;
+    protected visible: boolean;
+    activateMenuId?: string;
+    menuList: Map<string, ToolbarMenu>;
+    protected menuCfg: ToolbarConfig;
+    protected groupCfg: ToolbarMenuId[][] | string[][];
+    protected screenshotDownloadFileName: string;
+    constructor(viewer: BaseViewer, menuCfg: ToolbarConfig, groupCfg?: ToolbarMenuId[][] | string[][]);
+    private init;
+    keydown: (e: KeyboardEvent) => void;
+    clearActive(): void;
+    setActive(menuId: string, active: boolean): void;
+    isActive(menuId: string): boolean;
+    setScreenshotDownloadFileName(filename: string): void;
+    getScreenshotDownloadFileName(): string;
+    private createToolbarMenu;
+    /**
+     * @description Modify the menu configuration and update the toolbar.
+     * @param {ToolbarMenuId} menuId
+     * @param {Partial<ToolbarMenuConfig>} config
+     * @memberof Toolbar
+     */
+    updateMenu(menuId: ToolbarMenuId, config: Partial<ToolbarMenuConfig>): void;
+    /**
+     * @description Modify the menu configuration and update the toolbar.
+     * @param {{ menuId: ToolbarMenuId; config: Partial<ToolbarMenuConfig> }[]} configs
+     * @memberof Toolbar
+     */
+    updateMenus(configs: {
+        menuId: ToolbarMenuId;
+        config: Partial<ToolbarMenuConfig>;
+    }[]): void;
+    /**
+     * @description Add a custmized menu to toolbar.
+     * @param {string} menuId
+     * @param {ToolbarMenuConfig} config
+     * @param {[number, number]} [insertPosition]
+     * @return {*}
+     * @memberof Toolbar
+     */
+    addMenu(menuId: string, config: ToolbarMenuConfig, insertPosition?: [number, number]): void;
+    /**
+     * @description Update the whole toolbar element with the current configuration.
+     * @memberof Toolbar
+     */
+    refresh(): void;
+    show(): void;
+    hide(): void;
+    destroy(): void;
+}
+/**
+ * @internal
+ */
+export declare class ToolbarMenu {
+    private eventBus;
+    active: boolean;
+    element: HTMLDivElement;
+    toolbar: Toolbar;
+    markupToolbar?: Toolbar;
+    menuId: string;
+    constructor(viewer: BaseViewer, toolbar: Toolbar, menuId: string, cfg: ToolbarMenuConfig, parent?: ToolbarMenu);
+    private createButton;
+    setActive(active: boolean): void;
+    isActive(): boolean;
+}

package/dist/types/toolbars/Viewer2dToolbarPlugin.d.ts

@@ -0,0 +1,37 @@
+import { Plugin, type BaseViewer, PluginConfig } from "@x-viewer/core";
+import { Toolbar } from "./Toolbar";
+import { ToolbarConfig, ToolbarMenuId } from "./Toolbar.constants";
+/**
+ * Viewer2d toolbar plugin config.
+ */
+export interface Viewer2dToolbarPluginConfig extends Partial<PluginConfig> {
+    language?: "cn" | "en";
+    menuConfig: ToolbarConfig;
+    groupConfig?: ToolbarMenuId[][] | string[][];
+    markupMenuCfg?: ToolbarConfig;
+    markupGroupCfg?: ToolbarMenuId[][] | string[][];
+}
+/**
+ * Viewer2d toolbar plugin.
+ */
+export declare class Viewer2dToolbarPlugin extends Plugin {
+    static readonly DEFAULT_ID = "Viewer2dToolbarPlugin";
+    protected cfg: Viewer2dToolbarPluginConfig;
+    protected toolbar: Toolbar;
+    protected markupToolbar?: Toolbar;
+    constructor(viewer: BaseViewer, cfg?: Viewer2dToolbarPluginConfig);
+    private initLocalization;
+    getToolbar(): Toolbar;
+    getMarkupToolbar(): Toolbar | undefined;
+    /**
+     * Sets a menu item to be active or inactive.
+     */
+    setActive(menuId: string, active: boolean): void;
+    /**
+     * Gets if a menu item is active.
+     */
+    isActive(menuId: string): boolean;
+    protected onMarkupActivated: () => void;
+    protected onMarkupDeactivated: () => void;
+    destroy(): void;
+}

package/dist/types/toolbars/Viewer3dToolbarPlugin.d.ts

@@ -0,0 +1,37 @@
+import { Plugin, type BaseViewer, PluginConfig } from "@x-viewer/core";
+import { Toolbar } from "./Toolbar";
+import { ToolbarConfig, ToolbarMenuId } from "./Toolbar.constants";
+/**
+ * Viewer3d toolbar plugin config.
+ */
+export interface Viewer3dToolbarPluginConfig extends Partial<PluginConfig> {
+    language?: "cn" | "en";
+    menuConfig: ToolbarConfig;
+    groupConfig?: ToolbarMenuId[][] | string[][];
+}
+/**
+ * Viewer3d toolbar plugin.
+ */
+export declare class Viewer3dToolbarPlugin extends Plugin {
+    static readonly DEFAULT_ID = "Viewer3dToolbarPlugin";
+    protected cfg: Viewer3dToolbarPluginConfig;
+    private toolbar;
+    constructor(viewer: BaseViewer, cfg?: Viewer3dToolbarPluginConfig);
+    private initLocalization;
+    getToolbar(): Toolbar;
+    /**
+     * Sets a menu item to be active or inactive.
+     */
+    setActive(menuId: string, active: boolean): void;
+    /**
+     * Gets if a menu item is active.
+     */
+    isActive(menuId: string): boolean;
+    /**
+     * When taking a screenshot, user may want to set a custom filename.
+     * If not set, it will be "download", so the file is "download.png" or "download.jpg".
+     * @param filename The filename, e.g., "thumbnail".
+     */
+    setScreenshotDownloadFileName(filename: string): void;
+    destroy(): void;
+}

package/dist/types/toolbars/index.d.ts

@@ -0,0 +1,7 @@
+import "./toolbar.scss";
+export * from "./Viewer2dToolbarPlugin";
+export * from "./Toolbar.config";
+export * from "./Toolbar.constants";
+export * from "./Toolbar";
+export * from "./Viewer3dToolbarPlugin";
+export * from "./MarkupToolbar";

package/dist/types/tree-view/Locale.d.ts

@@ -0,0 +1,8 @@
+import { i18next } from "@x-viewer/core";
+export declare const en: {
+    treeView: string;
+};
+export declare const cn: {
+    treeView: string;
+};
+export declare const i18n: i18next.i18n;

package/dist/types/tree-view/TreeViewPlugin.d.ts

@@ -0,0 +1,71 @@
+import { Viewer3d, Plugin, PluginConfig, THREE } from "@x-viewer/core";
+import { BasePanel } from "@x-viewer/ui";
+/**
+ * Tree view plugin config.
+ */
+export interface TreeViewPluginConfig extends Partial<PluginConfig> {
+    /**
+     * Container div id.
+     */
+    containerId?: string;
+    /**
+     * If panel is visible. It is visible by default.
+     */
+    visible?: boolean;
+    language?: "cn" | "en";
+}
+/**
+ * Tree view plugin events.
+ */
+type TreeViewPluginEvents = {
+    /**
+     * Panel visibility change event.
+     */
+    visibilitychange: boolean;
+};
+/**
+ * Tree view plugin.
+ */
+export declare class TreeViewPlugin extends Plugin<TreeViewPluginEvents> {
+    static readonly DEFAULT_ID = "TreeViewPlugin";
+    protected cfg: TreeViewPluginConfig;
+    protected basePanel?: BasePanel;
+    protected container?: HTMLDivElement;
+    protected content?: HTMLDivElement;
+    protected lastHighlightedObject?: THREE.Object3D;
+    constructor(viewer: Viewer3d, cfg?: TreeViewPluginConfig);
+    protected updateContent(): void;
+    private initLocalization;
+    setVisible(visible: boolean): void;
+    isVisible(): boolean;
+    protected onModelLoadOrRemove: () => void;
+    protected onObjectSelected: (evt: THREE.Object3D) => void;
+    protected onObjectDeselected: (evt: THREE.Object3D) => void;
+    private onClose;
+    destroy(): void;
+    protected addContent(): void;
+    private buildTreeForNodeRecursive;
+    private selectTreeNodeAndHighlightSceneObject;
+    private highlightTreeNodeBySceneObject;
+    private highlightSceneObject;
+    private focusSceneObject;
+    /**
+     * Recursively update all children visibility and their checkboxes.
+     */
+    private updateChildrenVisibility;
+    /**
+     * Update parent checkbox state (checked/unchecked/indeterminate) based on children.
+     */
+    private updateParentVisibility;
+    private handleSingleClick;
+    private handleDoubleClick;
+    private handleClick;
+    private IsModelNode;
+    private showPopMenu;
+    private getClosestParentTreeNode;
+    /**
+     * Find Object3D by uuid in all loaded models.
+     */
+    private findObjectByUuid;
+}
+export {};

package/dist/types/tree-view/index.d.ts

@@ -0,0 +1,2 @@
+import "./TreeView.scss";
+export * from "./TreeViewPlugin";

package/dist/types/view-cube/Locale.d.ts

@@ -0,0 +1,18 @@
+import { i18next } from "@x-viewer/core";
+export declare const en: {
+    front: string;
+    back: string;
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+};
+export declare const cn: {
+    front: string;
+    back: string;
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+};
+export declare const i18n: i18next.i18n;

package/dist/types/view-cube/ViewCube.d.ts

@@ -0,0 +1,79 @@
+import { THREE } from "@x-viewer/core";
+/**
+ * View cube config.
+ */
+export interface ViewCubeConfig {
+    showAxes?: boolean;
+    lineColor?: number;
+}
+/**
+ * View cube element names.
+ */
+export declare enum ViewCubeElement {
+    TopFace = "TopFace",
+    FrontFace = "FrontFace",
+    RightFace = "RightFace",
+    BackFace = "BackFace",
+    LeftFace = "LeftFace",
+    BottomFace = "BottomFace",
+    TopFrontEdge = "TopFrontEdge",
+    TopRightEdge = "TopRightEdge",
+    TopBackEdge = "TopBackEdge",
+    TopLeftEdge = "TopLeftEdge",
+    FrontRightEdge = "FrontRightEdge",
+    BackRightEdge = "BackRightEdge",
+    BackLeftEdge = "BackLeftEdge",
+    FrontLeftEdge = "FrontLeftEdge",
+    BottomFrontEdge = "BottomFrontEdge",
+    BottomRightEdge = "BottomRightEdge",
+    BottomBackEdge = "BottomBackEdge",
+    BottomLeftEdge = "BottomLeftEdge",
+    TopFrontRightCorner = "TopFrontRightCorner",
+    TopBackRightCorner = "TopBackRightCorner",
+    TopBackLeftCorner = "TopBackLeftCorner",
+    TopFrontLeftCorner = "TopFrontLeftCorner",
+    BottomFrontRightCorner = "BottomFrontRightCorner",
+    BottomBackRightCorner = "BottomBackRightCorner",
+    BottomBackLeftCorner = "BottomBackLeftCorner",
+    BottomFrontLeftCorner = "BottomFrontLeftCorner"
+}
+/**
+ * ViewCube class.
+ */
+export declare class ViewCube extends THREE.Object3D {
+    readonly name = "ViewCube";
+    private readonly AXIS_COLOR_X;
+    private readonly AXIS_COLOR_Y;
+    private readonly AXIS_COLOR_Z;
+    private readonly FACE_BACKGROUND_COLOR;
+    private readonly FACE_HOVER_BACKGROUND_COLOR;
+    private readonly INNER_CUBE_WIDTH;
+    private readonly OUTER_CUBE_WIDTH;
+    private readonly CORNER_WIDTH;
+    private readonly AXIS_LENGTH;
+    private readonly EDGE_COLOUR;
+    private readonly EDGE_OPACITY;
+    private readonly EDGE_SIZE;
+    private readonly CORNER_COLOR;
+    private readonly CORNER_OPACITY;
+    private faces;
+    private innerViewCubeMesh?;
+    private showAxes;
+    private lineColor;
+    dirty: boolean;
+    activateMeshName?: string;
+    constructor(cfg?: ViewCubeConfig);
+    private init;
+    private createAxes;
+    private createViewCubeFaces;
+    private createViewCubeFace;
+    private createViewCubeEdges;
+    private createEdge;
+    private createViewCubeCorners;
+    private createCorner;
+    getBBox(): THREE.Box3;
+    getDirectionByElement(viewCubeName: ViewCubeElement): THREE.Vector3 | undefined;
+    update(): void;
+    private updateViewCube;
+    private updateMeshTick;
+}

package/dist/types/view-cube/ViewCubePlugin.d.ts

@@ -0,0 +1,55 @@
+import { type BaseViewer, Plugin, PluginConfig } from "@x-viewer/core";
+export interface ViewCubePluginConfig extends Partial<PluginConfig> {
+    containerId?: string;
+    language?: "cn" | "en";
+    showAxes?: boolean;
+    lineColor?: number;
+}
+export declare class ViewCubePlugin extends Plugin {
+    static readonly DEFAULT_ID = "ViewCubePlugin";
+    /**
+     * @internal
+     */
+    private cfg;
+    private container;
+    private scene?;
+    private camera?;
+    private renderer?;
+    private directionalLight?;
+    private width;
+    private height;
+    private requestAnimationFrameHandle?;
+    private pickManager;
+    private renderEnabled;
+    private inputManager?;
+    private viewCube?;
+    private lastCoords?;
+    constructor(viewer: BaseViewer, cfg?: ViewCubePluginConfig);
+    get viewerContainer(): HTMLElement;
+    private init;
+    private initLocalization;
+    private initScene;
+    private initCamera;
+    private initRenderer;
+    private initLights;
+    private initViewCube;
+    private initEvents;
+    setVisible(visible: boolean): void;
+    isVisible(): boolean;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerleave;
+    private onClick;
+    private updateViewerCamera;
+    private updateActivateMeshName;
+    private updateCameraAndMeshName;
+    /**
+     * Update viewCube according to camera direction.
+     * Camera's direction is the only input factor for this class. It always look at the origin.
+     * @param direction
+     */
+    private updateCameraDirection;
+    private animate;
+    private zoomToBBox;
+    destroy(): void;
+}

package/dist/types/view-cube/index.d.ts

@@ -0,0 +1,2 @@
+import "./viewcube.scss";
+export * from "./ViewCubePlugin";

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@x-viewer/plugins",
+  "version": "0.9.0",
+  "description": "The first typescript example for the Monorepo example",
+  "author": "x-viewer",
+  "license": "MIT",
+  "keywords": [
+    "ifc",
+    "bim",
+    "gis",
+    "cad",
+    "viewer",
+    "three.js",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "package.json",
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "dist/index.esm.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "dependencies": {
+    "clipper-lib": "^6.4.2",
+    "dat.gui": "^0.7.7",
+    "mitt": "^3.0.0",
+    "pdfjs-dist": "3.8.162",
+    "screenfull": "^6.0.0",
+    "stats.js": "^0.17.0",
+    "@x-viewer/core": "^0.9.0",
+    "@x-viewer/ui": "^0.9.0"
+  },
+  "devDependencies": {
+    "@types/dat.gui": "^0.7.6",
+    "@types/stats.js": "^0.17.3"
+  },
+  "scripts": {
+    "build": "pnpm run clean:build && pnpm run data-type && rollup -c --environment BUILD:production",
+    "clean:build": "rimraf ./dist",
+    "data-type": "tsc --project tsconfig.bundle.json && tsc-alias -p tsconfig.bundle.json",
+    "dev": "pnpm run data-type && rollup -c -w",
+    "lint": "eslint . --ext .js,.ts",
+    "lint:fix": "pnpm lint --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
+    "lint-staged": "lint-staged"
+  }
+}