@x-viewer/ui 0.9.0

package/README.md

@@ -0,0 +1,3 @@
+# ui
+
+This is the ui package of reusable crucial pieces of code for x-viewer.

package/dist/index.esm.js

@@ -0,0 +1,26 @@
+/**
+    * @x-viewer/ui v0.9.0 build Mon Dec 29 2025
+    * undefined
+    * Copyright 2025 x-viewer
+    * @license MIT
+    */
+import { THREE } from '@x-viewer/core';
+
+function styleInject(_0x4db7cb,_0x1539a0){if(_0x1539a0===void 0x0)_0x1539a0={};var _0x24697b=_0x1539a0['insertAt'];if(!_0x4db7cb||typeof document==='undefined')return;var _0x1e36e9=document['head']||document['getElementsByTagName']('head')[0x0],_0x5e77a7=document['createElement']('style');_0x5e77a7['type']='text/css',_0x24697b==='top'?_0x1e36e9['firstChild']?_0x1e36e9['insertBefore'](_0x5e77a7,_0x1e36e9['firstChild']):_0x1e36e9['appendChild'](_0x5e77a7):_0x1e36e9['appendChild'](_0x5e77a7),_0x5e77a7['styleSheet']?_0x5e77a7['styleSheet']['cssText']=_0x4db7cb:_0x5e77a7['appendChild'](document['createTextNode'](_0x4db7cb));}
+
+var css_248z$2 = ".base-panel{background-color:hsla(0,0%,100%,.9);border-radius:4px;box-shadow:1px 3px 10px 0 rgba(0,0,0,.4);color:#000;height:350px;max-height:90%;max-width:50%;min-height:40px;min-width:200px;overflow:hidden;position:absolute;resize:both;right:20px;top:30px;user-select:none;width:330px;z-index:2}.base-panel ::-webkit-scrollbar{width:6px}.base-panel ::-webkit-scrollbar-track{background:#e1e1e1;border-radius:1px}.base-panel ::-webkit-scrollbar-thumb{background:#888;border-radius:1px}.base-panel ::-webkit-scrollbar-thumb:hover{background:#555}.base-panel:hover{background-color:hsla(0,0%,100%,.95)}.base-panel input{background-color:#fff;border:1px solid #d9d9d9;box-shadow:0 2px 0 rgba(0,0,0,.02);color:rgba(0,0,0,.88);height:auto;padding:0 2px;transition:all .2s cubic-bezier(.645,.045,.355,1)}.base-panel input:hover{border-color:#4096ff;color:#4096ff}.base-panel input[type=button]{cursor:pointer;height:auto;padding:1px 10px;text-align:center;user-select:none;white-space:nowrap}.base-panel input[type=button]:hover{border-color:#4096ff;color:#4096ff;z-index:2}.base-panel input[type=text]{padding:0 2px}.base-panel input[type=color]{background-color:transparent;border:0;height:16px;overflow:hidden;padding:0;width:30px}.base-panel select{background-color:#fff;border:1px solid #d9d9d9;box-shadow:0 2px 0 rgba(0,0,0,.02);color:rgba(0,0,0,.88);cursor:pointer;height:auto;padding:1px 10px;text-align:center;transition:all .2s cubic-bezier(.645,.045,.355,1);user-select:none;white-space:nowrap}.base-panel select:hover{border-color:#4096ff;color:#4096ff;z-index:2}.base-panel ::-webkit-color-swatch{height:16px;margin-top:-5px;position:relative;width:40px}.base-panel .header{align-items:center;background-color:rgba(0,0,0,.133);border-bottom:1px solid #ccc;cursor:move;display:flex;font-size:16px;height:40px;padding-left:12px;width:100%}.base-panel .header .expander{cursor:pointer;font-family:cursive;opacity:.7;padding:10px;position:absolute;right:40px;transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transition:transform .05s ease;-moz-transition:transform .05s ease;-webkit-transition:transform .05s ease;vertical-align:middle}.base-panel .header .expander:hover{opacity:1}.base-panel .header .expander-collapsed{transform:rotate(90deg);-webkit-transform:rotate(90deg)}.base-panel .header .close{cursor:pointer;opacity:.7;padding:10px;position:absolute;right:8px}.base-panel .header .close:hover{opacity:1}.base-panel .content{height:calc(100% - 40px);overflow-x:hidden;overflow-y:auto;padding:5px}.base-panel .content .color-input{border:1px solid gray;cursor:pointer;font-size:0;height:20px;width:20px}.base-panel .content .color-input:hover{border:1px solid blue}";
+styleInject(css_248z$2);
+
+var css_248z$1 = ".pop-panel{background:#fff;border-radius:4px;box-shadow:0 12px 48px 16px rgba(0,0,0,.03),0 9px 28px 0 rgba(0,0,0,.05),0 6px 16px -8px rgba(0,0,0,.08);color:#333;left:calc(90% - 160px);position:absolute;top:calc(70% - 100px);width:160px;z-index:99999999}.pop-panel .pop-panel-header{border-bottom:1px solid #efefef;color:#333;cursor:move;font-size:16px;font-weight:bolder;padding:16px 24px 8px;user-select:none}.pop-panel .pop-panel-body{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:16px 24px}.pop-panel .pop-panel-body .pop-panel-item{cursor:pointer;display:inline-block;font-size:16px;margin-right:16px}.pop-panel .pop-panel-body .pop-panel-item .x-viewer-iconfont{font-size:24px}.pop-panel .pop-panel-body .pop-panel-item:last-child{margin-right:0}.pop-panel .pop-panel-body .pop-panel-item.active,.pop-panel .pop-panel-body .pop-panel-item:hover{color:#2c7be5}.pop-panel .pop-panel-body .pop-panel-item.disable{color:#999;cursor:not-allowed}";
+styleInject(css_248z$1);
+
+class BasePanel{constructor(_0x1aef33){this['mouseDownPositionX']=-0x1,this['mouseDownPositionY']=-0x1,this['originalPanelHeight']=-0x1,this['onHide']=()=>{var _0xd36a50;this['setVisible'](![]),(_0xd36a50=this['onClose'])===null||_0xd36a50===void 0x0?void 0x0:_0xd36a50['call'](this);},this['onPointerDown']=_0x13cf3b=>{_0x13cf3b['target']['classList']['contains']('draggable')&&_0x13cf3b['button']===0x0&&(this['mouseDownPositionX']=_0x13cf3b['x'],this['mouseDownPositionY']=_0x13cf3b['y'],document['addEventListener']('pointermove',this['onPointerMove']),document['addEventListener']('pointerup',this['onPointerUp']));},this['onPointerMove']=_0x1dd489=>{const _0x53a0d3=this['root'],_0x3fd8e6=_0x1dd489['x']-this['mouseDownPositionX'],_0x4f269e=_0x1dd489['y']-this['mouseDownPositionY'],_0x237f10=this['getPanelTransform']();let _0x58b201=_0x53a0d3['offsetLeft']+_0x237f10['x']+_0x3fd8e6,_0x1f1d92=_0x53a0d3['offsetTop']+_0x237f10['y']+_0x4f269e;const _0x5a17fb=this['viewportContainer'];if(_0x5a17fb){const _0x39a2d3=_0x5a17fb['clientLeft']+_0x5a17fb['clientWidth'],_0x1183df=_0x5a17fb['clientTop']+_0x5a17fb['clientHeight'];_0x58b201<0x0&&(_0x58b201=0x0),_0x58b201>0x0&&_0x58b201+_0x53a0d3['clientWidth']>_0x39a2d3&&(_0x3fd8e6>0x0&&(_0x58b201=_0x53a0d3['offsetLeft']+_0x237f10['x'])),_0x1f1d92<0x0&&(_0x1f1d92=0x0),_0x1f1d92>0x0&&_0x1f1d92+_0x53a0d3['clientHeight']>_0x1183df&&(_0x4f269e>0x0&&(_0x1f1d92=_0x53a0d3['offsetTop']+_0x237f10['y']));}_0x53a0d3['style']['left']=_0x58b201-_0x237f10['x']+'px',_0x53a0d3['style']['top']=_0x1f1d92-_0x237f10['y']+'px',this['mouseDownPositionX']=_0x1dd489['x'],this['mouseDownPositionY']=_0x1dd489['y'];},this['onPointerUp']=()=>{document['removeEventListener']('pointermove',this['onPointerMove']),document['removeEventListener']('pointerup',this['onPointerUp']);};const {container:_0x3dc30a,title:_0x194654,cssClass:_0x1bd888,onClose:_0x1dfa9b,viewportContainer:_0x2c8041}=_0x1aef33;this['root']=document['createElement']('div'),this['root']['classList']['add']('base-panel');_0x1bd888&&this['root']['classList']['add'](_0x1bd888);this['header']=document['createElement']('div'),this['header']['classList']['add']('header','draggable');const _0x4be540=document['createElement']('span');_0x4be540['innerText']=_0x194654,_0x4be540['classList']['add']('draggable'),this['closeBtn']=document['createElement']('span'),this['closeBtn']['classList']['add']('close'),this['closeBtn']['innerHTML']='✕',this['collapseBtn']=document['createElement']('span'),this['collapseBtn']['classList']['add']('expander'),this['collapseBtn']['innerHTML']='>',this['header']['appendChild'](_0x4be540),this['header']['appendChild'](this['collapseBtn']),this['header']['appendChild'](this['closeBtn']),this['root']['appendChild'](this['header']),this['content']=document['createElement']('div'),this['content']['classList']['add']('content'),this['root']['appendChild'](this['content']),_0x3dc30a['appendChild'](this['root']),this['header']['addEventListener']('pointerdown',this['onPointerDown']),this['collapseBtn']['addEventListener']('click',_0x10be4f=>{_0x10be4f['stopPropagation']();const _0x1f256b=this['originalPanelHeight']>0x0;_0x1f256b?(this['collapseBtn']['classList']['remove']('expander-collapsed'),this['root']['style']['height']=this['originalPanelHeight']+'px',this['originalPanelHeight']=-0x1):(this['collapseBtn']['classList']['add']('expander-collapsed'),this['originalPanelHeight']=this['root']['clientHeight'],this['root']['style']['height']='0px');}),this['closeBtn']['addEventListener']('click',this['onHide']),_0x1dfa9b&&(this['onClose']=_0x1dfa9b),_0x2c8041&&(this['viewportContainer']=_0x2c8041);}['setVisible'](_0x17e8a4){this['root']['style']['display']=_0x17e8a4?'':'none';}['isVisible'](){return this['root']['style']['display']!=='none';}['setTitle'](_0x2fdde3){this['header']['querySelector']('span.draggable')['innerText']=_0x2fdde3;}['setContent'](_0x18aba3){this['content']['innerHTML']=_0x18aba3;}['destroy'](){this['header']['removeEventListener']('pointerdown',this['onPointerDown']),this['closeBtn']['removeEventListener']('click',this['onHide']);}['getPanelTransform'](){const _0x213ee1=window['getComputedStyle'](this['root']);let _0x457f6f=0x0,_0x58ba44=0x0;const _0x363532=_0x213ee1['transform'];if(_0x363532&&_0x363532['startsWith']('matrix')){const _0x2b8847=_0x363532['match'](/matrix\([^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+)\)/);_0x2b8847&&(_0x457f6f=parseFloat(_0x2b8847[0x5]),_0x58ba44=parseFloat(_0x2b8847[0x6]));}else {if(_0x363532&&_0x363532['startsWith']('translate')){const _0x4e769c=_0x363532['match'](/translate\(([\d\.\-]+)px,\s*([\d\.\-]+)px\)/);_0x4e769c&&(_0x457f6f=parseFloat(_0x4e769c[0x1]),_0x58ba44=parseFloat(_0x4e769c[0x2]));}}return new THREE['Vector2'](_0x457f6f,_0x58ba44);}}
+
+class PopPanel{constructor(_0x3ada3f,_0x523971,_0x17bda9=document['body']){this['container']=_0x17bda9,this['isFollowing']=![],this['diffX']=0x0,this['diffY']=0x0,this['start']=_0x783b2a=>{this['isFollowing']=!![],this['diffX']=_0x783b2a['clientX']-this['element']['offsetLeft'],this['diffY']=_0x783b2a['clientY']-this['element']['offsetTop'];},this['stop']=()=>{this['isFollowing']=![];},this['follow']=_0x425996=>{if(!this['isFollowing'])return;const _0x164158=_0x425996['clientX']-this['diffX'],_0x3eef96=_0x425996['clientY']-this['diffY'];this['element']['style']['left']=_0x164158+'px',this['element']['style']['top']=_0x3eef96+'px';},this['element']=document['createElement']('div'),this['element']['id']=_0x3ada3f,this['element']['classList']['add']('pop-panel');const _0x1546ce=document['createElement']('div');_0x1546ce['classList']['add']('pop-panel-header'),_0x1546ce['append'](_0x523971),this['element']['appendChild'](_0x1546ce),this['header']=_0x1546ce;const _0x36a60a=document['createElement']('div');_0x36a60a['classList']['add']('pop-panel-body'),this['element']['appendChild'](_0x36a60a),this['body']=_0x36a60a,_0x1546ce['addEventListener']('mousedown',this['start']),_0x1546ce['addEventListener']('mouseup',this['stop']),document['body']['addEventListener']('mousemove',this['follow']),this['container']['appendChild'](this['element']);}['destroy'](){document['body']['removeEventListener']('mousemove',this['follow']),this['element']['removeEventListener']('mousedown',this['start']),this['element']['removeEventListener']('mouseup',this['stop']),this['element']['remove']();}}
+
+var css_248z = ".follow-tooltip{background:rgba(25,25,25,.3);border-radius:2px;color:hsla(0,0%,100%,.8);font-size:12px;left:-500px;padding:6px;position:absolute;z-index:99999999}";
+styleInject(css_248z);
+
+class Tooltip{constructor(_0xef7724,_0x1dc1a4,_0x5f3501){this['follow']=_0x493446=>{this['node']['style']['left']=_0x493446['offsetX']+0xf+'px',this['node']['style']['top']=_0x493446['offsetY']-0x1e+'px';},this['show']=()=>this['node']['hasAttribute']('hidden')&&this['node']['removeAttribute']('hidden'),this['hide']=()=>!this['node']['hasAttribute']('hidden')&&this['node']['setAttribute']('hidden',''),this['destroy']=()=>{this['target']?this['target']['removeEventListener']('mousemove',this['follow']):document['removeEventListener']('mousemove',this['follow']),this['parentNode']['removeChild'](this['node']);},this['node']=document['createElement']('div'),this['node']['id']=_0xef7724,_0x1dc1a4&&this['node']['append'](_0x1dc1a4),this['childNode']=document['createElement']('div'),this['target']=_0x5f3501===null||_0x5f3501===void 0x0?void 0x0:_0x5f3501['target'],this['parentNode']=(_0x5f3501===null||_0x5f3501===void 0x0?void 0x0:_0x5f3501['parentNode'])||document['body'],(_0x5f3501===null||_0x5f3501===void 0x0?void 0x0:_0x5f3501['followPointer'])&&(this['node']['classList']['add']('follow-tooltip'),this['target']?this['target']['addEventListener']('mousemove',this['follow']):document['addEventListener']('mousemove',this['follow'])),this['parentNode']['appendChild'](this['node']),!(_0x5f3501===null||_0x5f3501===void 0x0?void 0x0:_0x5f3501['showOnCreate'])&&this['node']['setAttribute']('hidden','');}['setContent'](_0x21a3eb){this['node']['textContent']&&(this['node']['textContent']=null);for(let _0x15b265=0x0;_0x15b265<this['node']['children']['length'];++_0x15b265){const _0x1fe102=this['node']['children'][_0x15b265];this['node']['removeChild'](_0x1fe102);}this['node']['append'](_0x21a3eb),this['node']['appendChild'](this['childNode']);}['updateChildContent'](_0x1ba123){this['childNode']['textContent']&&(this['childNode']['textContent']=null);for(let _0x5cb066=0x0;_0x5cb066<this['node']['children']['length'];++_0x5cb066){const _0xd076e9=this['node']['children'][_0x5cb066];this['node']['removeChild'](_0xd076e9);}this['childNode']['append'](_0x1ba123);}}
+
+export { BasePanel, PopPanel, Tooltip };

package/dist/types/Locale.d.ts

@@ -0,0 +1,13 @@
+import { i18next } from "@x-viewer/core";
+export declare const en: {
+    PopPanel: {};
+};
+export declare const cn: {
+    PopPanel: {};
+};
+export declare const i18n: i18next.i18n;
+/**
+ * Change language of ui package.
+ * @param language - "en" | "cn"
+ */
+export declare const changeLanguage: (language: "en" | "cn") => void;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./panel";
+export * from "./tool-tip";

package/dist/types/panel/BasePanel.d.ts

@@ -0,0 +1,55 @@
+/**
+ * BasePanel options
+ */
+export interface BasePanelOptions {
+    /**
+     * Panel parent container in DOM.
+     */
+    container: HTMLElement;
+    /**
+     * Panel title
+     */
+    title: string;
+    /**
+     * The css class name. This will be added to panel root div.
+     * Caller can use this to override initial panel position, size, etc.
+     */
+    cssClass?: string;
+    /**
+     * Callback when panel is hidden
+     */
+    onClose?: () => void;
+    /**
+     * Used by drag, when user want to limit the panel to be dragged within a certain area.
+     */
+    viewportContainer?: HTMLElement;
+}
+/**
+ * Base panel, which defined common draggable header, close button, style, etc.
+ */
+export declare class BasePanel {
+    root: HTMLDivElement;
+    header: HTMLDivElement;
+    content: HTMLDivElement;
+    collapseBtn: HTMLSpanElement;
+    closeBtn: HTMLSpanElement;
+    protected mouseDownPositionX: number;
+    protected mouseDownPositionY: number;
+    protected onClose: () => void;
+    protected viewportContainer?: HTMLElement;
+    private originalPanelHeight;
+    constructor(options: BasePanelOptions);
+    setVisible(visible: boolean): void;
+    isVisible(): boolean;
+    setTitle(title: string): void;
+    setContent(html: string): void;
+    destroy(): void;
+    private onHide;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /**
+     * When panel has a transform, e.g. "transform: translate(-50%, -50%);", we need to calculate the actual position.
+     */
+    private getPanelTransform;
+}

package/dist/types/panel/PopPanel.d.ts

@@ -0,0 +1,14 @@
+export declare class PopPanel {
+    private readonly container;
+    private element;
+    header: HTMLElement;
+    body: HTMLElement;
+    private isFollowing;
+    private diffX;
+    private diffY;
+    constructor(id: string, content: string | HTMLElement, container?: HTMLElement);
+    start: (event: MouseEvent) => void;
+    stop: () => void;
+    follow: (event: MouseEvent) => void;
+    destroy(): void;
+}

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

@@ -0,0 +1,4 @@
+import "./BasePanel.module.scss";
+import "./PopPanel.module.scss";
+export * from "./BasePanel";
+export * from "./PopPanel";

package/dist/types/tool-tip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+interface TooltipConfig {
+    showOnCreate?: boolean;
+    followPointer?: boolean;
+    parentNode?: HTMLElement;
+    target?: HTMLElement;
+}
+export declare class Tooltip {
+    private node;
+    private parentNode;
+    private target;
+    private childNode;
+    constructor(id: string, content?: string | HTMLElement | null, cfg?: TooltipConfig);
+    setContent(content: string | HTMLElement): void;
+    updateChildContent(content: string | HTMLElement): void;
+    follow: (event: MouseEvent) => void;
+    show: () => false | void;
+    hide: () => false | void;
+    destroy: () => void;
+}
+export {};

package/dist/types/tool-tip/index.d.ts

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

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@x-viewer/ui",
+  "version": "0.9.0",
+  "description": "The first typescript example for the Monorepo example",
+  "author": "x-viewer",
+  "license": "MIT",
+  "keywords": [
+    "x-viewer",
+    "BIM",
+    "ui",
+    "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": {
+    "@x-viewer/core": "^0.9.0"
+  },
+  "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"
+  }
+}