@netless/telebox-insider 0.3.0-beta.4 → 0.3.0-beta.6
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/index.d.ts +71 -11
- package/dist/style.css +95 -2
- package/dist/telebox-insider.cjs.js +577 -163
- package/dist/telebox-insider.cjs.js.map +1 -1
- package/dist/telebox-insider.es.js +577 -163
- package/dist/telebox-insider.es.js.map +1 -1
- package/package.json +1 -1
- package/src/AppMenu/index.ts +145 -0
- package/src/AppMenu/style.scss +109 -0
- package/src/TeleBoxCollector/index.ts +35 -1
- package/src/TeleBoxCollector/style.scss +11 -1
- package/src/TeleBoxManager/MaxTitleBar/index.ts +5 -2
- package/src/TeleBoxManager/MaxTitleBar/style.scss +1 -1
- package/src/TeleBoxManager/index.ts +484 -166
- package/src/TeleBoxManager/typings.ts +2 -0
|
@@ -21,7 +21,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
22
|
exports[Symbol.toStringTag] = "Module";
|
|
23
23
|
var fancyScrollbar = ".tele-fancy-scrollbar {\n overscroll-behavior: contain;\n overflow: auto;\n overflow-y: scroll;\n overflow-y: overlay;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n height: 8px;\n width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n background-color: rgba(68, 78, 96, 0.1);\n background-color: transparent;\n border-radius: 4px;\n transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n min-width: 50px;\n}";
|
|
24
|
-
var style$
|
|
24
|
+
var style$4 = '.telebox-box {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 100;\n transition: width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.4s ease;\n}\n\n.telebox-box-main {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: #f9f9fc;\n box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);\n border-radius: 6px;\n border: 1px solid #e3e3ec;\n}\n\n.telebox-titlebar-wrap {\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n}\n\n.telebox-content-wrap {\n flex: 1;\n width: 100%;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.telebox-content {\n width: 100%;\n height: 100%;\n position: relative;\n}\n\n.telebox-footer-wrap {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n}\n\n.telebox-footer-wrap::before {\n content: "";\n display: block;\n flex: 1;\n}\n\n.telebox-resize-handle {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n position: absolute;\n z-index: 2147483647;\n}\n\n.telebox-n {\n width: 100%;\n height: 5px;\n left: 0;\n top: -5px;\n cursor: n-resize;\n}\n\n.telebox-s {\n width: 100%;\n height: 5px;\n left: 0;\n bottom: -5px;\n cursor: s-resize;\n}\n\n.telebox-w {\n width: 5px;\n height: 100%;\n left: -5px;\n top: 0;\n cursor: w-resize;\n}\n\n.telebox-e {\n width: 5px;\n height: 100%;\n right: -5px;\n top: 0;\n cursor: e-resize;\n}\n\n.telebox-nw {\n width: 15px;\n height: 15px;\n top: -5px;\n left: -5px;\n cursor: nw-resize;\n}\n\n.telebox-ne {\n width: 15px;\n height: 15px;\n top: -5px;\n right: -5px;\n cursor: ne-resize;\n}\n\n.telebox-se {\n width: 15px;\n height: 15px;\n bottom: -5px;\n right: -5px;\n cursor: se-resize;\n}\n\n.telebox-sw {\n width: 15px;\n height: 15px;\n bottom: -5px;\n left: -5px;\n cursor: sw-resize;\n}\n\n.telebox-track-mask {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 2147483647;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.0001);\n cursor: move;\n}\n\n.telebox-cursor-n {\n cursor: n-resize;\n}\n\n.telebox-cursor-s {\n cursor: s-resize;\n}\n\n.telebox-cursor-w {\n cursor: w-resize;\n}\n\n.telebox-cursor-e {\n cursor: e-resize;\n}\n\n.telebox-cursor-nw {\n cursor: nw-resize;\n}\n\n.telebox-cursor-ne {\n cursor: ne-resize;\n}\n\n.telebox-cursor-se {\n cursor: se-resize;\n}\n\n.telebox-cursor-sw {\n cursor: sw-resize;\n}\n\n.telebox-maximized .telebox-resize-handles,\n.telebox-no-resize .telebox-resize-handles {\n display: none;\n}\n\n.telebox-maximized {\n box-shadow: none;\n transition: none;\n}\n\n.telebox-minimized {\n transition: width 0.05s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.05s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.6s ease;\n opacity: 0;\n pointer-events: none;\n user-select: none;\n}\n\n.telebox-transforming {\n will-change: transform;\n transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0);\n}\n\n.telebox-readonly .telebox-resize-handle {\n cursor: initial !important;\n pointer-events: none !important;\n}\n\n.telebox-color-scheme-dark {\n color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-box-main {\n color: #e9e9e9;\n background: #212126;\n border-color: #43434d;\n}';
|
|
25
25
|
var eventemitter3 = { exports: {} };
|
|
26
26
|
(function(module) {
|
|
27
27
|
var has = Object.prototype.hasOwnProperty, prefix = "~";
|
|
@@ -1199,7 +1199,7 @@ function c(e2) {
|
|
|
1199
1199
|
};
|
|
1200
1200
|
return { bindSideEffect: s2, combine: (e3, r2, i2, o2) => s2(t(e3, r2, i2, o2)), createVal: (e3, t2) => s2(new r(e3, t2)) };
|
|
1201
1201
|
}
|
|
1202
|
-
var style$
|
|
1202
|
+
var style$3 = '.telebox-titlebar {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n box-sizing: border-box;\n height: 26px;\n display: flex;\n align-items: center;\n background: #fff;\n user-select: none;\n border-bottom: 1px solid #eeeef7;\n touch-action: manipulation;\n}\n\n.telebox-title-area {\n padding-left: 16px;\n overflow: hidden;\n position: relative;\n height: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n}\n\n.telebox-title {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n overflow: hidden;\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 400;\n font-family: PingFangSC-Regular, PingFang SC;\n white-space: nowrap;\n word-break: keep-all;\n text-overflow: ellipsis;\n color: #191919;\n}\n\n.telebox-drag-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n z-index: 10;\n}\n\n.telebox-titlebar-btns {\n position: absolute;\n right: 16px;\n white-space: nowrap;\n word-break: keep-all;\n margin-left: auto;\n font-size: 0;\n z-index: 10;\n}\n\n.telebox-titlebar-btn {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n width: 22px;\n height: 22px;\n padding: 0;\n outline: none;\n border: none;\n background: transparent;\n cursor: pointer;\n}\n\n.telebox-titlebar-btn ~ .telebox-titlebar-btn {\n margin-left: 10px;\n}\n\n.telebox-titlebar-btn-icon {\n width: 22px;\n height: 22px;\n}\n\n.telebox-readonly .telebox-titlebar-btn {\n cursor: not-allowed;\n}\n\n.telebox-titlebar-icon-minimize {\n background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n}\n\n.telebox-titlebar-icon-maximize {\n background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");\n}\n\n.telebox-titlebar-icon-maximize.is-active {\n background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");\n}\n\n.telebox-titlebar-icon-close {\n background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n}\n\n.telebox-color-scheme-dark {\n color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-title {\n color: #e9e9e9;\n}\n\n.telebox-color-scheme-dark .telebox-titlebar {\n color: #e9e9e9;\n background: #43434d;\n border-bottom: none;\n}';
|
|
1203
1203
|
exports.TELE_BOX_COLOR_SCHEME = void 0;
|
|
1204
1204
|
(function(TELE_BOX_COLOR_SCHEME2) {
|
|
1205
1205
|
TELE_BOX_COLOR_SCHEME2["Light"] = "light";
|
|
@@ -2279,7 +2279,7 @@ class TeleBox {
|
|
|
2279
2279
|
function noop() {
|
|
2280
2280
|
return;
|
|
2281
2281
|
}
|
|
2282
|
-
var style$
|
|
2282
|
+
var style$2 = ".telebox-collector {\n user-select: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n visibility: hidden;\n display: block;\n position: absolute;\n z-index: 1000;\n width: 40px;\n height: 40px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n font-size: 0;\n border-radius: 50%;\n background: #fff;\n box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);\n cursor: pointer;\n user-select: none;\n pointer-events: none;\n background-repeat: no-repeat;\n background-size: 18px 16px;\n background-position: center;\n -webkit-tap-highlight-color: transparent;\n}\n\n.telebox-collector-visible {\n visibility: visible;\n pointer-events: initial;\n}\n\n.telebox-collector-readonly {\n cursor: not-allowed;\n}\n\n.telebox-color-scheme-dark {\n color-scheme: dark;\n}\n\n.telebox-color-scheme-dark.telebox-collector {\n background-color: #43434d;\n}\n\n.telebox-collector-shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n pointer-events: none;\n}";
|
|
2283
2283
|
var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
|
|
2284
2284
|
class TeleBoxCollector {
|
|
2285
2285
|
constructor({
|
|
@@ -2288,8 +2288,10 @@ class TeleBoxCollector {
|
|
|
2288
2288
|
darkMode = false,
|
|
2289
2289
|
namespace = "telebox",
|
|
2290
2290
|
styles = {},
|
|
2291
|
-
onClick
|
|
2292
|
-
|
|
2291
|
+
onClick,
|
|
2292
|
+
getBoxesStatus
|
|
2293
|
+
}) {
|
|
2294
|
+
this.$appMenuContainer = document.createElement("div");
|
|
2293
2295
|
this.handleCollectorClick = () => {
|
|
2294
2296
|
if (!this._readonly && this.onClick) {
|
|
2295
2297
|
this.onClick();
|
|
@@ -2301,6 +2303,11 @@ class TeleBoxCollector {
|
|
|
2301
2303
|
this.namespace = namespace;
|
|
2302
2304
|
this.styles = styles;
|
|
2303
2305
|
this.onClick = onClick;
|
|
2306
|
+
this.getBoxesStatus = getBoxesStatus;
|
|
2307
|
+
}
|
|
2308
|
+
get boxesStatus() {
|
|
2309
|
+
var _a;
|
|
2310
|
+
return (_a = this.getBoxesStatus) == null ? void 0 : _a.call(this);
|
|
2304
2311
|
}
|
|
2305
2312
|
get visible() {
|
|
2306
2313
|
return this._visible;
|
|
@@ -2321,6 +2328,21 @@ class TeleBoxCollector {
|
|
|
2321
2328
|
}
|
|
2322
2329
|
return this;
|
|
2323
2330
|
}
|
|
2331
|
+
hasMinimizedBox() {
|
|
2332
|
+
const boxesStatus = this.boxesStatus;
|
|
2333
|
+
if (boxesStatus) {
|
|
2334
|
+
for (const status of boxesStatus.values()) {
|
|
2335
|
+
if (status === exports.TELE_BOX_STATE.Minimized) {
|
|
2336
|
+
return true;
|
|
2337
|
+
}
|
|
2338
|
+
}
|
|
2339
|
+
}
|
|
2340
|
+
return false;
|
|
2341
|
+
}
|
|
2342
|
+
updateBoxesStatus() {
|
|
2343
|
+
const hasMinimizedBox = this.hasMinimizedBox();
|
|
2344
|
+
this.setVisible(hasMinimizedBox);
|
|
2345
|
+
}
|
|
2324
2346
|
setVisible(visible) {
|
|
2325
2347
|
if (this._visible !== visible) {
|
|
2326
2348
|
this._visible = visible;
|
|
@@ -2375,6 +2397,8 @@ class TeleBoxCollector {
|
|
|
2375
2397
|
this.$collector.classList.add(this.wrapClassName("collector-readonly"));
|
|
2376
2398
|
}
|
|
2377
2399
|
this.$collector.classList.add(this.wrapClassName(this._darkMode ? "color-scheme-dark" : "color-scheme-light"));
|
|
2400
|
+
this.$appMenuContainer.classList.add(this.wrapClassName("collector-shadow"));
|
|
2401
|
+
this.$collector.append(this.$appMenuContainer);
|
|
2378
2402
|
this.setStyles(this.styles);
|
|
2379
2403
|
}
|
|
2380
2404
|
return this.$collector;
|
|
@@ -2411,7 +2435,7 @@ exports.TELE_BOX_MANAGER_EVENT = void 0;
|
|
|
2411
2435
|
TELE_BOX_MANAGER_EVENT2["BoxStatus"] = "box_status";
|
|
2412
2436
|
TELE_BOX_MANAGER_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
|
|
2413
2437
|
})(exports.TELE_BOX_MANAGER_EVENT || (exports.TELE_BOX_MANAGER_EVENT = {}));
|
|
2414
|
-
var style = ".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 z-index:
|
|
2438
|
+
var style$1 = ".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 z-index: 1000;\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-maximized {\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: 8px;\n width: 8px;\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: 4px;\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: 50px;\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: 1px solid #e5e5f0;\n color: #7b88a0;\n background: transparent;\n cursor: pointer;\n user-select: none;\n}\n.telebox-titles-tab-focus {\n color: #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-titlebar {\n color: #e9e9e9;\n background: #43434d;\n border-bottom: none;\n}\n.telebox-color-scheme-dark .telebox-titles-tab {\n border-right-color: #7b88a0;\n}\n.telebox-color-scheme-dark .telebox-title {\n color: #e9e9e9;\n}";
|
|
2415
2439
|
class MaxTitleBar extends DefaultTitleBar {
|
|
2416
2440
|
constructor(config) {
|
|
2417
2441
|
super(config);
|
|
@@ -2421,6 +2445,10 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2421
2445
|
this.darkMode = config.darkMode;
|
|
2422
2446
|
this.getBoxesStatus = config.getBoxesStatus;
|
|
2423
2447
|
}
|
|
2448
|
+
get boxesStatus() {
|
|
2449
|
+
var _a;
|
|
2450
|
+
return (_a = this.getBoxesStatus) == null ? void 0 : _a.call(this);
|
|
2451
|
+
}
|
|
2424
2452
|
hasMaximizedBoxInStatus() {
|
|
2425
2453
|
if (this.getBoxesStatus) {
|
|
2426
2454
|
const boxesStatus = this.getBoxesStatus();
|
|
@@ -2578,6 +2606,120 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2578
2606
|
return this.$titles;
|
|
2579
2607
|
}
|
|
2580
2608
|
}
|
|
2609
|
+
var style = ".telebox-app-menu-app-menu-badge {\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n width: auto;\n height: 12px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: #fff;\n background-color: red;\n border-radius: 6px;\n padding: 0 4px;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n transform: scale(0.7);\n}\n\n.telebox-app-menu-app-menu-tooltip {\n position: absolute;\n right: 0;\n bottom: 0;\n transform: translateY(-50px);\n width: 100px;\n height: auto;\n display: flex;\n flex-flow: column nowrap;\n align-items: center;\n justify-content: flex-end;\n box-shadow: 0 2px 6px #2f419226;\n border-radius: 4px;\n padding: 3px 0;\n background-color: #fff;\n pointer-events: none;\n}\n\n.telebox-app-menu-app-menu-item {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: space-between;\n padding: 0 5px 0 15px;\n box-sizing: border-box;\n width: 100%;\n pointer-events: auto;\n color: #999;\n}\n.telebox-app-menu-app-menu-item:hover {\n background-color: #f0f0f0;\n}\n.telebox-app-menu-app-menu-item.show-all, .telebox-app-menu-app-menu-item.hidden-all {\n padding-left: 20px;\n pointer-events: none;\n background-size: 15%;\n background-position-y: center;\n background-position-x: 2px;\n background-repeat: no-repeat;\n}\n.telebox-app-menu-app-menu-item.active {\n color: #333;\n pointer-events: auto;\n}\n.telebox-app-menu-app-menu-item.hidden-all {\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);\n}\n.telebox-app-menu-app-menu-item.show-all {\n border-top: 1px solid #ccc;\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);\n}\n\n.telebox-app-menu-app-menu-item-title {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 12px;\n line-height: 20px;\n text-align: left;\n height: 20px;\n pointer-events: none;\n}";
|
|
2610
|
+
class AppMenu {
|
|
2611
|
+
constructor(props) {
|
|
2612
|
+
this.namespace = "telebox-app-menu";
|
|
2613
|
+
this.badge = document.createElement("div");
|
|
2614
|
+
this.menuView = document.createElement("div");
|
|
2615
|
+
this.containerClickHandler = () => {
|
|
2616
|
+
if (this.manager.readonly) {
|
|
2617
|
+
return;
|
|
2618
|
+
}
|
|
2619
|
+
const isShowMenuView = getComputedStyle(this.menuView).display === "flex";
|
|
2620
|
+
if (isShowMenuView) {
|
|
2621
|
+
this.menuView.style.display = "none";
|
|
2622
|
+
} else {
|
|
2623
|
+
this.menuView.style.display = "flex";
|
|
2624
|
+
}
|
|
2625
|
+
};
|
|
2626
|
+
this.menuViewClickHandler = (e2) => {
|
|
2627
|
+
e2.stopPropagation();
|
|
2628
|
+
e2.stopImmediatePropagation();
|
|
2629
|
+
const target = e2.target;
|
|
2630
|
+
const id = target.getAttribute(`data-${this.c("app-id")}`);
|
|
2631
|
+
if (id) {
|
|
2632
|
+
const lastNotMinimizedBoxStatus = this.manager.getLastNotMinimizedBoxStatus(id) || exports.TELE_BOX_STATE.Normal;
|
|
2633
|
+
const zIndex = (lastNotMinimizedBoxStatus === exports.TELE_BOX_STATE.Maximized ? this.manager.getMaxMaximizedBoxZIndex() : this.manager.getMaxNormalBoxZIndex()) + 1;
|
|
2634
|
+
this.manager.setBox(id, {
|
|
2635
|
+
status: lastNotMinimizedBoxStatus,
|
|
2636
|
+
zIndex
|
|
2637
|
+
}, false, () => {
|
|
2638
|
+
this.manager.focusBox(id);
|
|
2639
|
+
});
|
|
2640
|
+
return;
|
|
2641
|
+
}
|
|
2642
|
+
};
|
|
2643
|
+
this.updatePrefersColorSchemeHandler = () => {
|
|
2644
|
+
this.container.classList.remove(this.theme);
|
|
2645
|
+
this.theme = this.manager.prefersColorScheme;
|
|
2646
|
+
this.container.classList.add(this.theme);
|
|
2647
|
+
};
|
|
2648
|
+
this.appMenuChange = () => {
|
|
2649
|
+
const minimizedBoxesStatus = this.manager.getMinimizedBoxesStatus();
|
|
2650
|
+
this.render(minimizedBoxesStatus);
|
|
2651
|
+
};
|
|
2652
|
+
this.container = props.container;
|
|
2653
|
+
this.manager = props.manager;
|
|
2654
|
+
this.theme = props.theme;
|
|
2655
|
+
this.getBoxesStatus = props.getBoxesStatus;
|
|
2656
|
+
this.init();
|
|
2657
|
+
}
|
|
2658
|
+
get boxesStatus() {
|
|
2659
|
+
var _a;
|
|
2660
|
+
return ((_a = this.getBoxesStatus) == null ? void 0 : _a.call(this)) || new Map();
|
|
2661
|
+
}
|
|
2662
|
+
get minimizedBoxesStatus() {
|
|
2663
|
+
const arr = [];
|
|
2664
|
+
this.boxesStatus.forEach((status) => {
|
|
2665
|
+
if (status === exports.TELE_BOX_STATE.Minimized) {
|
|
2666
|
+
arr.push(status);
|
|
2667
|
+
}
|
|
2668
|
+
});
|
|
2669
|
+
return arr;
|
|
2670
|
+
}
|
|
2671
|
+
c(className) {
|
|
2672
|
+
return `${this.namespace}-${className}`;
|
|
2673
|
+
}
|
|
2674
|
+
createDefaultAppMenu() {
|
|
2675
|
+
this.badge.classList.add(this.c("app-menu-badge"));
|
|
2676
|
+
this.menuView.classList.add(this.c("app-menu-tooltip"));
|
|
2677
|
+
this.container.classList.add(this.c("app-menu-container"), this.theme);
|
|
2678
|
+
this.menuView.addEventListener("click", this.menuViewClickHandler);
|
|
2679
|
+
this.container.append(this.badge, this.menuView);
|
|
2680
|
+
}
|
|
2681
|
+
async init() {
|
|
2682
|
+
this.createDefaultAppMenu();
|
|
2683
|
+
this.appMenuChange();
|
|
2684
|
+
}
|
|
2685
|
+
createMinimizedItem(appId) {
|
|
2686
|
+
const appItem = document.createElement("div");
|
|
2687
|
+
appItem.classList.add(this.c("app-menu-item"));
|
|
2688
|
+
console.log("appId=====>", appId);
|
|
2689
|
+
appItem.setAttribute(`data-${this.c("app-id")}`, appId);
|
|
2690
|
+
const titleDiv = document.createElement("div");
|
|
2691
|
+
titleDiv.classList.add(this.c("app-menu-item-title"));
|
|
2692
|
+
const app = this.manager.getBox(appId);
|
|
2693
|
+
titleDiv.innerText = (app == null ? void 0 : app.title) || appId;
|
|
2694
|
+
appItem.appendChild(titleDiv);
|
|
2695
|
+
return appItem;
|
|
2696
|
+
}
|
|
2697
|
+
renderMenuView(minimizedBoxesStatus) {
|
|
2698
|
+
const items = [];
|
|
2699
|
+
minimizedBoxesStatus.forEach((_, appId) => {
|
|
2700
|
+
items.push(this.createMinimizedItem(appId));
|
|
2701
|
+
});
|
|
2702
|
+
this.menuView.append(...items);
|
|
2703
|
+
}
|
|
2704
|
+
render(minimizedBoxesStatus) {
|
|
2705
|
+
this.menuView.style.display = "none";
|
|
2706
|
+
this.badge.innerText = "";
|
|
2707
|
+
this.menuView.innerHTML = "";
|
|
2708
|
+
if (minimizedBoxesStatus.size === 0) {
|
|
2709
|
+
this.container.style.display = "none";
|
|
2710
|
+
} else {
|
|
2711
|
+
this.badge.innerText = minimizedBoxesStatus.size.toString();
|
|
2712
|
+
this.renderMenuView(minimizedBoxesStatus);
|
|
2713
|
+
this.container.style.display = "block";
|
|
2714
|
+
}
|
|
2715
|
+
}
|
|
2716
|
+
destroy() {
|
|
2717
|
+
this.badge.remove();
|
|
2718
|
+
this.menuView.removeEventListener("click", this.menuViewClickHandler);
|
|
2719
|
+
this.menuView.remove();
|
|
2720
|
+
this.container.remove();
|
|
2721
|
+
}
|
|
2722
|
+
}
|
|
2581
2723
|
class TeleBoxManager {
|
|
2582
2724
|
constructor({
|
|
2583
2725
|
root = document.body,
|
|
@@ -2593,22 +2735,31 @@ class TeleBoxManager {
|
|
|
2593
2735
|
},
|
|
2594
2736
|
collector,
|
|
2595
2737
|
namespace = "telebox",
|
|
2596
|
-
readonly = false
|
|
2738
|
+
readonly = false,
|
|
2739
|
+
useBoxesStatus = false
|
|
2597
2740
|
} = {}) {
|
|
2598
2741
|
this.events = new EventEmitter();
|
|
2599
2742
|
this._sideEffect = new o();
|
|
2743
|
+
this.useBoxesStatus = useBoxesStatus;
|
|
2600
2744
|
const { combine, createVal } = c(this._sideEffect);
|
|
2601
2745
|
this.root = root;
|
|
2602
2746
|
this.namespace = namespace;
|
|
2603
2747
|
this.boxes$ = createVal([]);
|
|
2604
2748
|
this.topBox$ = this.boxes$.derive((boxes) => {
|
|
2605
2749
|
if (boxes.length > 0) {
|
|
2750
|
+
console.log("topBox===>topBox$===>000");
|
|
2751
|
+
let currentTopBox = void 0;
|
|
2606
2752
|
const topBox = boxes.reduce((topBox2, box) => {
|
|
2607
2753
|
if (box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized) {
|
|
2608
2754
|
return topBox2;
|
|
2609
2755
|
}
|
|
2756
|
+
if (!topBox2) {
|
|
2757
|
+
topBox2 = box;
|
|
2758
|
+
return topBox2;
|
|
2759
|
+
}
|
|
2610
2760
|
return topBox2.zIndex > box.zIndex ? topBox2 : box;
|
|
2611
|
-
});
|
|
2761
|
+
}, currentTopBox);
|
|
2762
|
+
console.log("topBox===>topBox$===>end", topBox == null ? void 0 : topBox.id);
|
|
2612
2763
|
return topBox;
|
|
2613
2764
|
}
|
|
2614
2765
|
return;
|
|
@@ -2680,20 +2831,16 @@ class TeleBoxManager {
|
|
|
2680
2831
|
collector2.setReadonly(readonly$.value);
|
|
2681
2832
|
collector2.setDarkMode(this._darkMode$.value);
|
|
2682
2833
|
this._sideEffect.add(() => {
|
|
2834
|
+
collector2.getBoxesStatus = () => {
|
|
2835
|
+
return this.boxesStatus$;
|
|
2836
|
+
};
|
|
2683
2837
|
collector2.onClick = () => {
|
|
2684
2838
|
if (!readonly$.value) {
|
|
2685
|
-
if (this.
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
this.setBoxStatus(box.id, lastNotMinimizedBoxStatus);
|
|
2690
|
-
} else {
|
|
2691
|
-
this.setBoxStatus(box.id, exports.TELE_BOX_STATE.Normal);
|
|
2692
|
-
}
|
|
2693
|
-
});
|
|
2694
|
-
this.effectBoxStatusChange();
|
|
2839
|
+
if (!this.useBoxesStatus) {
|
|
2840
|
+
minimized$.setValue(false);
|
|
2841
|
+
} else if (this.useBoxesStatus && this.appMenu) {
|
|
2842
|
+
this.appMenu.containerClickHandler();
|
|
2695
2843
|
}
|
|
2696
|
-
minimized$.setValue(false);
|
|
2697
2844
|
}
|
|
2698
2845
|
};
|
|
2699
2846
|
return () => collector2.destroy();
|
|
@@ -2722,6 +2869,12 @@ class TeleBoxManager {
|
|
|
2722
2869
|
}
|
|
2723
2870
|
return;
|
|
2724
2871
|
};
|
|
2872
|
+
this._setCollectorRect = (collectorRect) => {
|
|
2873
|
+
var _a;
|
|
2874
|
+
if ((_a = collector$.value) == null ? void 0 : _a.$collector) {
|
|
2875
|
+
collectorRect$.setValue(collectorRect);
|
|
2876
|
+
}
|
|
2877
|
+
};
|
|
2725
2878
|
const collectorRect$ = createVal(minimized$.value ? this._calcCollectorRect() : void 0);
|
|
2726
2879
|
collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
|
|
2727
2880
|
this.boxes.forEach((box) => {
|
|
@@ -2729,12 +2882,10 @@ class TeleBoxManager {
|
|
|
2729
2882
|
});
|
|
2730
2883
|
});
|
|
2731
2884
|
minimized$.subscribe((minimized2, _, skipUpdate) => {
|
|
2732
|
-
var _a
|
|
2885
|
+
var _a;
|
|
2733
2886
|
(_a = collector$.value) == null ? void 0 : _a.setVisible(minimized2);
|
|
2734
2887
|
if (minimized2) {
|
|
2735
|
-
|
|
2736
|
-
collectorRect$.setValue(this._calcCollectorRect());
|
|
2737
|
-
}
|
|
2888
|
+
this._setCollectorRect(this._calcCollectorRect());
|
|
2738
2889
|
}
|
|
2739
2890
|
this.boxes.forEach((box) => box.setMinimized(minimized2, skipUpdate));
|
|
2740
2891
|
if (!skipUpdate) {
|
|
@@ -2759,10 +2910,28 @@ class TeleBoxManager {
|
|
|
2759
2910
|
if (id) {
|
|
2760
2911
|
const box = this.getBox(id);
|
|
2761
2912
|
if (box) {
|
|
2762
|
-
this.
|
|
2763
|
-
if (box.boxStatus && box.boxStatus !== exports.TELE_BOX_STATE.Maximized || !box.boxStatus) {
|
|
2913
|
+
if (!this.useBoxesStatus) {
|
|
2764
2914
|
this.makeBoxTop(box);
|
|
2915
|
+
} else {
|
|
2916
|
+
if (box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Normal) {
|
|
2917
|
+
const maxNormalBoxZIndex = this.getMaxNormalBoxZIndex();
|
|
2918
|
+
if (maxNormalBoxZIndex > box.zIndex) {
|
|
2919
|
+
this.setBox(box, {
|
|
2920
|
+
zIndex: maxNormalBoxZIndex + 1
|
|
2921
|
+
}, false);
|
|
2922
|
+
}
|
|
2923
|
+
} else if (box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Maximized) {
|
|
2924
|
+
const maxMaximizedBoxZIndex = this.getMaxMaximizedBoxZIndex();
|
|
2925
|
+
if (maxMaximizedBoxZIndex > box.zIndex) {
|
|
2926
|
+
this.setBox(box, {
|
|
2927
|
+
zIndex: maxMaximizedBoxZIndex + 1
|
|
2928
|
+
}, false);
|
|
2929
|
+
}
|
|
2930
|
+
this.makeMaximizedTopBoxFocus();
|
|
2931
|
+
}
|
|
2765
2932
|
}
|
|
2933
|
+
console.log("checkFocusBox===>", box.id);
|
|
2934
|
+
this.focusBox(box);
|
|
2766
2935
|
return;
|
|
2767
2936
|
}
|
|
2768
2937
|
}
|
|
@@ -2781,32 +2950,81 @@ class TeleBoxManager {
|
|
|
2781
2950
|
return this.boxesStatus$;
|
|
2782
2951
|
},
|
|
2783
2952
|
onEvent: (event) => {
|
|
2784
|
-
var _a, _b, _c;
|
|
2785
2953
|
switch (event.type) {
|
|
2786
2954
|
case exports.TELE_BOX_DELEGATE_EVENT.Maximize: {
|
|
2787
|
-
if (this.hasBoxesStatus()
|
|
2788
|
-
this.
|
|
2789
|
-
|
|
2790
|
-
|
|
2955
|
+
if (this.hasBoxesStatus()) {
|
|
2956
|
+
let targetBox = this.maxTitleBar.focusedBox;
|
|
2957
|
+
if (!targetBox) {
|
|
2958
|
+
targetBox = this.getMaximizedTopBox();
|
|
2959
|
+
}
|
|
2960
|
+
if (targetBox == null ? void 0 : targetBox.id) {
|
|
2961
|
+
const box = this.getBox(targetBox.id);
|
|
2962
|
+
if (box) {
|
|
2963
|
+
this.setBox(box, {
|
|
2964
|
+
status: exports.TELE_BOX_STATE.Normal,
|
|
2965
|
+
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
2966
|
+
}, false, () => {
|
|
2967
|
+
this.makeMaximizedTopBoxFocus();
|
|
2968
|
+
});
|
|
2969
|
+
}
|
|
2970
|
+
}
|
|
2791
2971
|
} else {
|
|
2792
2972
|
maximized$.setValue(!maximized$.value);
|
|
2793
2973
|
}
|
|
2794
2974
|
break;
|
|
2795
2975
|
}
|
|
2796
2976
|
case exports.TELE_BOX_DELEGATE_EVENT.Minimize: {
|
|
2797
|
-
if (this.hasBoxesStatus()
|
|
2798
|
-
this.
|
|
2799
|
-
|
|
2800
|
-
|
|
2977
|
+
if (this.hasBoxesStatus()) {
|
|
2978
|
+
let targetBox = this.maxTitleBar.focusedBox;
|
|
2979
|
+
if (!targetBox) {
|
|
2980
|
+
targetBox = this.getMaximizedTopBox();
|
|
2981
|
+
}
|
|
2982
|
+
if (targetBox == null ? void 0 : targetBox.id) {
|
|
2983
|
+
const box = this.getBox(targetBox.id);
|
|
2984
|
+
if (box) {
|
|
2985
|
+
let isFocusChanged = false;
|
|
2986
|
+
if (this.topBox === box) {
|
|
2987
|
+
this.blurBox(box);
|
|
2988
|
+
isFocusChanged = true;
|
|
2989
|
+
}
|
|
2990
|
+
this.setBox(box, {
|
|
2991
|
+
status: exports.TELE_BOX_STATE.Minimized,
|
|
2992
|
+
zIndex: -1
|
|
2993
|
+
}, false);
|
|
2994
|
+
if (isFocusChanged) {
|
|
2995
|
+
this.focusTopBox();
|
|
2996
|
+
} else {
|
|
2997
|
+
this.makeMaximizedTopBoxFocus();
|
|
2998
|
+
}
|
|
2999
|
+
}
|
|
3000
|
+
}
|
|
2801
3001
|
} else {
|
|
2802
3002
|
minimized$.setValue(true);
|
|
2803
3003
|
}
|
|
2804
3004
|
break;
|
|
2805
3005
|
}
|
|
2806
3006
|
case exports.TELE_BOX_EVENT.Close: {
|
|
2807
|
-
if (this.hasBoxesStatus()
|
|
2808
|
-
this.
|
|
2809
|
-
|
|
3007
|
+
if (this.hasBoxesStatus()) {
|
|
3008
|
+
let targetBox = this.maxTitleBar.focusedBox;
|
|
3009
|
+
if (!targetBox) {
|
|
3010
|
+
targetBox = this.getMaximizedTopBox();
|
|
3011
|
+
}
|
|
3012
|
+
if (targetBox == null ? void 0 : targetBox.id) {
|
|
3013
|
+
const box = this.getBox(targetBox.id);
|
|
3014
|
+
if (box) {
|
|
3015
|
+
let isFocusChanged = false;
|
|
3016
|
+
if (this.topBox === box) {
|
|
3017
|
+
this.blurBox(box);
|
|
3018
|
+
isFocusChanged = true;
|
|
3019
|
+
}
|
|
3020
|
+
this.remove(box, false);
|
|
3021
|
+
if (isFocusChanged) {
|
|
3022
|
+
this.focusTopBox();
|
|
3023
|
+
} else {
|
|
3024
|
+
this.makeMaximizedTopBoxFocus();
|
|
3025
|
+
}
|
|
3026
|
+
}
|
|
3027
|
+
}
|
|
2810
3028
|
} else {
|
|
2811
3029
|
this.removeTopBox();
|
|
2812
3030
|
this.focusTopBox();
|
|
@@ -2836,6 +3054,9 @@ class TeleBoxManager {
|
|
|
2836
3054
|
i(this, valConfig);
|
|
2837
3055
|
this._state$ = state$;
|
|
2838
3056
|
this.root.appendChild(this.maxTitleBar.render());
|
|
3057
|
+
if (useBoxesStatus) {
|
|
3058
|
+
this.appMenu = this.createMinimizedAppMenu();
|
|
3059
|
+
}
|
|
2839
3060
|
}
|
|
2840
3061
|
get boxes() {
|
|
2841
3062
|
return this.boxes$.value;
|
|
@@ -2875,15 +3096,12 @@ class TeleBoxManager {
|
|
|
2875
3096
|
this.boxesStatus$.set(boxId, boxStatus);
|
|
2876
3097
|
if (boxStatus === exports.TELE_BOX_STATE.Minimized && oldBoxStatus !== exports.TELE_BOX_STATE.Minimized) {
|
|
2877
3098
|
this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
|
|
2878
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
2879
3099
|
} else if (oldBoxStatus === exports.TELE_BOX_STATE.Minimized && boxStatus !== exports.TELE_BOX_STATE.Minimized) {
|
|
2880
3100
|
this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
|
|
2881
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
2882
3101
|
}
|
|
2883
3102
|
} else {
|
|
2884
3103
|
this.boxesStatus$.delete(boxId);
|
|
2885
3104
|
this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
|
|
2886
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
2887
3105
|
}
|
|
2888
3106
|
if (!skipUpdate) {
|
|
2889
3107
|
this.events.emit(exports.TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
|
|
@@ -2892,60 +3110,159 @@ class TeleBoxManager {
|
|
|
2892
3110
|
getBoxStatus(boxId) {
|
|
2893
3111
|
return this.boxesStatus$.get(boxId);
|
|
2894
3112
|
}
|
|
2895
|
-
getLastNotMinimizedBoxStatus(boxId) {
|
|
2896
|
-
return this.lastNotMinimizedBoxesStatus$.get(boxId);
|
|
2897
|
-
}
|
|
2898
3113
|
get boxesStatus() {
|
|
2899
3114
|
return this.boxesStatus$;
|
|
2900
3115
|
}
|
|
2901
3116
|
get lastNotMinimizedBoxesStatus() {
|
|
2902
3117
|
return this.lastNotMinimizedBoxesStatus$;
|
|
2903
3118
|
}
|
|
2904
|
-
setBoxesStatus(boxesStatus, skipUpdate = false) {
|
|
3119
|
+
async setBoxesStatus(boxesStatus, skipUpdate = false) {
|
|
2905
3120
|
this.boxesStatus$ = boxesStatus;
|
|
2906
|
-
this.
|
|
3121
|
+
this.effectBoxesStatusChange(skipUpdate);
|
|
3122
|
+
}
|
|
3123
|
+
effectBoxStatusChange() {
|
|
3124
|
+
if (!this.useBoxesStatus) {
|
|
3125
|
+
return;
|
|
3126
|
+
}
|
|
3127
|
+
if (this.collector) {
|
|
3128
|
+
this.collector.updateBoxesStatus();
|
|
3129
|
+
if (this.hasMinimizedBox()) {
|
|
3130
|
+
this._setCollectorRect(this._calcCollectorRect());
|
|
3131
|
+
}
|
|
3132
|
+
}
|
|
3133
|
+
if (this.appMenu) {
|
|
3134
|
+
this.appMenu.appMenuChange();
|
|
3135
|
+
}
|
|
3136
|
+
if (this.maxTitleBar) {
|
|
3137
|
+
this.maxTitleBar.updateBoxesStatus();
|
|
3138
|
+
}
|
|
2907
3139
|
}
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
let
|
|
3140
|
+
effectBoxesStatusTimerFunc(skipUpdate) {
|
|
3141
|
+
if (!this.useBoxesStatus) {
|
|
3142
|
+
return;
|
|
3143
|
+
}
|
|
3144
|
+
let newTopBox;
|
|
3145
|
+
const curTopBox = this.topBox;
|
|
2913
3146
|
this.boxes.forEach((box) => {
|
|
2914
|
-
var
|
|
3147
|
+
var _a;
|
|
2915
3148
|
const boxStatus = this.boxesStatus$.get(box.id);
|
|
2916
3149
|
if (boxStatus) {
|
|
2917
|
-
if (boxStatus !== exports.TELE_BOX_STATE.Minimized && box.zIndex > ((
|
|
2918
|
-
|
|
3150
|
+
if (boxStatus !== exports.TELE_BOX_STATE.Minimized && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
|
|
3151
|
+
newTopBox = box;
|
|
2919
3152
|
}
|
|
2920
3153
|
box.setBoxStatus(boxStatus, skipUpdate);
|
|
2921
|
-
if (boxStatus === exports.TELE_BOX_STATE.Minimized) {
|
|
2922
|
-
hasMinimizedBox = true;
|
|
2923
|
-
}
|
|
2924
3154
|
}
|
|
2925
3155
|
});
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
3156
|
+
this.effectBoxStatusChange();
|
|
3157
|
+
if (newTopBox && curTopBox !== newTopBox) {
|
|
3158
|
+
this.topBox$.setValue(newTopBox);
|
|
3159
|
+
this.focusBox(newTopBox, skipUpdate);
|
|
3160
|
+
}
|
|
3161
|
+
if (!newTopBox && curTopBox) {
|
|
3162
|
+
this.topBox$.setValue(void 0);
|
|
3163
|
+
this.blurBox(curTopBox, skipUpdate);
|
|
3164
|
+
}
|
|
3165
|
+
}
|
|
3166
|
+
async effectBoxesStatusChange(skipUpdate = false) {
|
|
3167
|
+
var _a, _b, _c, _d, _e, _f;
|
|
3168
|
+
if (!this.useBoxesStatus) {
|
|
3169
|
+
if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
|
|
3170
|
+
clearTimeout(this.effectBoxesStatusTimer.timer);
|
|
3171
|
+
if (this.effectBoxesStatusTimer.resolve) {
|
|
3172
|
+
this.effectBoxesStatusTimer.resolve(!!((_a = this.effectBoxesStatusTimer) == null ? void 0 : _a.skipUpdate));
|
|
3173
|
+
}
|
|
2930
3174
|
}
|
|
2931
|
-
|
|
2932
|
-
|
|
3175
|
+
this.effectBoxesStatusTimer = void 0;
|
|
3176
|
+
return;
|
|
2933
3177
|
}
|
|
2934
|
-
if (
|
|
2935
|
-
this.
|
|
2936
|
-
|
|
2937
|
-
|
|
3178
|
+
if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
|
|
3179
|
+
if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
|
|
3180
|
+
clearTimeout(this.effectBoxesStatusTimer.timer);
|
|
3181
|
+
if (this.effectBoxesStatusTimer.resolve) {
|
|
3182
|
+
console.log("effectBoxStatusTimerFunc===>1111", skipUpdate);
|
|
3183
|
+
this.effectBoxesStatusTimer.resolve(!!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate));
|
|
3184
|
+
}
|
|
3185
|
+
this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
|
|
3186
|
+
console.log("effectBoxStatusTimerFunc===>2222", skipUpdate);
|
|
3187
|
+
} else {
|
|
3188
|
+
return;
|
|
3189
|
+
}
|
|
2938
3190
|
}
|
|
2939
|
-
if (this.
|
|
2940
|
-
this.
|
|
3191
|
+
if (!this.effectBoxesStatusTimer) {
|
|
3192
|
+
this.effectBoxesStatusTimer = {
|
|
3193
|
+
skipUpdate,
|
|
3194
|
+
timer: void 0,
|
|
3195
|
+
resolve: void 0
|
|
3196
|
+
};
|
|
3197
|
+
}
|
|
3198
|
+
if (this.effectBoxesStatusTimer) {
|
|
3199
|
+
const _skipUpdate = await new Promise((resolve) => {
|
|
3200
|
+
this.effectBoxesStatusTimer.resolve = resolve;
|
|
3201
|
+
this.effectBoxesStatusTimer.timer = setTimeout(() => {
|
|
3202
|
+
var _a2, _b2;
|
|
3203
|
+
if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
|
|
3204
|
+
console.log("effectBoxStatusTimerFunc===>000", skipUpdate, { id: (_a2 = this.topBox$.value) == null ? void 0 : _a2.id, zIndex: (_b2 = this.topBox$.value) == null ? void 0 : _b2.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
|
|
3205
|
+
this.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer.skipUpdate);
|
|
3206
|
+
}
|
|
3207
|
+
}, 100);
|
|
3208
|
+
});
|
|
3209
|
+
console.log("effectBoxStatusTimerFunc===>000==>00", skipUpdate, { id: (_c = this.topBox$.value) == null ? void 0 : _c.id, zIndex: (_d = this.topBox$.value) == null ? void 0 : _d.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
|
|
3210
|
+
this.effectBoxesStatusTimerFunc(_skipUpdate);
|
|
3211
|
+
this.effectBoxesStatusTimer = void 0;
|
|
3212
|
+
console.log("effectBoxStatusTimerFunc===>000==>11", skipUpdate, { id: (_e = this.topBox$.value) == null ? void 0 : _e.id, zIndex: (_f = this.topBox$.value) == null ? void 0 : _f.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
|
|
2941
3213
|
}
|
|
2942
3214
|
}
|
|
2943
3215
|
hasBoxesStatus() {
|
|
3216
|
+
if (!this.useBoxesStatus) {
|
|
3217
|
+
return false;
|
|
3218
|
+
}
|
|
2944
3219
|
return this.boxesStatus$.size > 0;
|
|
2945
3220
|
}
|
|
2946
3221
|
hasMinimizedBox() {
|
|
3222
|
+
if (!this.useBoxesStatus) {
|
|
3223
|
+
return false;
|
|
3224
|
+
}
|
|
2947
3225
|
return this.boxes.some((box) => box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized);
|
|
2948
3226
|
}
|
|
3227
|
+
getMinimizedBoxesStatus() {
|
|
3228
|
+
const minimizedBoxes = new Map();
|
|
3229
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3230
|
+
if (boxStatus === exports.TELE_BOX_STATE.Minimized) {
|
|
3231
|
+
minimizedBoxes.set(boxId, boxStatus);
|
|
3232
|
+
}
|
|
3233
|
+
});
|
|
3234
|
+
return minimizedBoxes;
|
|
3235
|
+
}
|
|
3236
|
+
getNotMinimizedBoxesStatus() {
|
|
3237
|
+
const notMinimizedBoxes = new Map();
|
|
3238
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3239
|
+
if (boxStatus !== exports.TELE_BOX_STATE.Minimized) {
|
|
3240
|
+
notMinimizedBoxes.set(boxId, boxStatus);
|
|
3241
|
+
}
|
|
3242
|
+
});
|
|
3243
|
+
return notMinimizedBoxes;
|
|
3244
|
+
}
|
|
3245
|
+
getAllMaximizedBoxesStatus() {
|
|
3246
|
+
const maximizedBoxes = new Map();
|
|
3247
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3248
|
+
if (boxStatus === exports.TELE_BOX_STATE.Maximized) {
|
|
3249
|
+
maximizedBoxes.set(boxId, boxStatus);
|
|
3250
|
+
}
|
|
3251
|
+
});
|
|
3252
|
+
return maximizedBoxes;
|
|
3253
|
+
}
|
|
3254
|
+
getAllNormalBoxesStatus() {
|
|
3255
|
+
const normalBoxes = new Map();
|
|
3256
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3257
|
+
if (boxStatus === exports.TELE_BOX_STATE.Normal) {
|
|
3258
|
+
normalBoxes.set(boxId, boxStatus);
|
|
3259
|
+
}
|
|
3260
|
+
});
|
|
3261
|
+
return normalBoxes;
|
|
3262
|
+
}
|
|
3263
|
+
getLastNotMinimizedBoxStatus(boxId) {
|
|
3264
|
+
return this.lastNotMinimizedBoxesStatus$.get(boxId);
|
|
3265
|
+
}
|
|
2949
3266
|
setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus, skipUpdate = false) {
|
|
2950
3267
|
if (lastNotMinimizedBoxStatus) {
|
|
2951
3268
|
this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
|
|
@@ -2960,18 +3277,96 @@ class TeleBoxManager {
|
|
|
2960
3277
|
this.lastNotMinimizedBoxesStatus$ = lastNotMinimizedBoxesStatus;
|
|
2961
3278
|
this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
|
|
2962
3279
|
}
|
|
2963
|
-
effectLastNotMinimizedBoxStatusChange(skipUpdate = false) {
|
|
3280
|
+
async effectLastNotMinimizedBoxStatusChange(skipUpdate = false) {
|
|
3281
|
+
var _a, _b;
|
|
3282
|
+
if (!this.useBoxesStatus) {
|
|
3283
|
+
if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
|
|
3284
|
+
clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
|
|
3285
|
+
if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
|
|
3286
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_a = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _a.skipUpdate));
|
|
3287
|
+
}
|
|
3288
|
+
}
|
|
3289
|
+
this.effectLastNotMinimizedBoxStatusTimer = void 0;
|
|
3290
|
+
return;
|
|
3291
|
+
}
|
|
3292
|
+
if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
|
|
3293
|
+
clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
|
|
3294
|
+
if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
|
|
3295
|
+
if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
|
|
3296
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>1111", skipUpdate);
|
|
3297
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate));
|
|
3298
|
+
}
|
|
3299
|
+
this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
|
|
3300
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>2222", skipUpdate);
|
|
3301
|
+
} else {
|
|
3302
|
+
return;
|
|
3303
|
+
}
|
|
3304
|
+
}
|
|
3305
|
+
if (!this.effectLastNotMinimizedBoxStatusTimer) {
|
|
3306
|
+
this.effectLastNotMinimizedBoxStatusTimer = {
|
|
3307
|
+
skipUpdate,
|
|
3308
|
+
timer: void 0,
|
|
3309
|
+
resolve: void 0
|
|
3310
|
+
};
|
|
3311
|
+
}
|
|
3312
|
+
if (this.effectLastNotMinimizedBoxStatusTimer) {
|
|
3313
|
+
const _skipUpdate = await new Promise((resolve) => {
|
|
3314
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve = resolve;
|
|
3315
|
+
this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(() => {
|
|
3316
|
+
if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
|
|
3317
|
+
console.log("effectLastNotMinimizedBoxStatusTimer===>000", skipUpdate);
|
|
3318
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate);
|
|
3319
|
+
}
|
|
3320
|
+
}, 100);
|
|
3321
|
+
});
|
|
3322
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>000==>00", skipUpdate, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex, lastNotMinimizedBoxStatus: b._lastNotMinimizedBoxStatus$.value })));
|
|
3323
|
+
this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate);
|
|
3324
|
+
this.effectLastNotMinimizedBoxStatusTimer = void 0;
|
|
3325
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>000==>11", skipUpdate, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex, lastNotMinimizedBoxStatus: b._lastNotMinimizedBoxStatus$.value })));
|
|
3326
|
+
}
|
|
3327
|
+
}
|
|
3328
|
+
effectLastNotMinimizedBoxStatusFunc(skipUpdate = false) {
|
|
3329
|
+
if (!this.useBoxesStatus) {
|
|
3330
|
+
return;
|
|
3331
|
+
}
|
|
3332
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>end", skipUpdate);
|
|
2964
3333
|
this.boxes.forEach((box) => {
|
|
2965
3334
|
const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
|
|
2966
|
-
|
|
3335
|
+
if (boxStatus) {
|
|
3336
|
+
box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
|
|
3337
|
+
}
|
|
2967
3338
|
});
|
|
2968
3339
|
}
|
|
2969
|
-
|
|
2970
|
-
return this.
|
|
3340
|
+
getUnabledBoxesStatusZIndex() {
|
|
3341
|
+
return this.topBox ? this.topBox.zIndex : 99;
|
|
3342
|
+
}
|
|
3343
|
+
getMaxMaximizedBoxZIndex() {
|
|
3344
|
+
if (!this.useBoxesStatus) {
|
|
3345
|
+
return this.getUnabledBoxesStatusZIndex();
|
|
3346
|
+
}
|
|
3347
|
+
return this.boxes.reduce((maxZIndex, box) => {
|
|
3348
|
+
if (box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Maximized) {
|
|
3349
|
+
return Math.max(maxZIndex, box.zIndex);
|
|
3350
|
+
}
|
|
3351
|
+
return maxZIndex;
|
|
3352
|
+
}, 99);
|
|
3353
|
+
}
|
|
3354
|
+
getMaxNormalBoxZIndex() {
|
|
3355
|
+
if (!this.useBoxesStatus) {
|
|
3356
|
+
return this.getUnabledBoxesStatusZIndex();
|
|
3357
|
+
}
|
|
3358
|
+
return this.boxes.reduce((maxZIndex, box) => {
|
|
3359
|
+
if (box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Normal) {
|
|
3360
|
+
return Math.max(maxZIndex, box.zIndex);
|
|
3361
|
+
}
|
|
3362
|
+
return maxZIndex;
|
|
3363
|
+
}, 299);
|
|
2971
3364
|
}
|
|
2972
3365
|
create(config = {}, smartPosition = true) {
|
|
3366
|
+
var _a;
|
|
3367
|
+
console.log("create===>", config, (_a = this.topBox) == null ? void 0 : _a.zIndex);
|
|
2973
3368
|
const box = new TeleBox(__spreadProps(__spreadValues({
|
|
2974
|
-
zIndex: this.
|
|
3369
|
+
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
2975
3370
|
}, smartPosition ? this.smartPosition(config) : config), {
|
|
2976
3371
|
darkMode: this.darkMode,
|
|
2977
3372
|
prefersColorScheme: this.prefersColorScheme,
|
|
@@ -2984,46 +3379,56 @@ class TeleBoxManager {
|
|
|
2984
3379
|
collectorRect: this.collectorRect
|
|
2985
3380
|
}));
|
|
2986
3381
|
box.mount(this.root);
|
|
3382
|
+
this.boxes$.setValue([...this.boxes, box]);
|
|
3383
|
+
if (box.boxStatus && this.useBoxesStatus) {
|
|
3384
|
+
this.setBox(box, {
|
|
3385
|
+
status: box.boxStatus,
|
|
3386
|
+
lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
|
|
3387
|
+
}, true);
|
|
3388
|
+
}
|
|
2987
3389
|
if (box.focus) {
|
|
2988
3390
|
this.focusBox(box);
|
|
2989
3391
|
if (smartPosition) {
|
|
2990
3392
|
this.makeBoxTop(box);
|
|
2991
3393
|
}
|
|
2992
3394
|
}
|
|
2993
|
-
this.boxes$.setValue([...this.boxes, box]);
|
|
2994
|
-
if (box.boxStatus) {
|
|
2995
|
-
this.setBoxStatus(box.id, box.boxStatus, true);
|
|
2996
|
-
this.effectBoxStatusChange(true);
|
|
2997
|
-
}
|
|
2998
|
-
if (box._lastNotMinimizedBoxStatus$.value) {
|
|
2999
|
-
this.setLastNotMinimizedBoxStatus(box.id, box._lastNotMinimizedBoxStatus$.value, true);
|
|
3000
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
3001
|
-
}
|
|
3002
3395
|
box._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Maximize, () => {
|
|
3003
|
-
if (box.boxStatus) {
|
|
3396
|
+
if (this.useBoxesStatus && box.boxStatus) {
|
|
3004
3397
|
if (box.boxStatus === exports.TELE_BOX_STATE.Maximized) {
|
|
3005
|
-
this.
|
|
3398
|
+
this.setBox(box.id, {
|
|
3399
|
+
status: exports.TELE_BOX_STATE.Normal,
|
|
3400
|
+
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
3401
|
+
}, false);
|
|
3006
3402
|
} else {
|
|
3007
|
-
this.boxes.forEach((box2) => {
|
|
3403
|
+
[...this.boxes].filter((box2) => box2.boxStatus === exports.TELE_BOX_STATE.Normal).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
|
|
3008
3404
|
if (box2.boxStatus === exports.TELE_BOX_STATE.Normal) {
|
|
3009
|
-
|
|
3405
|
+
console.log("maximized===>", box2.id);
|
|
3406
|
+
this.setBox(box2.id, {
|
|
3407
|
+
status: exports.TELE_BOX_STATE.Maximized,
|
|
3408
|
+
zIndex: this.getMaxMaximizedBoxZIndex() + 1
|
|
3409
|
+
}, false);
|
|
3010
3410
|
}
|
|
3011
3411
|
});
|
|
3412
|
+
this.makeMaximizedTopBoxFocus();
|
|
3012
3413
|
}
|
|
3013
|
-
this.effectBoxStatusChange();
|
|
3014
|
-
this.makeMaximizedTopBoxFocus();
|
|
3015
3414
|
} else {
|
|
3016
3415
|
this.setMaximized(!this.maximized);
|
|
3017
3416
|
}
|
|
3018
3417
|
});
|
|
3019
3418
|
box._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Minimize, () => {
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
this.
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3419
|
+
var _a2;
|
|
3420
|
+
if (box.boxStatus && this.useBoxesStatus) {
|
|
3421
|
+
if (this.topBox === box) {
|
|
3422
|
+
if ((_a2 = this.topBox) == null ? void 0 : _a2.focus) {
|
|
3423
|
+
this.blurBox(this.topBox);
|
|
3424
|
+
}
|
|
3026
3425
|
}
|
|
3426
|
+
this.setBox(box, {
|
|
3427
|
+
status: exports.TELE_BOX_STATE.Minimized,
|
|
3428
|
+
zIndex: -1
|
|
3429
|
+
}, false, () => {
|
|
3430
|
+
this.focusTopBox();
|
|
3431
|
+
});
|
|
3027
3432
|
} else {
|
|
3028
3433
|
this.setMinimized(true);
|
|
3029
3434
|
}
|
|
@@ -3059,12 +3464,19 @@ class TeleBoxManager {
|
|
|
3059
3464
|
});
|
|
3060
3465
|
box._zIndex$.reaction((_, __, skipUpdate) => {
|
|
3061
3466
|
if (this.boxes.length > 0) {
|
|
3467
|
+
console.log("topBox===>_zIndex", this.boxes.map((box2) => ({ id: box2.id, zIndex: box2.zIndex, boxStatus: box2.boxStatus })));
|
|
3468
|
+
let currentTopBox = void 0;
|
|
3062
3469
|
const topBox = this.boxes.reduce((topBox2, box2) => {
|
|
3063
3470
|
if (box2.boxStatus && box2.boxStatus === exports.TELE_BOX_STATE.Minimized) {
|
|
3064
3471
|
return topBox2;
|
|
3065
3472
|
}
|
|
3473
|
+
if (!topBox2) {
|
|
3474
|
+
topBox2 = box2;
|
|
3475
|
+
return topBox2;
|
|
3476
|
+
}
|
|
3066
3477
|
return topBox2.zIndex > box2.zIndex ? topBox2 : box2;
|
|
3067
|
-
});
|
|
3478
|
+
}, currentTopBox);
|
|
3479
|
+
console.log("topBox===>_zIndex===>end", topBox == null ? void 0 : topBox.id);
|
|
3068
3480
|
this.topBox$.setValue(topBox);
|
|
3069
3481
|
}
|
|
3070
3482
|
if (!skipUpdate) {
|
|
@@ -3091,7 +3503,26 @@ class TeleBoxManager {
|
|
|
3091
3503
|
this.updateBox(box, config, skipUpdate);
|
|
3092
3504
|
});
|
|
3093
3505
|
}
|
|
3094
|
-
|
|
3506
|
+
setBox(boxOrID, options, skipUpdate = false, effectFunc) {
|
|
3507
|
+
const box = this.getBox(boxOrID);
|
|
3508
|
+
if (box) {
|
|
3509
|
+
const { status, zIndex, lastNotMinimizedBoxStatus } = options;
|
|
3510
|
+
if (status) {
|
|
3511
|
+
this.setBoxStatus(box.id, status, skipUpdate);
|
|
3512
|
+
box.setBoxStatus(status, skipUpdate);
|
|
3513
|
+
this.effectBoxStatusChange();
|
|
3514
|
+
}
|
|
3515
|
+
if (zIndex) {
|
|
3516
|
+
box.setZIndex(zIndex, skipUpdate);
|
|
3517
|
+
}
|
|
3518
|
+
if (lastNotMinimizedBoxStatus) {
|
|
3519
|
+
this.setLastNotMinimizedBoxStatus(box.id, lastNotMinimizedBoxStatus, skipUpdate);
|
|
3520
|
+
box.setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate);
|
|
3521
|
+
}
|
|
3522
|
+
effectFunc && effectFunc();
|
|
3523
|
+
}
|
|
3524
|
+
}
|
|
3525
|
+
remove(boxOrID, skipUpdate = false, effectFunc) {
|
|
3095
3526
|
const box = this.getBox(boxOrID);
|
|
3096
3527
|
const index2 = this.getBoxIndex(boxOrID);
|
|
3097
3528
|
if (index2 >= 0) {
|
|
@@ -3099,13 +3530,11 @@ class TeleBoxManager {
|
|
|
3099
3530
|
const deletedBoxes = boxes.splice(index2, 1);
|
|
3100
3531
|
this.boxes$.setValue(boxes);
|
|
3101
3532
|
deletedBoxes.forEach((box2) => box2.destroy());
|
|
3102
|
-
if (box) {
|
|
3533
|
+
if (box && this.useBoxesStatus) {
|
|
3103
3534
|
this.setBoxStatus(box.id, void 0, skipUpdate);
|
|
3104
|
-
this.boxesStatus$.delete(box.id);
|
|
3105
|
-
this.effectBoxStatusChange(skipUpdate);
|
|
3106
3535
|
this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
|
|
3107
|
-
this.
|
|
3108
|
-
|
|
3536
|
+
this.effectBoxStatusChange();
|
|
3537
|
+
effectFunc && effectFunc();
|
|
3109
3538
|
}
|
|
3110
3539
|
if (!skipUpdate) {
|
|
3111
3540
|
if (this.boxes.length <= 0) {
|
|
@@ -3170,10 +3599,10 @@ class TeleBoxManager {
|
|
|
3170
3599
|
this.blurBox(box, skipUpdate);
|
|
3171
3600
|
}
|
|
3172
3601
|
});
|
|
3173
|
-
if (this.
|
|
3174
|
-
this.makeMaximizedBoxFocus(targetBox);
|
|
3175
|
-
} else {
|
|
3602
|
+
if (!this.useBoxesStatus) {
|
|
3176
3603
|
this.maxTitleBar.focusBox(targetBox);
|
|
3604
|
+
} else if (this.useBoxesStatus && this.maxTitleBar.hasMaximizedBoxInStatus()) {
|
|
3605
|
+
this.makeMaximizedTopBoxFocus();
|
|
3177
3606
|
}
|
|
3178
3607
|
}
|
|
3179
3608
|
}
|
|
@@ -3192,11 +3621,7 @@ class TeleBoxManager {
|
|
|
3192
3621
|
}
|
|
3193
3622
|
}
|
|
3194
3623
|
if (this.maxTitleBar.focusedBox === targetBox) {
|
|
3195
|
-
|
|
3196
|
-
this.makeMaximizedTopBoxFocus();
|
|
3197
|
-
} else {
|
|
3198
|
-
this.maxTitleBar.focusBox();
|
|
3199
|
-
}
|
|
3624
|
+
this.maxTitleBar.focusBox();
|
|
3200
3625
|
}
|
|
3201
3626
|
}
|
|
3202
3627
|
}
|
|
@@ -3210,11 +3635,7 @@ class TeleBoxManager {
|
|
|
3210
3635
|
}
|
|
3211
3636
|
});
|
|
3212
3637
|
if (this.maxTitleBar.focusedBox) {
|
|
3213
|
-
|
|
3214
|
-
this.makeMaximizedBoxBlur();
|
|
3215
|
-
} else {
|
|
3216
|
-
this.maxTitleBar.focusBox();
|
|
3217
|
-
}
|
|
3638
|
+
this.maxTitleBar.focusBox();
|
|
3218
3639
|
}
|
|
3219
3640
|
}
|
|
3220
3641
|
teleBoxMatcher(config) {
|
|
@@ -3259,13 +3680,11 @@ class TeleBoxManager {
|
|
|
3259
3680
|
if (config.footer != null) {
|
|
3260
3681
|
box.mountFooter(config.footer);
|
|
3261
3682
|
}
|
|
3262
|
-
if (config.boxStatus) {
|
|
3263
|
-
this.
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
this.setLastNotMinimizedBoxStatus(box.id, config.lastNotMinimizedBoxStatus, skipUpdate);
|
|
3268
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
3683
|
+
if (this.useBoxesStatus && (config.boxStatus || config.lastNotMinimizedBoxStatus)) {
|
|
3684
|
+
this.setBox(box, {
|
|
3685
|
+
status: config.boxStatus,
|
|
3686
|
+
lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
|
|
3687
|
+
}, skipUpdate);
|
|
3269
3688
|
}
|
|
3270
3689
|
}
|
|
3271
3690
|
smartPosition(config = {}) {
|
|
@@ -3278,6 +3697,10 @@ class TeleBoxManager {
|
|
|
3278
3697
|
if (vx > this.containerRect.width - width * this.containerRect.width) {
|
|
3279
3698
|
vx = 20;
|
|
3280
3699
|
}
|
|
3700
|
+
} else if (this.hasMinimizedBox()) {
|
|
3701
|
+
vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === exports.TELE_BOX_STATE.Normal).reduce((maxX, box) => {
|
|
3702
|
+
return Math.max(maxX, box.intrinsicX * this.containerRect.width + 20);
|
|
3703
|
+
}, vx);
|
|
3281
3704
|
}
|
|
3282
3705
|
x = vx / this.containerRect.width;
|
|
3283
3706
|
}
|
|
@@ -3288,22 +3711,27 @@ class TeleBoxManager {
|
|
|
3288
3711
|
if (vy > this.containerRect.height - height * this.containerRect.height) {
|
|
3289
3712
|
vy = 20;
|
|
3290
3713
|
}
|
|
3714
|
+
} else if (this.hasMinimizedBox()) {
|
|
3715
|
+
vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === exports.TELE_BOX_STATE.Normal).reduce((maxY, box) => {
|
|
3716
|
+
return Math.max(maxY, box.intrinsicY * this.containerRect.height + 20);
|
|
3717
|
+
}, vy);
|
|
3291
3718
|
}
|
|
3292
3719
|
y = vy / this.containerRect.height;
|
|
3293
3720
|
}
|
|
3294
3721
|
return __spreadProps(__spreadValues({}, config), { x, y, width, height });
|
|
3295
3722
|
}
|
|
3296
3723
|
makeBoxTop(box, skipUpdate = false) {
|
|
3297
|
-
if (this.topBox) {
|
|
3724
|
+
if (!this.useBoxesStatus && this.topBox) {
|
|
3298
3725
|
if (box !== this.topBox) {
|
|
3299
|
-
const currentBoxZIndex = box.zIndex;
|
|
3300
|
-
const addZIndex = this.topBox.zIndex + 1 - box.zIndex;
|
|
3301
3726
|
box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
|
|
3302
|
-
this.makeTopBoxEffect(box.id, addZIndex, currentBoxZIndex, skipUpdate);
|
|
3303
3727
|
}
|
|
3304
|
-
}
|
|
3728
|
+
} else if (this.useBoxesStatus)
|
|
3729
|
+
;
|
|
3305
3730
|
}
|
|
3306
|
-
|
|
3731
|
+
getMaximizedTopBox() {
|
|
3732
|
+
if (!this.useBoxesStatus) {
|
|
3733
|
+
return void 0;
|
|
3734
|
+
}
|
|
3307
3735
|
let maximizedBox;
|
|
3308
3736
|
if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
|
|
3309
3737
|
maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, currentBox) => {
|
|
@@ -3312,45 +3740,17 @@ class TeleBoxManager {
|
|
|
3312
3740
|
}
|
|
3313
3741
|
return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
|
|
3314
3742
|
});
|
|
3315
|
-
if (maximizedBox) {
|
|
3316
|
-
this.maxTitleBar.focusBox(maximizedBox);
|
|
3317
|
-
}
|
|
3318
3743
|
}
|
|
3744
|
+
return maximizedBox;
|
|
3319
3745
|
}
|
|
3320
|
-
|
|
3321
|
-
if (this.
|
|
3322
|
-
|
|
3323
|
-
if (b.boxStatus && b.id !== boxId && b.zIndex >= currentZIndex) {
|
|
3324
|
-
b.setZIndex(b.zIndex + addZIndex, skipUpdate);
|
|
3325
|
-
}
|
|
3326
|
-
});
|
|
3327
|
-
}
|
|
3328
|
-
}
|
|
3329
|
-
makeMaximizedBoxFocus(maximizedBox, skipUpdate = false) {
|
|
3330
|
-
if (this.maxTitleBar.hasMaximizedBoxInStatus() && this.maxTitleBar.MaximizedBoxes.find((box) => box.id === maximizedBox.id)) {
|
|
3331
|
-
const currentZIndex = maximizedBox.zIndex;
|
|
3332
|
-
const currentMaximizedTopBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, box) => {
|
|
3333
|
-
if (!topBox) {
|
|
3334
|
-
return box;
|
|
3335
|
-
}
|
|
3336
|
-
return topBox.zIndex > box.zIndex ? topBox : box;
|
|
3337
|
-
});
|
|
3338
|
-
if (currentMaximizedTopBox !== maximizedBox) {
|
|
3339
|
-
const addZIndex = currentMaximizedTopBox.zIndex - currentZIndex + 1;
|
|
3340
|
-
this.boxes.forEach((box) => {
|
|
3341
|
-
if (this.maxTitleBar.MaximizedBoxes.find((b) => b.id === box.id && b.id !== maximizedBox.id)) {
|
|
3342
|
-
return;
|
|
3343
|
-
}
|
|
3344
|
-
if (box.zIndex >= currentZIndex) {
|
|
3345
|
-
box.setZIndex(box.zIndex + addZIndex, skipUpdate);
|
|
3346
|
-
}
|
|
3347
|
-
});
|
|
3348
|
-
}
|
|
3349
|
-
this.maxTitleBar.focusBox(maximizedBox);
|
|
3746
|
+
makeMaximizedTopBoxFocus() {
|
|
3747
|
+
if (!this.useBoxesStatus) {
|
|
3748
|
+
return;
|
|
3350
3749
|
}
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
this.maxTitleBar.focusBox();
|
|
3750
|
+
const maximizedBox = this.getMaximizedTopBox();
|
|
3751
|
+
console.log("makeMaximizedTopBoxFocus===>", maximizedBox == null ? void 0 : maximizedBox.id);
|
|
3752
|
+
this.maxTitleBar.focusBox(maximizedBox);
|
|
3753
|
+
console.log("makeMaximizedTopBoxFocus===>end", maximizedBox == null ? void 0 : maximizedBox.id);
|
|
3354
3754
|
}
|
|
3355
3755
|
getBoxIndex(boxOrID) {
|
|
3356
3756
|
return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
|
|
@@ -3358,6 +3758,20 @@ class TeleBoxManager {
|
|
|
3358
3758
|
getBox(boxOrID) {
|
|
3359
3759
|
return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
|
|
3360
3760
|
}
|
|
3761
|
+
createMinimizedAppMenu() {
|
|
3762
|
+
var _a, _b;
|
|
3763
|
+
if ((_a = this.collector) == null ? void 0 : _a.$appMenuContainer) {
|
|
3764
|
+
return new AppMenu({
|
|
3765
|
+
manager: this,
|
|
3766
|
+
container: (_b = this.collector) == null ? void 0 : _b.$appMenuContainer,
|
|
3767
|
+
theme: this.prefersColorScheme ? "dark" : "light",
|
|
3768
|
+
getBoxesStatus: () => {
|
|
3769
|
+
return this.boxesStatus$;
|
|
3770
|
+
}
|
|
3771
|
+
});
|
|
3772
|
+
}
|
|
3773
|
+
return;
|
|
3774
|
+
}
|
|
3361
3775
|
}
|
|
3362
3776
|
exports.DefaultTitleBar = DefaultTitleBar;
|
|
3363
3777
|
exports.TeleBox = TeleBox;
|