@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
|
@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
|
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
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}";
|
|
21
|
-
var style$
|
|
21
|
+
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}';
|
|
22
22
|
var eventemitter3 = { exports: {} };
|
|
23
23
|
(function(module) {
|
|
24
24
|
var has = Object.prototype.hasOwnProperty, prefix = "~";
|
|
@@ -1196,7 +1196,7 @@ function c(e2) {
|
|
|
1196
1196
|
};
|
|
1197
1197
|
return { bindSideEffect: s2, combine: (e3, r2, i2, o2) => s2(t(e3, r2, i2, o2)), createVal: (e3, t2) => s2(new r(e3, t2)) };
|
|
1198
1198
|
}
|
|
1199
|
-
var style$
|
|
1199
|
+
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}';
|
|
1200
1200
|
var TELE_BOX_COLOR_SCHEME;
|
|
1201
1201
|
(function(TELE_BOX_COLOR_SCHEME2) {
|
|
1202
1202
|
TELE_BOX_COLOR_SCHEME2["Light"] = "light";
|
|
@@ -2276,7 +2276,7 @@ class TeleBox {
|
|
|
2276
2276
|
function noop() {
|
|
2277
2277
|
return;
|
|
2278
2278
|
}
|
|
2279
|
-
var style$
|
|
2279
|
+
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}";
|
|
2280
2280
|
var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
|
|
2281
2281
|
class TeleBoxCollector {
|
|
2282
2282
|
constructor({
|
|
@@ -2285,8 +2285,10 @@ class TeleBoxCollector {
|
|
|
2285
2285
|
darkMode = false,
|
|
2286
2286
|
namespace = "telebox",
|
|
2287
2287
|
styles = {},
|
|
2288
|
-
onClick
|
|
2289
|
-
|
|
2288
|
+
onClick,
|
|
2289
|
+
getBoxesStatus
|
|
2290
|
+
}) {
|
|
2291
|
+
this.$appMenuContainer = document.createElement("div");
|
|
2290
2292
|
this.handleCollectorClick = () => {
|
|
2291
2293
|
if (!this._readonly && this.onClick) {
|
|
2292
2294
|
this.onClick();
|
|
@@ -2298,6 +2300,11 @@ class TeleBoxCollector {
|
|
|
2298
2300
|
this.namespace = namespace;
|
|
2299
2301
|
this.styles = styles;
|
|
2300
2302
|
this.onClick = onClick;
|
|
2303
|
+
this.getBoxesStatus = getBoxesStatus;
|
|
2304
|
+
}
|
|
2305
|
+
get boxesStatus() {
|
|
2306
|
+
var _a;
|
|
2307
|
+
return (_a = this.getBoxesStatus) == null ? void 0 : _a.call(this);
|
|
2301
2308
|
}
|
|
2302
2309
|
get visible() {
|
|
2303
2310
|
return this._visible;
|
|
@@ -2318,6 +2325,21 @@ class TeleBoxCollector {
|
|
|
2318
2325
|
}
|
|
2319
2326
|
return this;
|
|
2320
2327
|
}
|
|
2328
|
+
hasMinimizedBox() {
|
|
2329
|
+
const boxesStatus = this.boxesStatus;
|
|
2330
|
+
if (boxesStatus) {
|
|
2331
|
+
for (const status of boxesStatus.values()) {
|
|
2332
|
+
if (status === TELE_BOX_STATE.Minimized) {
|
|
2333
|
+
return true;
|
|
2334
|
+
}
|
|
2335
|
+
}
|
|
2336
|
+
}
|
|
2337
|
+
return false;
|
|
2338
|
+
}
|
|
2339
|
+
updateBoxesStatus() {
|
|
2340
|
+
const hasMinimizedBox = this.hasMinimizedBox();
|
|
2341
|
+
this.setVisible(hasMinimizedBox);
|
|
2342
|
+
}
|
|
2321
2343
|
setVisible(visible) {
|
|
2322
2344
|
if (this._visible !== visible) {
|
|
2323
2345
|
this._visible = visible;
|
|
@@ -2372,6 +2394,8 @@ class TeleBoxCollector {
|
|
|
2372
2394
|
this.$collector.classList.add(this.wrapClassName("collector-readonly"));
|
|
2373
2395
|
}
|
|
2374
2396
|
this.$collector.classList.add(this.wrapClassName(this._darkMode ? "color-scheme-dark" : "color-scheme-light"));
|
|
2397
|
+
this.$appMenuContainer.classList.add(this.wrapClassName("collector-shadow"));
|
|
2398
|
+
this.$collector.append(this.$appMenuContainer);
|
|
2375
2399
|
this.setStyles(this.styles);
|
|
2376
2400
|
}
|
|
2377
2401
|
return this.$collector;
|
|
@@ -2408,7 +2432,7 @@ var TELE_BOX_MANAGER_EVENT;
|
|
|
2408
2432
|
TELE_BOX_MANAGER_EVENT2["BoxStatus"] = "box_status";
|
|
2409
2433
|
TELE_BOX_MANAGER_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
|
|
2410
2434
|
})(TELE_BOX_MANAGER_EVENT || (TELE_BOX_MANAGER_EVENT = {}));
|
|
2411
|
-
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:
|
|
2435
|
+
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}";
|
|
2412
2436
|
class MaxTitleBar extends DefaultTitleBar {
|
|
2413
2437
|
constructor(config) {
|
|
2414
2438
|
super(config);
|
|
@@ -2418,6 +2442,10 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2418
2442
|
this.darkMode = config.darkMode;
|
|
2419
2443
|
this.getBoxesStatus = config.getBoxesStatus;
|
|
2420
2444
|
}
|
|
2445
|
+
get boxesStatus() {
|
|
2446
|
+
var _a;
|
|
2447
|
+
return (_a = this.getBoxesStatus) == null ? void 0 : _a.call(this);
|
|
2448
|
+
}
|
|
2421
2449
|
hasMaximizedBoxInStatus() {
|
|
2422
2450
|
if (this.getBoxesStatus) {
|
|
2423
2451
|
const boxesStatus = this.getBoxesStatus();
|
|
@@ -2575,6 +2603,120 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2575
2603
|
return this.$titles;
|
|
2576
2604
|
}
|
|
2577
2605
|
}
|
|
2606
|
+
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}";
|
|
2607
|
+
class AppMenu {
|
|
2608
|
+
constructor(props) {
|
|
2609
|
+
this.namespace = "telebox-app-menu";
|
|
2610
|
+
this.badge = document.createElement("div");
|
|
2611
|
+
this.menuView = document.createElement("div");
|
|
2612
|
+
this.containerClickHandler = () => {
|
|
2613
|
+
if (this.manager.readonly) {
|
|
2614
|
+
return;
|
|
2615
|
+
}
|
|
2616
|
+
const isShowMenuView = getComputedStyle(this.menuView).display === "flex";
|
|
2617
|
+
if (isShowMenuView) {
|
|
2618
|
+
this.menuView.style.display = "none";
|
|
2619
|
+
} else {
|
|
2620
|
+
this.menuView.style.display = "flex";
|
|
2621
|
+
}
|
|
2622
|
+
};
|
|
2623
|
+
this.menuViewClickHandler = (e2) => {
|
|
2624
|
+
e2.stopPropagation();
|
|
2625
|
+
e2.stopImmediatePropagation();
|
|
2626
|
+
const target = e2.target;
|
|
2627
|
+
const id = target.getAttribute(`data-${this.c("app-id")}`);
|
|
2628
|
+
if (id) {
|
|
2629
|
+
const lastNotMinimizedBoxStatus = this.manager.getLastNotMinimizedBoxStatus(id) || TELE_BOX_STATE.Normal;
|
|
2630
|
+
const zIndex = (lastNotMinimizedBoxStatus === TELE_BOX_STATE.Maximized ? this.manager.getMaxMaximizedBoxZIndex() : this.manager.getMaxNormalBoxZIndex()) + 1;
|
|
2631
|
+
this.manager.setBox(id, {
|
|
2632
|
+
status: lastNotMinimizedBoxStatus,
|
|
2633
|
+
zIndex
|
|
2634
|
+
}, false, () => {
|
|
2635
|
+
this.manager.focusBox(id);
|
|
2636
|
+
});
|
|
2637
|
+
return;
|
|
2638
|
+
}
|
|
2639
|
+
};
|
|
2640
|
+
this.updatePrefersColorSchemeHandler = () => {
|
|
2641
|
+
this.container.classList.remove(this.theme);
|
|
2642
|
+
this.theme = this.manager.prefersColorScheme;
|
|
2643
|
+
this.container.classList.add(this.theme);
|
|
2644
|
+
};
|
|
2645
|
+
this.appMenuChange = () => {
|
|
2646
|
+
const minimizedBoxesStatus = this.manager.getMinimizedBoxesStatus();
|
|
2647
|
+
this.render(minimizedBoxesStatus);
|
|
2648
|
+
};
|
|
2649
|
+
this.container = props.container;
|
|
2650
|
+
this.manager = props.manager;
|
|
2651
|
+
this.theme = props.theme;
|
|
2652
|
+
this.getBoxesStatus = props.getBoxesStatus;
|
|
2653
|
+
this.init();
|
|
2654
|
+
}
|
|
2655
|
+
get boxesStatus() {
|
|
2656
|
+
var _a;
|
|
2657
|
+
return ((_a = this.getBoxesStatus) == null ? void 0 : _a.call(this)) || new Map();
|
|
2658
|
+
}
|
|
2659
|
+
get minimizedBoxesStatus() {
|
|
2660
|
+
const arr = [];
|
|
2661
|
+
this.boxesStatus.forEach((status) => {
|
|
2662
|
+
if (status === TELE_BOX_STATE.Minimized) {
|
|
2663
|
+
arr.push(status);
|
|
2664
|
+
}
|
|
2665
|
+
});
|
|
2666
|
+
return arr;
|
|
2667
|
+
}
|
|
2668
|
+
c(className) {
|
|
2669
|
+
return `${this.namespace}-${className}`;
|
|
2670
|
+
}
|
|
2671
|
+
createDefaultAppMenu() {
|
|
2672
|
+
this.badge.classList.add(this.c("app-menu-badge"));
|
|
2673
|
+
this.menuView.classList.add(this.c("app-menu-tooltip"));
|
|
2674
|
+
this.container.classList.add(this.c("app-menu-container"), this.theme);
|
|
2675
|
+
this.menuView.addEventListener("click", this.menuViewClickHandler);
|
|
2676
|
+
this.container.append(this.badge, this.menuView);
|
|
2677
|
+
}
|
|
2678
|
+
async init() {
|
|
2679
|
+
this.createDefaultAppMenu();
|
|
2680
|
+
this.appMenuChange();
|
|
2681
|
+
}
|
|
2682
|
+
createMinimizedItem(appId) {
|
|
2683
|
+
const appItem = document.createElement("div");
|
|
2684
|
+
appItem.classList.add(this.c("app-menu-item"));
|
|
2685
|
+
console.log("appId=====>", appId);
|
|
2686
|
+
appItem.setAttribute(`data-${this.c("app-id")}`, appId);
|
|
2687
|
+
const titleDiv = document.createElement("div");
|
|
2688
|
+
titleDiv.classList.add(this.c("app-menu-item-title"));
|
|
2689
|
+
const app = this.manager.getBox(appId);
|
|
2690
|
+
titleDiv.innerText = (app == null ? void 0 : app.title) || appId;
|
|
2691
|
+
appItem.appendChild(titleDiv);
|
|
2692
|
+
return appItem;
|
|
2693
|
+
}
|
|
2694
|
+
renderMenuView(minimizedBoxesStatus) {
|
|
2695
|
+
const items = [];
|
|
2696
|
+
minimizedBoxesStatus.forEach((_, appId) => {
|
|
2697
|
+
items.push(this.createMinimizedItem(appId));
|
|
2698
|
+
});
|
|
2699
|
+
this.menuView.append(...items);
|
|
2700
|
+
}
|
|
2701
|
+
render(minimizedBoxesStatus) {
|
|
2702
|
+
this.menuView.style.display = "none";
|
|
2703
|
+
this.badge.innerText = "";
|
|
2704
|
+
this.menuView.innerHTML = "";
|
|
2705
|
+
if (minimizedBoxesStatus.size === 0) {
|
|
2706
|
+
this.container.style.display = "none";
|
|
2707
|
+
} else {
|
|
2708
|
+
this.badge.innerText = minimizedBoxesStatus.size.toString();
|
|
2709
|
+
this.renderMenuView(minimizedBoxesStatus);
|
|
2710
|
+
this.container.style.display = "block";
|
|
2711
|
+
}
|
|
2712
|
+
}
|
|
2713
|
+
destroy() {
|
|
2714
|
+
this.badge.remove();
|
|
2715
|
+
this.menuView.removeEventListener("click", this.menuViewClickHandler);
|
|
2716
|
+
this.menuView.remove();
|
|
2717
|
+
this.container.remove();
|
|
2718
|
+
}
|
|
2719
|
+
}
|
|
2578
2720
|
class TeleBoxManager {
|
|
2579
2721
|
constructor({
|
|
2580
2722
|
root = document.body,
|
|
@@ -2590,22 +2732,31 @@ class TeleBoxManager {
|
|
|
2590
2732
|
},
|
|
2591
2733
|
collector,
|
|
2592
2734
|
namespace = "telebox",
|
|
2593
|
-
readonly = false
|
|
2735
|
+
readonly = false,
|
|
2736
|
+
useBoxesStatus = false
|
|
2594
2737
|
} = {}) {
|
|
2595
2738
|
this.events = new EventEmitter();
|
|
2596
2739
|
this._sideEffect = new o();
|
|
2740
|
+
this.useBoxesStatus = useBoxesStatus;
|
|
2597
2741
|
const { combine, createVal } = c(this._sideEffect);
|
|
2598
2742
|
this.root = root;
|
|
2599
2743
|
this.namespace = namespace;
|
|
2600
2744
|
this.boxes$ = createVal([]);
|
|
2601
2745
|
this.topBox$ = this.boxes$.derive((boxes) => {
|
|
2602
2746
|
if (boxes.length > 0) {
|
|
2747
|
+
console.log("topBox===>topBox$===>000");
|
|
2748
|
+
let currentTopBox = void 0;
|
|
2603
2749
|
const topBox = boxes.reduce((topBox2, box) => {
|
|
2604
2750
|
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
|
|
2605
2751
|
return topBox2;
|
|
2606
2752
|
}
|
|
2753
|
+
if (!topBox2) {
|
|
2754
|
+
topBox2 = box;
|
|
2755
|
+
return topBox2;
|
|
2756
|
+
}
|
|
2607
2757
|
return topBox2.zIndex > box.zIndex ? topBox2 : box;
|
|
2608
|
-
});
|
|
2758
|
+
}, currentTopBox);
|
|
2759
|
+
console.log("topBox===>topBox$===>end", topBox == null ? void 0 : topBox.id);
|
|
2609
2760
|
return topBox;
|
|
2610
2761
|
}
|
|
2611
2762
|
return;
|
|
@@ -2677,20 +2828,16 @@ class TeleBoxManager {
|
|
|
2677
2828
|
collector2.setReadonly(readonly$.value);
|
|
2678
2829
|
collector2.setDarkMode(this._darkMode$.value);
|
|
2679
2830
|
this._sideEffect.add(() => {
|
|
2831
|
+
collector2.getBoxesStatus = () => {
|
|
2832
|
+
return this.boxesStatus$;
|
|
2833
|
+
};
|
|
2680
2834
|
collector2.onClick = () => {
|
|
2681
2835
|
if (!readonly$.value) {
|
|
2682
|
-
if (this.
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
this.setBoxStatus(box.id, lastNotMinimizedBoxStatus);
|
|
2687
|
-
} else {
|
|
2688
|
-
this.setBoxStatus(box.id, TELE_BOX_STATE.Normal);
|
|
2689
|
-
}
|
|
2690
|
-
});
|
|
2691
|
-
this.effectBoxStatusChange();
|
|
2836
|
+
if (!this.useBoxesStatus) {
|
|
2837
|
+
minimized$.setValue(false);
|
|
2838
|
+
} else if (this.useBoxesStatus && this.appMenu) {
|
|
2839
|
+
this.appMenu.containerClickHandler();
|
|
2692
2840
|
}
|
|
2693
|
-
minimized$.setValue(false);
|
|
2694
2841
|
}
|
|
2695
2842
|
};
|
|
2696
2843
|
return () => collector2.destroy();
|
|
@@ -2719,6 +2866,12 @@ class TeleBoxManager {
|
|
|
2719
2866
|
}
|
|
2720
2867
|
return;
|
|
2721
2868
|
};
|
|
2869
|
+
this._setCollectorRect = (collectorRect) => {
|
|
2870
|
+
var _a;
|
|
2871
|
+
if ((_a = collector$.value) == null ? void 0 : _a.$collector) {
|
|
2872
|
+
collectorRect$.setValue(collectorRect);
|
|
2873
|
+
}
|
|
2874
|
+
};
|
|
2722
2875
|
const collectorRect$ = createVal(minimized$.value ? this._calcCollectorRect() : void 0);
|
|
2723
2876
|
collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
|
|
2724
2877
|
this.boxes.forEach((box) => {
|
|
@@ -2726,12 +2879,10 @@ class TeleBoxManager {
|
|
|
2726
2879
|
});
|
|
2727
2880
|
});
|
|
2728
2881
|
minimized$.subscribe((minimized2, _, skipUpdate) => {
|
|
2729
|
-
var _a
|
|
2882
|
+
var _a;
|
|
2730
2883
|
(_a = collector$.value) == null ? void 0 : _a.setVisible(minimized2);
|
|
2731
2884
|
if (minimized2) {
|
|
2732
|
-
|
|
2733
|
-
collectorRect$.setValue(this._calcCollectorRect());
|
|
2734
|
-
}
|
|
2885
|
+
this._setCollectorRect(this._calcCollectorRect());
|
|
2735
2886
|
}
|
|
2736
2887
|
this.boxes.forEach((box) => box.setMinimized(minimized2, skipUpdate));
|
|
2737
2888
|
if (!skipUpdate) {
|
|
@@ -2756,10 +2907,28 @@ class TeleBoxManager {
|
|
|
2756
2907
|
if (id) {
|
|
2757
2908
|
const box = this.getBox(id);
|
|
2758
2909
|
if (box) {
|
|
2759
|
-
this.
|
|
2760
|
-
if (box.boxStatus && box.boxStatus !== TELE_BOX_STATE.Maximized || !box.boxStatus) {
|
|
2910
|
+
if (!this.useBoxesStatus) {
|
|
2761
2911
|
this.makeBoxTop(box);
|
|
2912
|
+
} else {
|
|
2913
|
+
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
|
|
2914
|
+
const maxNormalBoxZIndex = this.getMaxNormalBoxZIndex();
|
|
2915
|
+
if (maxNormalBoxZIndex > box.zIndex) {
|
|
2916
|
+
this.setBox(box, {
|
|
2917
|
+
zIndex: maxNormalBoxZIndex + 1
|
|
2918
|
+
}, false);
|
|
2919
|
+
}
|
|
2920
|
+
} else if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
|
|
2921
|
+
const maxMaximizedBoxZIndex = this.getMaxMaximizedBoxZIndex();
|
|
2922
|
+
if (maxMaximizedBoxZIndex > box.zIndex) {
|
|
2923
|
+
this.setBox(box, {
|
|
2924
|
+
zIndex: maxMaximizedBoxZIndex + 1
|
|
2925
|
+
}, false);
|
|
2926
|
+
}
|
|
2927
|
+
this.makeMaximizedTopBoxFocus();
|
|
2928
|
+
}
|
|
2762
2929
|
}
|
|
2930
|
+
console.log("checkFocusBox===>", box.id);
|
|
2931
|
+
this.focusBox(box);
|
|
2763
2932
|
return;
|
|
2764
2933
|
}
|
|
2765
2934
|
}
|
|
@@ -2778,32 +2947,81 @@ class TeleBoxManager {
|
|
|
2778
2947
|
return this.boxesStatus$;
|
|
2779
2948
|
},
|
|
2780
2949
|
onEvent: (event) => {
|
|
2781
|
-
var _a, _b, _c;
|
|
2782
2950
|
switch (event.type) {
|
|
2783
2951
|
case TELE_BOX_DELEGATE_EVENT.Maximize: {
|
|
2784
|
-
if (this.hasBoxesStatus()
|
|
2785
|
-
this.
|
|
2786
|
-
|
|
2787
|
-
|
|
2952
|
+
if (this.hasBoxesStatus()) {
|
|
2953
|
+
let targetBox = this.maxTitleBar.focusedBox;
|
|
2954
|
+
if (!targetBox) {
|
|
2955
|
+
targetBox = this.getMaximizedTopBox();
|
|
2956
|
+
}
|
|
2957
|
+
if (targetBox == null ? void 0 : targetBox.id) {
|
|
2958
|
+
const box = this.getBox(targetBox.id);
|
|
2959
|
+
if (box) {
|
|
2960
|
+
this.setBox(box, {
|
|
2961
|
+
status: TELE_BOX_STATE.Normal,
|
|
2962
|
+
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
2963
|
+
}, false, () => {
|
|
2964
|
+
this.makeMaximizedTopBoxFocus();
|
|
2965
|
+
});
|
|
2966
|
+
}
|
|
2967
|
+
}
|
|
2788
2968
|
} else {
|
|
2789
2969
|
maximized$.setValue(!maximized$.value);
|
|
2790
2970
|
}
|
|
2791
2971
|
break;
|
|
2792
2972
|
}
|
|
2793
2973
|
case TELE_BOX_DELEGATE_EVENT.Minimize: {
|
|
2794
|
-
if (this.hasBoxesStatus()
|
|
2795
|
-
this.
|
|
2796
|
-
|
|
2797
|
-
|
|
2974
|
+
if (this.hasBoxesStatus()) {
|
|
2975
|
+
let targetBox = this.maxTitleBar.focusedBox;
|
|
2976
|
+
if (!targetBox) {
|
|
2977
|
+
targetBox = this.getMaximizedTopBox();
|
|
2978
|
+
}
|
|
2979
|
+
if (targetBox == null ? void 0 : targetBox.id) {
|
|
2980
|
+
const box = this.getBox(targetBox.id);
|
|
2981
|
+
if (box) {
|
|
2982
|
+
let isFocusChanged = false;
|
|
2983
|
+
if (this.topBox === box) {
|
|
2984
|
+
this.blurBox(box);
|
|
2985
|
+
isFocusChanged = true;
|
|
2986
|
+
}
|
|
2987
|
+
this.setBox(box, {
|
|
2988
|
+
status: TELE_BOX_STATE.Minimized,
|
|
2989
|
+
zIndex: -1
|
|
2990
|
+
}, false);
|
|
2991
|
+
if (isFocusChanged) {
|
|
2992
|
+
this.focusTopBox();
|
|
2993
|
+
} else {
|
|
2994
|
+
this.makeMaximizedTopBoxFocus();
|
|
2995
|
+
}
|
|
2996
|
+
}
|
|
2997
|
+
}
|
|
2798
2998
|
} else {
|
|
2799
2999
|
minimized$.setValue(true);
|
|
2800
3000
|
}
|
|
2801
3001
|
break;
|
|
2802
3002
|
}
|
|
2803
3003
|
case TELE_BOX_EVENT.Close: {
|
|
2804
|
-
if (this.hasBoxesStatus()
|
|
2805
|
-
this.
|
|
2806
|
-
|
|
3004
|
+
if (this.hasBoxesStatus()) {
|
|
3005
|
+
let targetBox = this.maxTitleBar.focusedBox;
|
|
3006
|
+
if (!targetBox) {
|
|
3007
|
+
targetBox = this.getMaximizedTopBox();
|
|
3008
|
+
}
|
|
3009
|
+
if (targetBox == null ? void 0 : targetBox.id) {
|
|
3010
|
+
const box = this.getBox(targetBox.id);
|
|
3011
|
+
if (box) {
|
|
3012
|
+
let isFocusChanged = false;
|
|
3013
|
+
if (this.topBox === box) {
|
|
3014
|
+
this.blurBox(box);
|
|
3015
|
+
isFocusChanged = true;
|
|
3016
|
+
}
|
|
3017
|
+
this.remove(box, false);
|
|
3018
|
+
if (isFocusChanged) {
|
|
3019
|
+
this.focusTopBox();
|
|
3020
|
+
} else {
|
|
3021
|
+
this.makeMaximizedTopBoxFocus();
|
|
3022
|
+
}
|
|
3023
|
+
}
|
|
3024
|
+
}
|
|
2807
3025
|
} else {
|
|
2808
3026
|
this.removeTopBox();
|
|
2809
3027
|
this.focusTopBox();
|
|
@@ -2833,6 +3051,9 @@ class TeleBoxManager {
|
|
|
2833
3051
|
i(this, valConfig);
|
|
2834
3052
|
this._state$ = state$;
|
|
2835
3053
|
this.root.appendChild(this.maxTitleBar.render());
|
|
3054
|
+
if (useBoxesStatus) {
|
|
3055
|
+
this.appMenu = this.createMinimizedAppMenu();
|
|
3056
|
+
}
|
|
2836
3057
|
}
|
|
2837
3058
|
get boxes() {
|
|
2838
3059
|
return this.boxes$.value;
|
|
@@ -2872,15 +3093,12 @@ class TeleBoxManager {
|
|
|
2872
3093
|
this.boxesStatus$.set(boxId, boxStatus);
|
|
2873
3094
|
if (boxStatus === TELE_BOX_STATE.Minimized && oldBoxStatus !== TELE_BOX_STATE.Minimized) {
|
|
2874
3095
|
this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
|
|
2875
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
2876
3096
|
} else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
|
|
2877
3097
|
this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
|
|
2878
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
2879
3098
|
}
|
|
2880
3099
|
} else {
|
|
2881
3100
|
this.boxesStatus$.delete(boxId);
|
|
2882
3101
|
this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
|
|
2883
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
2884
3102
|
}
|
|
2885
3103
|
if (!skipUpdate) {
|
|
2886
3104
|
this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
|
|
@@ -2889,60 +3107,159 @@ class TeleBoxManager {
|
|
|
2889
3107
|
getBoxStatus(boxId) {
|
|
2890
3108
|
return this.boxesStatus$.get(boxId);
|
|
2891
3109
|
}
|
|
2892
|
-
getLastNotMinimizedBoxStatus(boxId) {
|
|
2893
|
-
return this.lastNotMinimizedBoxesStatus$.get(boxId);
|
|
2894
|
-
}
|
|
2895
3110
|
get boxesStatus() {
|
|
2896
3111
|
return this.boxesStatus$;
|
|
2897
3112
|
}
|
|
2898
3113
|
get lastNotMinimizedBoxesStatus() {
|
|
2899
3114
|
return this.lastNotMinimizedBoxesStatus$;
|
|
2900
3115
|
}
|
|
2901
|
-
setBoxesStatus(boxesStatus, skipUpdate = false) {
|
|
3116
|
+
async setBoxesStatus(boxesStatus, skipUpdate = false) {
|
|
2902
3117
|
this.boxesStatus$ = boxesStatus;
|
|
2903
|
-
this.
|
|
3118
|
+
this.effectBoxesStatusChange(skipUpdate);
|
|
3119
|
+
}
|
|
3120
|
+
effectBoxStatusChange() {
|
|
3121
|
+
if (!this.useBoxesStatus) {
|
|
3122
|
+
return;
|
|
3123
|
+
}
|
|
3124
|
+
if (this.collector) {
|
|
3125
|
+
this.collector.updateBoxesStatus();
|
|
3126
|
+
if (this.hasMinimizedBox()) {
|
|
3127
|
+
this._setCollectorRect(this._calcCollectorRect());
|
|
3128
|
+
}
|
|
3129
|
+
}
|
|
3130
|
+
if (this.appMenu) {
|
|
3131
|
+
this.appMenu.appMenuChange();
|
|
3132
|
+
}
|
|
3133
|
+
if (this.maxTitleBar) {
|
|
3134
|
+
this.maxTitleBar.updateBoxesStatus();
|
|
3135
|
+
}
|
|
2904
3136
|
}
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
let
|
|
3137
|
+
effectBoxesStatusTimerFunc(skipUpdate) {
|
|
3138
|
+
if (!this.useBoxesStatus) {
|
|
3139
|
+
return;
|
|
3140
|
+
}
|
|
3141
|
+
let newTopBox;
|
|
3142
|
+
const curTopBox = this.topBox;
|
|
2910
3143
|
this.boxes.forEach((box) => {
|
|
2911
|
-
var
|
|
3144
|
+
var _a;
|
|
2912
3145
|
const boxStatus = this.boxesStatus$.get(box.id);
|
|
2913
3146
|
if (boxStatus) {
|
|
2914
|
-
if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > ((
|
|
2915
|
-
|
|
3147
|
+
if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
|
|
3148
|
+
newTopBox = box;
|
|
2916
3149
|
}
|
|
2917
3150
|
box.setBoxStatus(boxStatus, skipUpdate);
|
|
2918
|
-
if (boxStatus === TELE_BOX_STATE.Minimized) {
|
|
2919
|
-
hasMinimizedBox = true;
|
|
2920
|
-
}
|
|
2921
3151
|
}
|
|
2922
3152
|
});
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
3153
|
+
this.effectBoxStatusChange();
|
|
3154
|
+
if (newTopBox && curTopBox !== newTopBox) {
|
|
3155
|
+
this.topBox$.setValue(newTopBox);
|
|
3156
|
+
this.focusBox(newTopBox, skipUpdate);
|
|
3157
|
+
}
|
|
3158
|
+
if (!newTopBox && curTopBox) {
|
|
3159
|
+
this.topBox$.setValue(void 0);
|
|
3160
|
+
this.blurBox(curTopBox, skipUpdate);
|
|
3161
|
+
}
|
|
3162
|
+
}
|
|
3163
|
+
async effectBoxesStatusChange(skipUpdate = false) {
|
|
3164
|
+
var _a, _b, _c, _d, _e, _f;
|
|
3165
|
+
if (!this.useBoxesStatus) {
|
|
3166
|
+
if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
|
|
3167
|
+
clearTimeout(this.effectBoxesStatusTimer.timer);
|
|
3168
|
+
if (this.effectBoxesStatusTimer.resolve) {
|
|
3169
|
+
this.effectBoxesStatusTimer.resolve(!!((_a = this.effectBoxesStatusTimer) == null ? void 0 : _a.skipUpdate));
|
|
3170
|
+
}
|
|
2927
3171
|
}
|
|
2928
|
-
|
|
2929
|
-
|
|
3172
|
+
this.effectBoxesStatusTimer = void 0;
|
|
3173
|
+
return;
|
|
2930
3174
|
}
|
|
2931
|
-
if (
|
|
2932
|
-
this.
|
|
2933
|
-
|
|
2934
|
-
|
|
3175
|
+
if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
|
|
3176
|
+
if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
|
|
3177
|
+
clearTimeout(this.effectBoxesStatusTimer.timer);
|
|
3178
|
+
if (this.effectBoxesStatusTimer.resolve) {
|
|
3179
|
+
console.log("effectBoxStatusTimerFunc===>1111", skipUpdate);
|
|
3180
|
+
this.effectBoxesStatusTimer.resolve(!!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate));
|
|
3181
|
+
}
|
|
3182
|
+
this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
|
|
3183
|
+
console.log("effectBoxStatusTimerFunc===>2222", skipUpdate);
|
|
3184
|
+
} else {
|
|
3185
|
+
return;
|
|
3186
|
+
}
|
|
2935
3187
|
}
|
|
2936
|
-
if (this.
|
|
2937
|
-
this.
|
|
3188
|
+
if (!this.effectBoxesStatusTimer) {
|
|
3189
|
+
this.effectBoxesStatusTimer = {
|
|
3190
|
+
skipUpdate,
|
|
3191
|
+
timer: void 0,
|
|
3192
|
+
resolve: void 0
|
|
3193
|
+
};
|
|
3194
|
+
}
|
|
3195
|
+
if (this.effectBoxesStatusTimer) {
|
|
3196
|
+
const _skipUpdate = await new Promise((resolve) => {
|
|
3197
|
+
this.effectBoxesStatusTimer.resolve = resolve;
|
|
3198
|
+
this.effectBoxesStatusTimer.timer = setTimeout(() => {
|
|
3199
|
+
var _a2, _b2;
|
|
3200
|
+
if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
|
|
3201
|
+
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 })));
|
|
3202
|
+
this.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer.skipUpdate);
|
|
3203
|
+
}
|
|
3204
|
+
}, 100);
|
|
3205
|
+
});
|
|
3206
|
+
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 })));
|
|
3207
|
+
this.effectBoxesStatusTimerFunc(_skipUpdate);
|
|
3208
|
+
this.effectBoxesStatusTimer = void 0;
|
|
3209
|
+
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 })));
|
|
2938
3210
|
}
|
|
2939
3211
|
}
|
|
2940
3212
|
hasBoxesStatus() {
|
|
3213
|
+
if (!this.useBoxesStatus) {
|
|
3214
|
+
return false;
|
|
3215
|
+
}
|
|
2941
3216
|
return this.boxesStatus$.size > 0;
|
|
2942
3217
|
}
|
|
2943
3218
|
hasMinimizedBox() {
|
|
3219
|
+
if (!this.useBoxesStatus) {
|
|
3220
|
+
return false;
|
|
3221
|
+
}
|
|
2944
3222
|
return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
|
|
2945
3223
|
}
|
|
3224
|
+
getMinimizedBoxesStatus() {
|
|
3225
|
+
const minimizedBoxes = new Map();
|
|
3226
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3227
|
+
if (boxStatus === TELE_BOX_STATE.Minimized) {
|
|
3228
|
+
minimizedBoxes.set(boxId, boxStatus);
|
|
3229
|
+
}
|
|
3230
|
+
});
|
|
3231
|
+
return minimizedBoxes;
|
|
3232
|
+
}
|
|
3233
|
+
getNotMinimizedBoxesStatus() {
|
|
3234
|
+
const notMinimizedBoxes = new Map();
|
|
3235
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3236
|
+
if (boxStatus !== TELE_BOX_STATE.Minimized) {
|
|
3237
|
+
notMinimizedBoxes.set(boxId, boxStatus);
|
|
3238
|
+
}
|
|
3239
|
+
});
|
|
3240
|
+
return notMinimizedBoxes;
|
|
3241
|
+
}
|
|
3242
|
+
getAllMaximizedBoxesStatus() {
|
|
3243
|
+
const maximizedBoxes = new Map();
|
|
3244
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3245
|
+
if (boxStatus === TELE_BOX_STATE.Maximized) {
|
|
3246
|
+
maximizedBoxes.set(boxId, boxStatus);
|
|
3247
|
+
}
|
|
3248
|
+
});
|
|
3249
|
+
return maximizedBoxes;
|
|
3250
|
+
}
|
|
3251
|
+
getAllNormalBoxesStatus() {
|
|
3252
|
+
const normalBoxes = new Map();
|
|
3253
|
+
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3254
|
+
if (boxStatus === TELE_BOX_STATE.Normal) {
|
|
3255
|
+
normalBoxes.set(boxId, boxStatus);
|
|
3256
|
+
}
|
|
3257
|
+
});
|
|
3258
|
+
return normalBoxes;
|
|
3259
|
+
}
|
|
3260
|
+
getLastNotMinimizedBoxStatus(boxId) {
|
|
3261
|
+
return this.lastNotMinimizedBoxesStatus$.get(boxId);
|
|
3262
|
+
}
|
|
2946
3263
|
setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus, skipUpdate = false) {
|
|
2947
3264
|
if (lastNotMinimizedBoxStatus) {
|
|
2948
3265
|
this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
|
|
@@ -2957,18 +3274,96 @@ class TeleBoxManager {
|
|
|
2957
3274
|
this.lastNotMinimizedBoxesStatus$ = lastNotMinimizedBoxesStatus;
|
|
2958
3275
|
this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
|
|
2959
3276
|
}
|
|
2960
|
-
effectLastNotMinimizedBoxStatusChange(skipUpdate = false) {
|
|
3277
|
+
async effectLastNotMinimizedBoxStatusChange(skipUpdate = false) {
|
|
3278
|
+
var _a, _b;
|
|
3279
|
+
if (!this.useBoxesStatus) {
|
|
3280
|
+
if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
|
|
3281
|
+
clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
|
|
3282
|
+
if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
|
|
3283
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_a = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _a.skipUpdate));
|
|
3284
|
+
}
|
|
3285
|
+
}
|
|
3286
|
+
this.effectLastNotMinimizedBoxStatusTimer = void 0;
|
|
3287
|
+
return;
|
|
3288
|
+
}
|
|
3289
|
+
if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
|
|
3290
|
+
clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
|
|
3291
|
+
if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
|
|
3292
|
+
if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
|
|
3293
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>1111", skipUpdate);
|
|
3294
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate));
|
|
3295
|
+
}
|
|
3296
|
+
this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
|
|
3297
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>2222", skipUpdate);
|
|
3298
|
+
} else {
|
|
3299
|
+
return;
|
|
3300
|
+
}
|
|
3301
|
+
}
|
|
3302
|
+
if (!this.effectLastNotMinimizedBoxStatusTimer) {
|
|
3303
|
+
this.effectLastNotMinimizedBoxStatusTimer = {
|
|
3304
|
+
skipUpdate,
|
|
3305
|
+
timer: void 0,
|
|
3306
|
+
resolve: void 0
|
|
3307
|
+
};
|
|
3308
|
+
}
|
|
3309
|
+
if (this.effectLastNotMinimizedBoxStatusTimer) {
|
|
3310
|
+
const _skipUpdate = await new Promise((resolve) => {
|
|
3311
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve = resolve;
|
|
3312
|
+
this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(() => {
|
|
3313
|
+
if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
|
|
3314
|
+
console.log("effectLastNotMinimizedBoxStatusTimer===>000", skipUpdate);
|
|
3315
|
+
this.effectLastNotMinimizedBoxStatusTimer.resolve(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate);
|
|
3316
|
+
}
|
|
3317
|
+
}, 100);
|
|
3318
|
+
});
|
|
3319
|
+
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 })));
|
|
3320
|
+
this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate);
|
|
3321
|
+
this.effectLastNotMinimizedBoxStatusTimer = void 0;
|
|
3322
|
+
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 })));
|
|
3323
|
+
}
|
|
3324
|
+
}
|
|
3325
|
+
effectLastNotMinimizedBoxStatusFunc(skipUpdate = false) {
|
|
3326
|
+
if (!this.useBoxesStatus) {
|
|
3327
|
+
return;
|
|
3328
|
+
}
|
|
3329
|
+
console.log("effectLastNotMinimizedBoxStatusFunc===>end", skipUpdate);
|
|
2961
3330
|
this.boxes.forEach((box) => {
|
|
2962
3331
|
const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
|
|
2963
|
-
|
|
3332
|
+
if (boxStatus) {
|
|
3333
|
+
box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
|
|
3334
|
+
}
|
|
2964
3335
|
});
|
|
2965
3336
|
}
|
|
2966
|
-
|
|
2967
|
-
return this.
|
|
3337
|
+
getUnabledBoxesStatusZIndex() {
|
|
3338
|
+
return this.topBox ? this.topBox.zIndex : 99;
|
|
3339
|
+
}
|
|
3340
|
+
getMaxMaximizedBoxZIndex() {
|
|
3341
|
+
if (!this.useBoxesStatus) {
|
|
3342
|
+
return this.getUnabledBoxesStatusZIndex();
|
|
3343
|
+
}
|
|
3344
|
+
return this.boxes.reduce((maxZIndex, box) => {
|
|
3345
|
+
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
|
|
3346
|
+
return Math.max(maxZIndex, box.zIndex);
|
|
3347
|
+
}
|
|
3348
|
+
return maxZIndex;
|
|
3349
|
+
}, 99);
|
|
3350
|
+
}
|
|
3351
|
+
getMaxNormalBoxZIndex() {
|
|
3352
|
+
if (!this.useBoxesStatus) {
|
|
3353
|
+
return this.getUnabledBoxesStatusZIndex();
|
|
3354
|
+
}
|
|
3355
|
+
return this.boxes.reduce((maxZIndex, box) => {
|
|
3356
|
+
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
|
|
3357
|
+
return Math.max(maxZIndex, box.zIndex);
|
|
3358
|
+
}
|
|
3359
|
+
return maxZIndex;
|
|
3360
|
+
}, 299);
|
|
2968
3361
|
}
|
|
2969
3362
|
create(config = {}, smartPosition = true) {
|
|
3363
|
+
var _a;
|
|
3364
|
+
console.log("create===>", config, (_a = this.topBox) == null ? void 0 : _a.zIndex);
|
|
2970
3365
|
const box = new TeleBox(__spreadProps(__spreadValues({
|
|
2971
|
-
zIndex: this.
|
|
3366
|
+
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
2972
3367
|
}, smartPosition ? this.smartPosition(config) : config), {
|
|
2973
3368
|
darkMode: this.darkMode,
|
|
2974
3369
|
prefersColorScheme: this.prefersColorScheme,
|
|
@@ -2981,46 +3376,56 @@ class TeleBoxManager {
|
|
|
2981
3376
|
collectorRect: this.collectorRect
|
|
2982
3377
|
}));
|
|
2983
3378
|
box.mount(this.root);
|
|
3379
|
+
this.boxes$.setValue([...this.boxes, box]);
|
|
3380
|
+
if (box.boxStatus && this.useBoxesStatus) {
|
|
3381
|
+
this.setBox(box, {
|
|
3382
|
+
status: box.boxStatus,
|
|
3383
|
+
lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
|
|
3384
|
+
}, true);
|
|
3385
|
+
}
|
|
2984
3386
|
if (box.focus) {
|
|
2985
3387
|
this.focusBox(box);
|
|
2986
3388
|
if (smartPosition) {
|
|
2987
3389
|
this.makeBoxTop(box);
|
|
2988
3390
|
}
|
|
2989
3391
|
}
|
|
2990
|
-
this.boxes$.setValue([...this.boxes, box]);
|
|
2991
|
-
if (box.boxStatus) {
|
|
2992
|
-
this.setBoxStatus(box.id, box.boxStatus, true);
|
|
2993
|
-
this.effectBoxStatusChange(true);
|
|
2994
|
-
}
|
|
2995
|
-
if (box._lastNotMinimizedBoxStatus$.value) {
|
|
2996
|
-
this.setLastNotMinimizedBoxStatus(box.id, box._lastNotMinimizedBoxStatus$.value, true);
|
|
2997
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
2998
|
-
}
|
|
2999
3392
|
box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
|
|
3000
|
-
if (box.boxStatus) {
|
|
3393
|
+
if (this.useBoxesStatus && box.boxStatus) {
|
|
3001
3394
|
if (box.boxStatus === TELE_BOX_STATE.Maximized) {
|
|
3002
|
-
this.
|
|
3395
|
+
this.setBox(box.id, {
|
|
3396
|
+
status: TELE_BOX_STATE.Normal,
|
|
3397
|
+
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
3398
|
+
}, false);
|
|
3003
3399
|
} else {
|
|
3004
|
-
this.boxes.forEach((box2) => {
|
|
3400
|
+
[...this.boxes].filter((box2) => box2.boxStatus === TELE_BOX_STATE.Normal).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
|
|
3005
3401
|
if (box2.boxStatus === TELE_BOX_STATE.Normal) {
|
|
3006
|
-
|
|
3402
|
+
console.log("maximized===>", box2.id);
|
|
3403
|
+
this.setBox(box2.id, {
|
|
3404
|
+
status: TELE_BOX_STATE.Maximized,
|
|
3405
|
+
zIndex: this.getMaxMaximizedBoxZIndex() + 1
|
|
3406
|
+
}, false);
|
|
3007
3407
|
}
|
|
3008
3408
|
});
|
|
3409
|
+
this.makeMaximizedTopBoxFocus();
|
|
3009
3410
|
}
|
|
3010
|
-
this.effectBoxStatusChange();
|
|
3011
|
-
this.makeMaximizedTopBoxFocus();
|
|
3012
3411
|
} else {
|
|
3013
3412
|
this.setMaximized(!this.maximized);
|
|
3014
3413
|
}
|
|
3015
3414
|
});
|
|
3016
3415
|
box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
this.
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3416
|
+
var _a2;
|
|
3417
|
+
if (box.boxStatus && this.useBoxesStatus) {
|
|
3418
|
+
if (this.topBox === box) {
|
|
3419
|
+
if ((_a2 = this.topBox) == null ? void 0 : _a2.focus) {
|
|
3420
|
+
this.blurBox(this.topBox);
|
|
3421
|
+
}
|
|
3023
3422
|
}
|
|
3423
|
+
this.setBox(box, {
|
|
3424
|
+
status: TELE_BOX_STATE.Minimized,
|
|
3425
|
+
zIndex: -1
|
|
3426
|
+
}, false, () => {
|
|
3427
|
+
this.focusTopBox();
|
|
3428
|
+
});
|
|
3024
3429
|
} else {
|
|
3025
3430
|
this.setMinimized(true);
|
|
3026
3431
|
}
|
|
@@ -3056,12 +3461,19 @@ class TeleBoxManager {
|
|
|
3056
3461
|
});
|
|
3057
3462
|
box._zIndex$.reaction((_, __, skipUpdate) => {
|
|
3058
3463
|
if (this.boxes.length > 0) {
|
|
3464
|
+
console.log("topBox===>_zIndex", this.boxes.map((box2) => ({ id: box2.id, zIndex: box2.zIndex, boxStatus: box2.boxStatus })));
|
|
3465
|
+
let currentTopBox = void 0;
|
|
3059
3466
|
const topBox = this.boxes.reduce((topBox2, box2) => {
|
|
3060
3467
|
if (box2.boxStatus && box2.boxStatus === TELE_BOX_STATE.Minimized) {
|
|
3061
3468
|
return topBox2;
|
|
3062
3469
|
}
|
|
3470
|
+
if (!topBox2) {
|
|
3471
|
+
topBox2 = box2;
|
|
3472
|
+
return topBox2;
|
|
3473
|
+
}
|
|
3063
3474
|
return topBox2.zIndex > box2.zIndex ? topBox2 : box2;
|
|
3064
|
-
});
|
|
3475
|
+
}, currentTopBox);
|
|
3476
|
+
console.log("topBox===>_zIndex===>end", topBox == null ? void 0 : topBox.id);
|
|
3065
3477
|
this.topBox$.setValue(topBox);
|
|
3066
3478
|
}
|
|
3067
3479
|
if (!skipUpdate) {
|
|
@@ -3088,7 +3500,26 @@ class TeleBoxManager {
|
|
|
3088
3500
|
this.updateBox(box, config, skipUpdate);
|
|
3089
3501
|
});
|
|
3090
3502
|
}
|
|
3091
|
-
|
|
3503
|
+
setBox(boxOrID, options, skipUpdate = false, effectFunc) {
|
|
3504
|
+
const box = this.getBox(boxOrID);
|
|
3505
|
+
if (box) {
|
|
3506
|
+
const { status, zIndex, lastNotMinimizedBoxStatus } = options;
|
|
3507
|
+
if (status) {
|
|
3508
|
+
this.setBoxStatus(box.id, status, skipUpdate);
|
|
3509
|
+
box.setBoxStatus(status, skipUpdate);
|
|
3510
|
+
this.effectBoxStatusChange();
|
|
3511
|
+
}
|
|
3512
|
+
if (zIndex) {
|
|
3513
|
+
box.setZIndex(zIndex, skipUpdate);
|
|
3514
|
+
}
|
|
3515
|
+
if (lastNotMinimizedBoxStatus) {
|
|
3516
|
+
this.setLastNotMinimizedBoxStatus(box.id, lastNotMinimizedBoxStatus, skipUpdate);
|
|
3517
|
+
box.setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate);
|
|
3518
|
+
}
|
|
3519
|
+
effectFunc && effectFunc();
|
|
3520
|
+
}
|
|
3521
|
+
}
|
|
3522
|
+
remove(boxOrID, skipUpdate = false, effectFunc) {
|
|
3092
3523
|
const box = this.getBox(boxOrID);
|
|
3093
3524
|
const index2 = this.getBoxIndex(boxOrID);
|
|
3094
3525
|
if (index2 >= 0) {
|
|
@@ -3096,13 +3527,11 @@ class TeleBoxManager {
|
|
|
3096
3527
|
const deletedBoxes = boxes.splice(index2, 1);
|
|
3097
3528
|
this.boxes$.setValue(boxes);
|
|
3098
3529
|
deletedBoxes.forEach((box2) => box2.destroy());
|
|
3099
|
-
if (box) {
|
|
3530
|
+
if (box && this.useBoxesStatus) {
|
|
3100
3531
|
this.setBoxStatus(box.id, void 0, skipUpdate);
|
|
3101
|
-
this.boxesStatus$.delete(box.id);
|
|
3102
|
-
this.effectBoxStatusChange(skipUpdate);
|
|
3103
3532
|
this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
|
|
3104
|
-
this.
|
|
3105
|
-
|
|
3533
|
+
this.effectBoxStatusChange();
|
|
3534
|
+
effectFunc && effectFunc();
|
|
3106
3535
|
}
|
|
3107
3536
|
if (!skipUpdate) {
|
|
3108
3537
|
if (this.boxes.length <= 0) {
|
|
@@ -3167,10 +3596,10 @@ class TeleBoxManager {
|
|
|
3167
3596
|
this.blurBox(box, skipUpdate);
|
|
3168
3597
|
}
|
|
3169
3598
|
});
|
|
3170
|
-
if (this.
|
|
3171
|
-
this.makeMaximizedBoxFocus(targetBox);
|
|
3172
|
-
} else {
|
|
3599
|
+
if (!this.useBoxesStatus) {
|
|
3173
3600
|
this.maxTitleBar.focusBox(targetBox);
|
|
3601
|
+
} else if (this.useBoxesStatus && this.maxTitleBar.hasMaximizedBoxInStatus()) {
|
|
3602
|
+
this.makeMaximizedTopBoxFocus();
|
|
3174
3603
|
}
|
|
3175
3604
|
}
|
|
3176
3605
|
}
|
|
@@ -3189,11 +3618,7 @@ class TeleBoxManager {
|
|
|
3189
3618
|
}
|
|
3190
3619
|
}
|
|
3191
3620
|
if (this.maxTitleBar.focusedBox === targetBox) {
|
|
3192
|
-
|
|
3193
|
-
this.makeMaximizedTopBoxFocus();
|
|
3194
|
-
} else {
|
|
3195
|
-
this.maxTitleBar.focusBox();
|
|
3196
|
-
}
|
|
3621
|
+
this.maxTitleBar.focusBox();
|
|
3197
3622
|
}
|
|
3198
3623
|
}
|
|
3199
3624
|
}
|
|
@@ -3207,11 +3632,7 @@ class TeleBoxManager {
|
|
|
3207
3632
|
}
|
|
3208
3633
|
});
|
|
3209
3634
|
if (this.maxTitleBar.focusedBox) {
|
|
3210
|
-
|
|
3211
|
-
this.makeMaximizedBoxBlur();
|
|
3212
|
-
} else {
|
|
3213
|
-
this.maxTitleBar.focusBox();
|
|
3214
|
-
}
|
|
3635
|
+
this.maxTitleBar.focusBox();
|
|
3215
3636
|
}
|
|
3216
3637
|
}
|
|
3217
3638
|
teleBoxMatcher(config) {
|
|
@@ -3256,13 +3677,11 @@ class TeleBoxManager {
|
|
|
3256
3677
|
if (config.footer != null) {
|
|
3257
3678
|
box.mountFooter(config.footer);
|
|
3258
3679
|
}
|
|
3259
|
-
if (config.boxStatus) {
|
|
3260
|
-
this.
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
this.setLastNotMinimizedBoxStatus(box.id, config.lastNotMinimizedBoxStatus, skipUpdate);
|
|
3265
|
-
this.effectLastNotMinimizedBoxStatusChange();
|
|
3680
|
+
if (this.useBoxesStatus && (config.boxStatus || config.lastNotMinimizedBoxStatus)) {
|
|
3681
|
+
this.setBox(box, {
|
|
3682
|
+
status: config.boxStatus,
|
|
3683
|
+
lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
|
|
3684
|
+
}, skipUpdate);
|
|
3266
3685
|
}
|
|
3267
3686
|
}
|
|
3268
3687
|
smartPosition(config = {}) {
|
|
@@ -3275,6 +3694,10 @@ class TeleBoxManager {
|
|
|
3275
3694
|
if (vx > this.containerRect.width - width * this.containerRect.width) {
|
|
3276
3695
|
vx = 20;
|
|
3277
3696
|
}
|
|
3697
|
+
} else if (this.hasMinimizedBox()) {
|
|
3698
|
+
vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxX, box) => {
|
|
3699
|
+
return Math.max(maxX, box.intrinsicX * this.containerRect.width + 20);
|
|
3700
|
+
}, vx);
|
|
3278
3701
|
}
|
|
3279
3702
|
x = vx / this.containerRect.width;
|
|
3280
3703
|
}
|
|
@@ -3285,22 +3708,27 @@ class TeleBoxManager {
|
|
|
3285
3708
|
if (vy > this.containerRect.height - height * this.containerRect.height) {
|
|
3286
3709
|
vy = 20;
|
|
3287
3710
|
}
|
|
3711
|
+
} else if (this.hasMinimizedBox()) {
|
|
3712
|
+
vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxY, box) => {
|
|
3713
|
+
return Math.max(maxY, box.intrinsicY * this.containerRect.height + 20);
|
|
3714
|
+
}, vy);
|
|
3288
3715
|
}
|
|
3289
3716
|
y = vy / this.containerRect.height;
|
|
3290
3717
|
}
|
|
3291
3718
|
return __spreadProps(__spreadValues({}, config), { x, y, width, height });
|
|
3292
3719
|
}
|
|
3293
3720
|
makeBoxTop(box, skipUpdate = false) {
|
|
3294
|
-
if (this.topBox) {
|
|
3721
|
+
if (!this.useBoxesStatus && this.topBox) {
|
|
3295
3722
|
if (box !== this.topBox) {
|
|
3296
|
-
const currentBoxZIndex = box.zIndex;
|
|
3297
|
-
const addZIndex = this.topBox.zIndex + 1 - box.zIndex;
|
|
3298
3723
|
box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
|
|
3299
|
-
this.makeTopBoxEffect(box.id, addZIndex, currentBoxZIndex, skipUpdate);
|
|
3300
3724
|
}
|
|
3301
|
-
}
|
|
3725
|
+
} else if (this.useBoxesStatus)
|
|
3726
|
+
;
|
|
3302
3727
|
}
|
|
3303
|
-
|
|
3728
|
+
getMaximizedTopBox() {
|
|
3729
|
+
if (!this.useBoxesStatus) {
|
|
3730
|
+
return void 0;
|
|
3731
|
+
}
|
|
3304
3732
|
let maximizedBox;
|
|
3305
3733
|
if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
|
|
3306
3734
|
maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, currentBox) => {
|
|
@@ -3309,45 +3737,17 @@ class TeleBoxManager {
|
|
|
3309
3737
|
}
|
|
3310
3738
|
return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
|
|
3311
3739
|
});
|
|
3312
|
-
if (maximizedBox) {
|
|
3313
|
-
this.maxTitleBar.focusBox(maximizedBox);
|
|
3314
|
-
}
|
|
3315
3740
|
}
|
|
3741
|
+
return maximizedBox;
|
|
3316
3742
|
}
|
|
3317
|
-
|
|
3318
|
-
if (this.
|
|
3319
|
-
|
|
3320
|
-
if (b.boxStatus && b.id !== boxId && b.zIndex >= currentZIndex) {
|
|
3321
|
-
b.setZIndex(b.zIndex + addZIndex, skipUpdate);
|
|
3322
|
-
}
|
|
3323
|
-
});
|
|
3324
|
-
}
|
|
3325
|
-
}
|
|
3326
|
-
makeMaximizedBoxFocus(maximizedBox, skipUpdate = false) {
|
|
3327
|
-
if (this.maxTitleBar.hasMaximizedBoxInStatus() && this.maxTitleBar.MaximizedBoxes.find((box) => box.id === maximizedBox.id)) {
|
|
3328
|
-
const currentZIndex = maximizedBox.zIndex;
|
|
3329
|
-
const currentMaximizedTopBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, box) => {
|
|
3330
|
-
if (!topBox) {
|
|
3331
|
-
return box;
|
|
3332
|
-
}
|
|
3333
|
-
return topBox.zIndex > box.zIndex ? topBox : box;
|
|
3334
|
-
});
|
|
3335
|
-
if (currentMaximizedTopBox !== maximizedBox) {
|
|
3336
|
-
const addZIndex = currentMaximizedTopBox.zIndex - currentZIndex + 1;
|
|
3337
|
-
this.boxes.forEach((box) => {
|
|
3338
|
-
if (this.maxTitleBar.MaximizedBoxes.find((b) => b.id === box.id && b.id !== maximizedBox.id)) {
|
|
3339
|
-
return;
|
|
3340
|
-
}
|
|
3341
|
-
if (box.zIndex >= currentZIndex) {
|
|
3342
|
-
box.setZIndex(box.zIndex + addZIndex, skipUpdate);
|
|
3343
|
-
}
|
|
3344
|
-
});
|
|
3345
|
-
}
|
|
3346
|
-
this.maxTitleBar.focusBox(maximizedBox);
|
|
3743
|
+
makeMaximizedTopBoxFocus() {
|
|
3744
|
+
if (!this.useBoxesStatus) {
|
|
3745
|
+
return;
|
|
3347
3746
|
}
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
this.maxTitleBar.focusBox();
|
|
3747
|
+
const maximizedBox = this.getMaximizedTopBox();
|
|
3748
|
+
console.log("makeMaximizedTopBoxFocus===>", maximizedBox == null ? void 0 : maximizedBox.id);
|
|
3749
|
+
this.maxTitleBar.focusBox(maximizedBox);
|
|
3750
|
+
console.log("makeMaximizedTopBoxFocus===>end", maximizedBox == null ? void 0 : maximizedBox.id);
|
|
3351
3751
|
}
|
|
3352
3752
|
getBoxIndex(boxOrID) {
|
|
3353
3753
|
return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
|
|
@@ -3355,6 +3755,20 @@ class TeleBoxManager {
|
|
|
3355
3755
|
getBox(boxOrID) {
|
|
3356
3756
|
return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
|
|
3357
3757
|
}
|
|
3758
|
+
createMinimizedAppMenu() {
|
|
3759
|
+
var _a, _b;
|
|
3760
|
+
if ((_a = this.collector) == null ? void 0 : _a.$appMenuContainer) {
|
|
3761
|
+
return new AppMenu({
|
|
3762
|
+
manager: this,
|
|
3763
|
+
container: (_b = this.collector) == null ? void 0 : _b.$appMenuContainer,
|
|
3764
|
+
theme: this.prefersColorScheme ? "dark" : "light",
|
|
3765
|
+
getBoxesStatus: () => {
|
|
3766
|
+
return this.boxesStatus$;
|
|
3767
|
+
}
|
|
3768
|
+
});
|
|
3769
|
+
}
|
|
3770
|
+
return;
|
|
3771
|
+
}
|
|
3358
3772
|
}
|
|
3359
3773
|
export { DefaultTitleBar, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, TeleBoxDragHandleType, TeleBoxManager };
|
|
3360
3774
|
//# sourceMappingURL=telebox-insider.es.js.map
|