@netless/telebox-insider 1.0.0-alpha.31 → 1.0.0-alpha.34
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/dist/TeleBox/index.d.ts +10 -4
- package/dist/TeleBox/typings.d.ts +6 -6
- package/dist/style.css +1 -1
- package/dist/telebox-insider.cjs.js +27 -15
- package/dist/telebox-insider.cjs.js.map +1 -1
- package/dist/telebox-insider.es.js +27 -15
- package/dist/telebox-insider.es.js.map +1 -1
- package/package.json +1 -1
- package/src/TeleBox/index.ts +51 -19
- package/src/TeleBox/typings.ts +6 -6
- package/src/TeleBoxManager/MaxTitleBar/index.ts +9 -6
- package/src/TeleBoxManager/MaxTitleBar/style.scss +1 -1
- package/src/TeleBoxManager/index.ts +3 -3
|
@@ -264,11 +264,11 @@ class TeleBox {
|
|
|
264
264
|
stageStyle = null,
|
|
265
265
|
darkMode$,
|
|
266
266
|
fence$,
|
|
267
|
-
minimized$,
|
|
268
|
-
maximized$,
|
|
269
|
-
readonly$,
|
|
270
267
|
root,
|
|
271
268
|
rootRect$,
|
|
269
|
+
managerMinimized$,
|
|
270
|
+
managerMaximized$,
|
|
271
|
+
managerReadonly$,
|
|
272
272
|
managerStageRect$,
|
|
273
273
|
managerStageRatio$,
|
|
274
274
|
defaultBoxBodyStyle$,
|
|
@@ -294,6 +294,12 @@ class TeleBox {
|
|
|
294
294
|
const boxRatio$ = new Val(boxRatio);
|
|
295
295
|
const zIndex$ = new Val(zIndex);
|
|
296
296
|
const focus$ = new Val(focus);
|
|
297
|
+
const boxMaximized$ = new Val(null);
|
|
298
|
+
const boxMinimized$ = new Val(null);
|
|
299
|
+
const boxReadonly$ = new Val(null);
|
|
300
|
+
const maximized$ = combine([boxMaximized$, managerMaximized$], ([boxMaximized, managerMaximized]) => boxMaximized != null ? boxMaximized : managerMaximized);
|
|
301
|
+
const minimized$ = combine([boxMinimized$, managerMinimized$], ([boxMinimized, managerMinimized]) => boxMinimized != null ? boxMinimized : managerMinimized);
|
|
302
|
+
const readonly$ = combine([boxReadonly$, managerReadonly$], ([boxReadonly, managerReadonly]) => boxReadonly != null ? boxReadonly : managerReadonly);
|
|
297
303
|
const state$ = combine([minimized$, maximized$], ([minimized, maximized]) => minimized ? TELE_BOX_STATE.Minimized : maximized ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
|
|
298
304
|
const minSize$ = new Val({
|
|
299
305
|
width: clamp(minWidth, 0, 1),
|
|
@@ -331,10 +337,10 @@ class TeleBox {
|
|
|
331
337
|
const propsValConfig = {
|
|
332
338
|
darkMode: darkMode$,
|
|
333
339
|
fence: fence$,
|
|
334
|
-
minimized: minimized$,
|
|
335
|
-
maximized: maximized$,
|
|
336
|
-
readonly: readonly$,
|
|
337
340
|
rootRect: rootRect$,
|
|
341
|
+
managerMinimized: managerMinimized$,
|
|
342
|
+
managerMaximized: managerMaximized$,
|
|
343
|
+
managerReadonly: managerReadonly$,
|
|
338
344
|
managerStageRect: managerStageRect$,
|
|
339
345
|
managerStageRatio: managerStageRatio$,
|
|
340
346
|
defaultBoxBodyStyle: defaultBoxBodyStyle$,
|
|
@@ -353,7 +359,10 @@ class TeleBox {
|
|
|
353
359
|
pxIntrinsicSize: pxIntrinsicSize$,
|
|
354
360
|
pxIntrinsicCoord: pxIntrinsicCoord$,
|
|
355
361
|
bodyRect: bodyRect$,
|
|
356
|
-
stageRect: stageRect
|
|
362
|
+
stageRect: stageRect$,
|
|
363
|
+
minimized: minimized$,
|
|
364
|
+
maximized: maximized$,
|
|
365
|
+
readonly: readonly$
|
|
357
366
|
};
|
|
358
367
|
withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
|
|
359
368
|
const valConfig = {
|
|
@@ -362,6 +371,9 @@ class TeleBox {
|
|
|
362
371
|
resizable: resizable$,
|
|
363
372
|
draggable: draggable$,
|
|
364
373
|
boxRatio: boxRatio$,
|
|
374
|
+
boxMinimized: boxMinimized$,
|
|
375
|
+
boxMaximized: boxMaximized$,
|
|
376
|
+
boxReadonly: boxReadonly$,
|
|
365
377
|
stageRatio: stageRatio$,
|
|
366
378
|
bodyStyle: bodyStyle$,
|
|
367
379
|
stageStyle: stageStyle$
|
|
@@ -378,8 +390,8 @@ class TeleBox {
|
|
|
378
390
|
},
|
|
379
391
|
onEvent: (event) => this._delegateEvents.emit(event.type)
|
|
380
392
|
});
|
|
381
|
-
this._sideEffect.addDisposer(boxRatio
|
|
382
|
-
if (boxRatio2 > 0) {
|
|
393
|
+
this._sideEffect.addDisposer(combine([boxRatio$, minimized$]).subscribe(([boxRatio2, minimized]) => {
|
|
394
|
+
if (!minimized && boxRatio2 > 0) {
|
|
383
395
|
this.transform(pxIntrinsicCoord$.value.x, pxIntrinsicCoord$.value.y, pxIntrinsicSize$.value.width, pxIntrinsicSize$.value.height);
|
|
384
396
|
}
|
|
385
397
|
}));
|
|
@@ -982,7 +994,7 @@ var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
|
|
|
982
994
|
TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
|
|
983
995
|
return TELE_BOX_MANAGER_EVENT2;
|
|
984
996
|
})(TELE_BOX_MANAGER_EVENT || {});
|
|
985
|
-
var style = /* @__PURE__ */ (() => ".telebox-max-titlebar {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 5100;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n}\n.telebox-max-titlebar .telebox-title {\n display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles {\n display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {\n display: block;\n}\n.telebox-max-titlebar-
|
|
997
|
+
var style = /* @__PURE__ */ (() => ".telebox-max-titlebar {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 5100;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n}\n.telebox-max-titlebar .telebox-title {\n display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles {\n display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {\n display: block;\n}\n.telebox-max-titlebar-active {\n display: flex;\n}\n.telebox-titles {\n height: 100%;\n margin: 0;\n overflow-y: hidden;\n overflow-x: scroll;\n overflow-x: overlay;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n scrollbar-width: auto;\n}\n.telebox-titles::-webkit-scrollbar {\n height: 4px;\n width: 4px;\n}\n.telebox-titles::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.telebox-titles::-webkit-scrollbar-thumb {\n background-color: rgba(238, 238, 247, 0.8);\n background-color: transparent;\n border-radius: 2px;\n transition: background-color 0.4s;\n}\n.telebox-titles:hover::-webkit-scrollbar-thumb {\n background-color: rgba(238, 238, 247, 0.8);\n}\n.telebox-titles::-webkit-scrollbar-thumb:hover {\n background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:active {\n background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:vertical {\n min-height: 50px;\n}\n.telebox-titles::-webkit-scrollbar-thumb:horizontal {\n min-width: 50px;\n}\n.telebox-titles-content {\n height: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: 0;\n}\n.telebox-titles-tab {\n height: 100%;\n overflow: hidden;\n max-width: 182px;\n min-width: 150px;\n padding: 0 26px 0 16px;\n outline: none;\n font-size: 13px;\n font-family: PingFangSC-Regular, PingFang SC;\n font-weight: 400;\n text-overflow: ellipsis;\n white-space: nowrap;\n word-break: keep-all;\n border: none;\n border-right-width: 1px;\n border-right-style: solid;\n cursor: pointer;\n user-select: none;\n color: #7b88a0;\n color: var(--tele-titlebarTabColor, #7b88a0);\n background-color: transparent;\n background-color: var(--tele-titlebarTabBackground, transparent);\n border-right-color: #e5e5f0;\n border-right-color: var(--tele-titlebarTabDividerColor, #e5e5f0);\n}\n.telebox-titles-tab-focus {\n color: #357bf6;\n color: var(--tele-titlebarTabFocusColor, #357bf6);\n}\n.telebox-readonly .telebox-titles-tab {\n cursor: not-allowed;\n}\n.telebox-color-scheme-dark {\n color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-titles-tab {\n color: #e9e9e9;\n color: var(--tele-titlebarTabColor, #e9e9e9);\n background-color: transparent;\n background-color: var(--tele-titlebarTabBackground, transparent);\n border-right-color: #7b88a0;\n border-right-color: var(--tele-titlebarTabDividerColor, #7b88a0);\n}\n.telebox-color-scheme-dark .telebox-titles-tab-focus {\n color: #357bf6;\n color: var(--tele-titlebarTabFocusColor, #357bf6);\n}")();
|
|
986
998
|
class MaxTitleBar extends DefaultTitleBar {
|
|
987
999
|
constructor(config) {
|
|
988
1000
|
super(config);
|
|
@@ -1019,8 +1031,8 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
1019
1031
|
const $titleBar = super.render();
|
|
1020
1032
|
$titleBar.classList.add(this.wrapClassName("max-titlebar"));
|
|
1021
1033
|
this.sideEffect.addDisposer([
|
|
1022
|
-
this.state
|
|
1023
|
-
$titleBar.classList.toggle(this.wrapClassName("max-titlebar-
|
|
1034
|
+
combine([this.boxes$, this.state$]).subscribe(([boxes, state]) => {
|
|
1035
|
+
$titleBar.classList.toggle(this.wrapClassName("max-titlebar-active"), state === TELE_BOX_STATE.Maximized && boxes.length > 0);
|
|
1024
1036
|
}),
|
|
1025
1037
|
this.readonly$.subscribe((readonly) => {
|
|
1026
1038
|
$titleBar.classList.toggle(this.wrapClassName("readonly"), readonly);
|
|
@@ -1351,13 +1363,13 @@ class TeleBoxManager {
|
|
|
1351
1363
|
namespace: this.namespace,
|
|
1352
1364
|
root: this.$stage,
|
|
1353
1365
|
darkMode$: this._darkMode$,
|
|
1354
|
-
maximized$: this._maximized$,
|
|
1355
|
-
minimized$: this._minimized$,
|
|
1356
1366
|
fence$: this._fence$,
|
|
1357
1367
|
rootRect$: this._rootRect$,
|
|
1358
1368
|
managerStageRect$: this._stageRect$,
|
|
1359
1369
|
managerStageRatio$: this._stageRatio$,
|
|
1360
|
-
|
|
1370
|
+
managerMaximized$: this._maximized$,
|
|
1371
|
+
managerMinimized$: this._minimized$,
|
|
1372
|
+
managerReadonly$: this._readonly$,
|
|
1361
1373
|
collectorRect$: this.collector._rect$,
|
|
1362
1374
|
defaultBoxBodyStyle$: this._defaultBoxBodyStyle$,
|
|
1363
1375
|
defaultBoxStageStyle$: this._defaultBoxStageStyle$
|