@x-viewer/ui 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @x-viewer/ui v0.
|
|
2
|
+
* @x-viewer/ui v0.11.0 build Tue Feb 10 2026
|
|
3
3
|
* undefined
|
|
4
|
-
* Copyright
|
|
4
|
+
* Copyright 2026 x-viewer
|
|
5
5
|
* @license UNLICENSED
|
|
6
6
|
*/
|
|
7
7
|
import { THREE } from '@x-viewer/core';
|
|
8
8
|
|
|
9
|
-
function styleInject(
|
|
9
|
+
function styleInject(_0x8b1d73,_0x268304){if(_0x268304===void 0x0)_0x268304={};var _0x3780c9=_0x268304['insertAt'];if(!_0x8b1d73||typeof document==='undefined')return;var _0x3eafa4=document['head']||document['getElementsByTagName']('head')[0x0],_0x48bf22=document['createElement']('style');_0x48bf22['type']='text/css',_0x3780c9==='top'?_0x3eafa4['firstChild']?_0x3eafa4['insertBefore'](_0x48bf22,_0x3eafa4['firstChild']):_0x3eafa4['appendChild'](_0x48bf22):_0x3eafa4['appendChild'](_0x48bf22),_0x48bf22['styleSheet']?_0x48bf22['styleSheet']['cssText']=_0x8b1d73:_0x48bf22['appendChild'](document['createTextNode'](_0x8b1d73));}
|
|
10
10
|
|
|
11
|
-
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;
|
|
11
|
+
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{align-items:center;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:center;line-height:1;opacity:.7;padding:10px;position:absolute;right:36px;transform-origin:center center;-webkit-transform-origin:center center;transition:transform .05s ease;-moz-transition:transform .05s ease;-webkit-transition:transform .05s ease}.base-panel .header .expander:hover{opacity:1}.base-panel .header .expander svg{display:block;height:16px;width:16px}.base-panel .header .expander-collapsed{transform:rotate(180deg);-webkit-transform:rotate(180deg)}.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}";
|
|
12
12
|
styleInject(css_248z$2);
|
|
13
13
|
|
|
14
14
|
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}";
|
|
15
15
|
styleInject(css_248z$1);
|
|
16
16
|
|
|
17
|
-
class BasePanel{constructor(
|
|
17
|
+
class BasePanel{constructor(_0xdf4927){this['mouseDownPositionX']=-0x1,this['mouseDownPositionY']=-0x1,this['originalPanelHeight']=-0x1,this['onHide']=()=>{var _0x40e1f2;this['setVisible'](![]),(_0x40e1f2=this['onClose'])===null||_0x40e1f2===void 0x0?void 0x0:_0x40e1f2['call'](this);},this['onPointerDown']=_0xcab3e8=>{_0xcab3e8['target']['classList']['contains']('draggable')&&_0xcab3e8['button']===0x0&&(this['mouseDownPositionX']=_0xcab3e8['x'],this['mouseDownPositionY']=_0xcab3e8['y'],document['addEventListener']('pointermove',this['onPointerMove']),document['addEventListener']('pointerup',this['onPointerUp']));},this['onPointerMove']=_0x5e9255=>{const _0x719895=this['root'],_0x2cb08f=_0x5e9255['x']-this['mouseDownPositionX'],_0x52be58=_0x5e9255['y']-this['mouseDownPositionY'],_0x149177=this['getPanelTransform']();let _0x7002ae=_0x719895['offsetLeft']+_0x149177['x']+_0x2cb08f,_0x13fc17=_0x719895['offsetTop']+_0x149177['y']+_0x52be58;const _0x48e881=this['viewportContainer'];if(_0x48e881){const _0x484776=_0x48e881['clientLeft']+_0x48e881['clientWidth'],_0x15045a=_0x48e881['clientTop']+_0x48e881['clientHeight'];_0x7002ae<0x0&&(_0x7002ae=0x0),_0x7002ae>0x0&&_0x7002ae+_0x719895['clientWidth']>_0x484776&&(_0x2cb08f>0x0&&(_0x7002ae=_0x719895['offsetLeft']+_0x149177['x'])),_0x13fc17<0x0&&(_0x13fc17=0x0),_0x13fc17>0x0&&_0x13fc17+_0x719895['clientHeight']>_0x15045a&&(_0x52be58>0x0&&(_0x13fc17=_0x719895['offsetTop']+_0x149177['y']));}_0x719895['style']['left']=_0x7002ae-_0x149177['x']+'px',_0x719895['style']['top']=_0x13fc17-_0x149177['y']+'px',this['mouseDownPositionX']=_0x5e9255['x'],this['mouseDownPositionY']=_0x5e9255['y'];},this['onPointerUp']=()=>{document['removeEventListener']('pointermove',this['onPointerMove']),document['removeEventListener']('pointerup',this['onPointerUp']);};const {container:_0x243dca,title:_0x5b3993,cssClass:_0x25ef94,onClose:_0x401476,viewportContainer:_0x4dc480}=_0xdf4927;this['root']=document['createElement']('div'),this['root']['classList']['add']('base-panel');_0x25ef94&&this['root']['classList']['add'](_0x25ef94);this['header']=document['createElement']('div'),this['header']['classList']['add']('header','draggable');const _0x2d6f25=document['createElement']('span');_0x2d6f25['innerText']=_0x5b3993,_0x2d6f25['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']='<svg\x20viewBox=\x220\x200\x2024\x2024\x22\x20aria-hidden=\x22true\x22><path\x20d=\x22M6\x2015l6-6\x206\x206\x22\x20fill=\x22none\x22\x20stroke=\x22currentColor\x22\x20stroke-width=\x222\x22/></svg>',this['header']['appendChild'](_0x2d6f25),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']),_0x243dca['appendChild'](this['root']),this['header']['addEventListener']('pointerdown',this['onPointerDown']),this['collapseBtn']['addEventListener']('click',_0x3d0cc4=>{_0x3d0cc4['stopPropagation']();const _0x137fa3=this['originalPanelHeight']>0x0;_0x137fa3?(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']),_0x401476&&(this['onClose']=_0x401476),_0x4dc480&&(this['viewportContainer']=_0x4dc480);}['setVisible'](_0x1c469f){this['root']['style']['display']=_0x1c469f?'':'none';}['isVisible'](){return this['root']['style']['display']!=='none';}['setTitle'](_0x32f633){this['header']['querySelector']('span.draggable')['innerText']=_0x32f633;}['setContent'](_0x40c01c){this['content']['innerHTML']=_0x40c01c;}['destroy'](){this['header']['removeEventListener']('pointerdown',this['onPointerDown']),this['closeBtn']['removeEventListener']('click',this['onHide']);}['getPanelTransform'](){const _0x25f39c=window['getComputedStyle'](this['root']);let _0x52aa6f=0x0,_0x4b387b=0x0;const _0x400b00=_0x25f39c['transform'];if(_0x400b00&&_0x400b00['startsWith']('matrix')){const _0x1c35c5=_0x400b00['match'](/matrix\([^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+),[^\d\-]*([\d\.\-]+)\)/);_0x1c35c5&&(_0x52aa6f=parseFloat(_0x1c35c5[0x5]),_0x4b387b=parseFloat(_0x1c35c5[0x6]));}else {if(_0x400b00&&_0x400b00['startsWith']('translate')){const _0x273227=_0x400b00['match'](/translate\(([\d\.\-]+)px,\s*([\d\.\-]+)px\)/);_0x273227&&(_0x52aa6f=parseFloat(_0x273227[0x1]),_0x4b387b=parseFloat(_0x273227[0x2]));}}return new THREE['Vector2'](_0x52aa6f,_0x4b387b);}}
|
|
18
18
|
|
|
19
|
-
class PopPanel{constructor(
|
|
19
|
+
class PopPanel{constructor(_0x550cee,_0x145d61,_0x20ac41=document['body']){this['container']=_0x20ac41,this['isFollowing']=![],this['diffX']=0x0,this['diffY']=0x0,this['start']=_0x1c7b55=>{this['isFollowing']=!![],this['diffX']=_0x1c7b55['clientX']-this['element']['offsetLeft'],this['diffY']=_0x1c7b55['clientY']-this['element']['offsetTop'];},this['stop']=()=>{this['isFollowing']=![];},this['follow']=_0x1f403c=>{if(!this['isFollowing'])return;const _0x57a0e4=_0x1f403c['clientX']-this['diffX'],_0x59fd54=_0x1f403c['clientY']-this['diffY'];this['element']['style']['left']=_0x57a0e4+'px',this['element']['style']['top']=_0x59fd54+'px';},this['element']=document['createElement']('div'),this['element']['id']=_0x550cee,this['element']['classList']['add']('pop-panel');const _0x57ba6b=document['createElement']('div');_0x57ba6b['classList']['add']('pop-panel-header'),_0x57ba6b['append'](_0x145d61),this['element']['appendChild'](_0x57ba6b),this['header']=_0x57ba6b;const _0x58604c=document['createElement']('div');_0x58604c['classList']['add']('pop-panel-body'),this['element']['appendChild'](_0x58604c),this['body']=_0x58604c,_0x57ba6b['addEventListener']('mousedown',this['start']),_0x57ba6b['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']();}}
|
|
20
20
|
|
|
21
21
|
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}";
|
|
22
22
|
styleInject(css_248z);
|
|
23
23
|
|
|
24
|
-
class Tooltip{constructor(
|
|
24
|
+
class Tooltip{constructor(_0x2b476c,_0x167a08,_0x21114a){this['follow']=_0x115154=>{this['node']['style']['left']=_0x115154['offsetX']+0xf+'px',this['node']['style']['top']=_0x115154['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']=_0x2b476c,_0x167a08&&this['node']['append'](_0x167a08),this['childNode']=document['createElement']('div'),this['target']=_0x21114a===null||_0x21114a===void 0x0?void 0x0:_0x21114a['target'],this['parentNode']=(_0x21114a===null||_0x21114a===void 0x0?void 0x0:_0x21114a['parentNode'])||document['body'],(_0x21114a===null||_0x21114a===void 0x0?void 0x0:_0x21114a['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']),!(_0x21114a===null||_0x21114a===void 0x0?void 0x0:_0x21114a['showOnCreate'])&&this['node']['setAttribute']('hidden','');}['setContent'](_0xfe3fa6){this['node']['textContent']&&(this['node']['textContent']=null);for(let _0x1ae1ac=0x0;_0x1ae1ac<this['node']['children']['length'];++_0x1ae1ac){const _0x734065=this['node']['children'][_0x1ae1ac];this['node']['removeChild'](_0x734065);}this['node']['append'](_0xfe3fa6),this['node']['appendChild'](this['childNode']);}['updateChildContent'](_0x132505){this['childNode']['textContent']&&(this['childNode']['textContent']=null);for(let _0x17e2d7=0x0;_0x17e2d7<this['node']['children']['length'];++_0x17e2d7){const _0x2ef6c7=this['node']['children'][_0x17e2d7];this['node']['removeChild'](_0x2ef6c7);}this['childNode']['append'](_0x132505);}}
|
|
25
25
|
|
|
26
26
|
export { BasePanel, PopPanel, Tooltip };
|
package/dist/types/Locale.d.ts
CHANGED
|
@@ -2,12 +2,12 @@ import { i18next } from "@x-viewer/core";
|
|
|
2
2
|
export declare const en: {
|
|
3
3
|
PopPanel: {};
|
|
4
4
|
};
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const zh: {
|
|
6
6
|
PopPanel: {};
|
|
7
7
|
};
|
|
8
8
|
export declare const i18n: i18next.i18n;
|
|
9
9
|
/**
|
|
10
10
|
* Change language of ui package.
|
|
11
|
-
* @param language - "en" | "
|
|
11
|
+
* @param language - "en" | "zh"
|
|
12
12
|
*/
|
|
13
|
-
export declare const changeLanguage: (language: "en" | "
|
|
13
|
+
export declare const changeLanguage: (language: "en" | "zh") => void;
|
|
@@ -37,19 +37,10 @@ export declare class BasePanel {
|
|
|
37
37
|
protected mouseDownPositionY: number;
|
|
38
38
|
protected onClose: () => void;
|
|
39
39
|
protected viewportContainer?: HTMLElement;
|
|
40
|
-
private originalPanelHeight;
|
|
41
40
|
constructor(options: BasePanelOptions);
|
|
42
41
|
setVisible(visible: boolean): void;
|
|
43
42
|
isVisible(): boolean;
|
|
44
43
|
setTitle(title: string): void;
|
|
45
44
|
setContent(html: string): void;
|
|
46
45
|
destroy(): void;
|
|
47
|
-
private onHide;
|
|
48
|
-
private onPointerDown;
|
|
49
|
-
private onPointerMove;
|
|
50
|
-
private onPointerUp;
|
|
51
|
-
/**
|
|
52
|
-
* When panel has a transform, e.g. "transform: translate(-50%, -50%);", we need to calculate the actual position.
|
|
53
|
-
*/
|
|
54
|
-
private getPanelTransform;
|
|
55
46
|
}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
export declare class PopPanel {
|
|
2
2
|
private readonly container;
|
|
3
|
-
private element;
|
|
4
3
|
header: HTMLElement;
|
|
5
4
|
body: HTMLElement;
|
|
6
|
-
private isFollowing;
|
|
7
|
-
private diffX;
|
|
8
|
-
private diffY;
|
|
9
5
|
constructor(id: string, content: string | HTMLElement, container?: HTMLElement);
|
|
10
6
|
start: (event: MouseEvent) => void;
|
|
11
7
|
stop: () => void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@x-viewer/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.11.0",
|
|
4
|
+
"description": "UI component package providing reusable interface elements for x-viewer applications. Includes base panels, popup panels, tooltips, and internationalization support.",
|
|
5
5
|
"author": "x-viewer",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"keywords": [
|