@netless/telebox-insider 0.3.0-beta.6 → 0.3.0-beta.7
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 +4 -2
- package/dist/style.css +10 -10
- package/dist/telebox-insider.cjs.js +682 -419
- package/dist/telebox-insider.cjs.js.map +1 -1
- package/dist/telebox-insider.es.js +572 -314
- package/dist/telebox-insider.es.js.map +1 -1
- package/package.json +2 -2
- package/src/TeleBox/style.scss +2 -2
- package/src/TeleBoxCollector/style.scss +2 -2
- package/src/TeleBoxManager/MaxTitleBar/style.scss +2 -2
- package/src/TeleBoxManager/index.ts +5 -1
- package/src/TeleTitleBar/DefaultTitleBar/style.scss +2 -2
|
@@ -1,34 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports[Symbol.toStringTag] = "Module";
|
|
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$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}';
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
var fancyScrollbar = "";
|
|
4
|
+
var style$4 = "";
|
|
25
5
|
var eventemitter3 = { exports: {} };
|
|
26
6
|
(function(module) {
|
|
27
7
|
var has = Object.prototype.hasOwnProperty, prefix = "~";
|
|
28
8
|
function Events() {
|
|
29
9
|
}
|
|
30
10
|
if (Object.create) {
|
|
31
|
-
Events.prototype = Object.create(null);
|
|
11
|
+
Events.prototype = /* @__PURE__ */ Object.create(null);
|
|
32
12
|
if (!new Events().__proto__)
|
|
33
13
|
prefix = false;
|
|
34
14
|
}
|
|
@@ -214,8 +194,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
|
214
194
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
215
195
|
PERFORMANCE OF THIS SOFTWARE.
|
|
216
196
|
***************************************************************************** */
|
|
217
|
-
var __assign
|
|
218
|
-
__assign
|
|
197
|
+
var __assign = function() {
|
|
198
|
+
__assign = Object.assign || function __assign2(t2) {
|
|
219
199
|
for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
|
|
220
200
|
s2 = arguments[i2];
|
|
221
201
|
for (var p in s2)
|
|
@@ -224,7 +204,7 @@ var __assign$1 = function() {
|
|
|
224
204
|
}
|
|
225
205
|
return t2;
|
|
226
206
|
};
|
|
227
|
-
return __assign
|
|
207
|
+
return __assign.apply(this, arguments);
|
|
228
208
|
};
|
|
229
209
|
function __rest(s2, e2) {
|
|
230
210
|
var t2 = {};
|
|
@@ -255,8 +235,8 @@ var createStep = function(setRunNextFrame) {
|
|
|
255
235
|
var numThisFrame = 0;
|
|
256
236
|
var isProcessing2 = false;
|
|
257
237
|
var i2 = 0;
|
|
258
|
-
var cancelled = new WeakSet();
|
|
259
|
-
var toKeepAlive = new WeakSet();
|
|
238
|
+
var cancelled = /* @__PURE__ */ new WeakSet();
|
|
239
|
+
var toKeepAlive = /* @__PURE__ */ new WeakSet();
|
|
260
240
|
var renderStep = {
|
|
261
241
|
cancel: function(process) {
|
|
262
242
|
var indexOfCallback = processToRunNextFrame.indexOf(process);
|
|
@@ -361,32 +341,6 @@ var startLoop = function() {
|
|
|
361
341
|
if (!isProcessing)
|
|
362
342
|
onNextFrame(processFrame);
|
|
363
343
|
};
|
|
364
|
-
/*! *****************************************************************************
|
|
365
|
-
Copyright (c) Microsoft Corporation.
|
|
366
|
-
|
|
367
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
368
|
-
purpose with or without fee is hereby granted.
|
|
369
|
-
|
|
370
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
371
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
372
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
373
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
374
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
375
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
376
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
377
|
-
***************************************************************************** */
|
|
378
|
-
var __assign = function() {
|
|
379
|
-
__assign = Object.assign || function __assign2(t2) {
|
|
380
|
-
for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
|
|
381
|
-
s2 = arguments[i2];
|
|
382
|
-
for (var p in s2)
|
|
383
|
-
if (Object.prototype.hasOwnProperty.call(s2, p))
|
|
384
|
-
t2[p] = s2[p];
|
|
385
|
-
}
|
|
386
|
-
return t2;
|
|
387
|
-
};
|
|
388
|
-
return __assign.apply(this, arguments);
|
|
389
|
-
};
|
|
390
344
|
var clamp$1 = function(min, max) {
|
|
391
345
|
return function(v) {
|
|
392
346
|
return Math.max(Math.min(v, max), min);
|
|
@@ -544,7 +498,7 @@ var color = {
|
|
|
544
498
|
}
|
|
545
499
|
};
|
|
546
500
|
var createStyler = function(_a) {
|
|
547
|
-
var onRead2 = _a.onRead, onRender2 = _a.onRender, _b = _a.uncachedValues, uncachedValues = _b === void 0 ? new Set() : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c;
|
|
501
|
+
var onRead2 = _a.onRead, onRender2 = _a.onRender, _b = _a.uncachedValues, uncachedValues = _b === void 0 ? /* @__PURE__ */ new Set() : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c;
|
|
548
502
|
return function(_a2) {
|
|
549
503
|
if (_a2 === void 0) {
|
|
550
504
|
_a2 = {};
|
|
@@ -627,7 +581,7 @@ var testPrefix = function(key) {
|
|
|
627
581
|
return;
|
|
628
582
|
}
|
|
629
583
|
camelCache.set(key, prefixedPropertyName);
|
|
630
|
-
setDashPrefix(key,
|
|
584
|
+
setDashPrefix(key, (noPrefix ? "" : "-") + camelToDash(prefixedPropertyName));
|
|
631
585
|
}
|
|
632
586
|
}
|
|
633
587
|
};
|
|
@@ -666,7 +620,7 @@ var transformOriginProps = /* @__PURE__ */ new Set(["originX", "originY", "origi
|
|
|
666
620
|
function isTransformOriginProp(key) {
|
|
667
621
|
return transformOriginProps.has(key);
|
|
668
622
|
}
|
|
669
|
-
var int = /* @__PURE__ */ __assign
|
|
623
|
+
var int = /* @__PURE__ */ __assign(/* @__PURE__ */ __assign({}, number), { transform: Math.round });
|
|
670
624
|
var valueTypes = {
|
|
671
625
|
color,
|
|
672
626
|
backgroundColor: color,
|
|
@@ -885,7 +839,7 @@ function createCssStyler(element, _a) {
|
|
|
885
839
|
_a = {};
|
|
886
840
|
}
|
|
887
841
|
var enableHardwareAcceleration = _a.enableHardwareAcceleration, allowTransformNone = _a.allowTransformNone, props = __rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
|
|
888
|
-
return cssStyler(__assign
|
|
842
|
+
return cssStyler(__assign({ element, buildStyles: createStyleBuilder({
|
|
889
843
|
enableHardwareAcceleration,
|
|
890
844
|
allowTransformNone
|
|
891
845
|
}), preparseOutput: true }, props));
|
|
@@ -1075,7 +1029,7 @@ const e$1 = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop
|
|
|
1075
1029
|
};
|
|
1076
1030
|
class o {
|
|
1077
1031
|
constructor() {
|
|
1078
|
-
this.disposers = new Map();
|
|
1032
|
+
this.disposers = /* @__PURE__ */ new Map();
|
|
1079
1033
|
}
|
|
1080
1034
|
add(e2, s2 = r$1()) {
|
|
1081
1035
|
return this.flush(s2), this.disposers.set(s2, e2()), s2;
|
|
@@ -1123,9 +1077,9 @@ class o {
|
|
|
1123
1077
|
}), this.disposers.clear();
|
|
1124
1078
|
}
|
|
1125
1079
|
}
|
|
1126
|
-
var e = Object.defineProperty, s = (typeof require
|
|
1080
|
+
var e = Object.defineProperty, s = ("undefined" != typeof require && require, (s2, r2, t2) => (((s3, r3, t3) => {
|
|
1127
1081
|
r3 in s3 ? e(s3, r3, { enumerable: true, configurable: true, writable: true, value: t3 }) : s3[r3] = t3;
|
|
1128
|
-
})(s2, typeof r2
|
|
1082
|
+
})(s2, "symbol" != typeof r2 ? r2 + "" : r2, t2), t2));
|
|
1129
1083
|
class r {
|
|
1130
1084
|
constructor(e2, r2) {
|
|
1131
1085
|
s(this, "_value"), s(this, "_beforeDestroys"), s(this, "_subscribers"), this._value = e2, r2 && (this.compare = r2);
|
|
@@ -1140,7 +1094,7 @@ class r {
|
|
|
1140
1094
|
}
|
|
1141
1095
|
}
|
|
1142
1096
|
reaction(e2) {
|
|
1143
|
-
return this._subscribers || (this._subscribers = new Set()), this._subscribers.add(e2), () => {
|
|
1097
|
+
return this._subscribers || (this._subscribers = /* @__PURE__ */ new Set()), this._subscribers.add(e2), () => {
|
|
1144
1098
|
this._subscribers && this._subscribers.delete(e2);
|
|
1145
1099
|
};
|
|
1146
1100
|
}
|
|
@@ -1158,7 +1112,7 @@ class r {
|
|
|
1158
1112
|
this._beforeDestroys && (this._beforeDestroys.forEach((e2) => e2()), this._beforeDestroys.clear()), this._subscribers && this._subscribers.clear();
|
|
1159
1113
|
}
|
|
1160
1114
|
addBeforeDestroy(e2) {
|
|
1161
|
-
return this._beforeDestroys || (this._beforeDestroys = new Set()), this._beforeDestroys.add(e2), () => {
|
|
1115
|
+
return this._beforeDestroys || (this._beforeDestroys = /* @__PURE__ */ new Set()), this._beforeDestroys.add(e2), () => {
|
|
1162
1116
|
this._beforeDestroys && this._beforeDestroys.delete(e2);
|
|
1163
1117
|
};
|
|
1164
1118
|
}
|
|
@@ -1199,21 +1153,20 @@ function c(e2) {
|
|
|
1199
1153
|
};
|
|
1200
1154
|
return { bindSideEffect: s2, combine: (e3, r2, i2, o2) => s2(t(e3, r2, i2, o2)), createVal: (e3, t2) => s2(new r(e3, t2)) };
|
|
1201
1155
|
}
|
|
1202
|
-
var style$3 =
|
|
1203
|
-
|
|
1204
|
-
(function(TELE_BOX_COLOR_SCHEME2) {
|
|
1156
|
+
var style$3 = "";
|
|
1157
|
+
var TELE_BOX_COLOR_SCHEME = /* @__PURE__ */ ((TELE_BOX_COLOR_SCHEME2) => {
|
|
1205
1158
|
TELE_BOX_COLOR_SCHEME2["Light"] = "light";
|
|
1206
1159
|
TELE_BOX_COLOR_SCHEME2["Dark"] = "dark";
|
|
1207
1160
|
TELE_BOX_COLOR_SCHEME2["Auto"] = "auto";
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
(
|
|
1161
|
+
return TELE_BOX_COLOR_SCHEME2;
|
|
1162
|
+
})(TELE_BOX_COLOR_SCHEME || {});
|
|
1163
|
+
var TELE_BOX_STATE = /* @__PURE__ */ ((TELE_BOX_STATE2) => {
|
|
1211
1164
|
TELE_BOX_STATE2["Normal"] = "normal";
|
|
1212
1165
|
TELE_BOX_STATE2["Minimized"] = "minimized";
|
|
1213
1166
|
TELE_BOX_STATE2["Maximized"] = "maximized";
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
(
|
|
1167
|
+
return TELE_BOX_STATE2;
|
|
1168
|
+
})(TELE_BOX_STATE || {});
|
|
1169
|
+
var TELE_BOX_EVENT = /* @__PURE__ */ ((TELE_BOX_EVENT2) => {
|
|
1217
1170
|
TELE_BOX_EVENT2["DarkMode"] = "dark_mode";
|
|
1218
1171
|
TELE_BOX_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
|
|
1219
1172
|
TELE_BOX_EVENT2["Close"] = "close";
|
|
@@ -1232,15 +1185,15 @@ exports.TELE_BOX_EVENT = void 0;
|
|
|
1232
1185
|
TELE_BOX_EVENT2["Destroyed"] = "destroyed";
|
|
1233
1186
|
TELE_BOX_EVENT2["BoxStatus"] = "box_status";
|
|
1234
1187
|
TELE_BOX_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
(
|
|
1188
|
+
return TELE_BOX_EVENT2;
|
|
1189
|
+
})(TELE_BOX_EVENT || {});
|
|
1190
|
+
var TELE_BOX_DELEGATE_EVENT = /* @__PURE__ */ ((TELE_BOX_DELEGATE_EVENT2) => {
|
|
1238
1191
|
TELE_BOX_DELEGATE_EVENT2["Close"] = "close";
|
|
1239
1192
|
TELE_BOX_DELEGATE_EVENT2["Maximize"] = "maximize";
|
|
1240
1193
|
TELE_BOX_DELEGATE_EVENT2["Minimize"] = "minimize";
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
(
|
|
1194
|
+
return TELE_BOX_DELEGATE_EVENT2;
|
|
1195
|
+
})(TELE_BOX_DELEGATE_EVENT || {});
|
|
1196
|
+
var TELE_BOX_RESIZE_HANDLE = /* @__PURE__ */ ((TELE_BOX_RESIZE_HANDLE2) => {
|
|
1244
1197
|
TELE_BOX_RESIZE_HANDLE2["North"] = "n";
|
|
1245
1198
|
TELE_BOX_RESIZE_HANDLE2["South"] = "s";
|
|
1246
1199
|
TELE_BOX_RESIZE_HANDLE2["West"] = "w";
|
|
@@ -1249,7 +1202,8 @@ exports.TELE_BOX_RESIZE_HANDLE = void 0;
|
|
|
1249
1202
|
TELE_BOX_RESIZE_HANDLE2["NorthEast"] = "ne";
|
|
1250
1203
|
TELE_BOX_RESIZE_HANDLE2["SouthEast"] = "se";
|
|
1251
1204
|
TELE_BOX_RESIZE_HANDLE2["SouthWest"] = "sw";
|
|
1252
|
-
|
|
1205
|
+
return TELE_BOX_RESIZE_HANDLE2;
|
|
1206
|
+
})(TELE_BOX_RESIZE_HANDLE || {});
|
|
1253
1207
|
const TeleBoxDragHandleType = "dh";
|
|
1254
1208
|
function clamp(value, min, max) {
|
|
1255
1209
|
return Math.min(Math.max(value, min), max);
|
|
@@ -1284,7 +1238,7 @@ class DefaultTitleBar {
|
|
|
1284
1238
|
onEvent,
|
|
1285
1239
|
onDragStart,
|
|
1286
1240
|
namespace = "telebox",
|
|
1287
|
-
state =
|
|
1241
|
+
state = TELE_BOX_STATE.Normal,
|
|
1288
1242
|
boxStatus
|
|
1289
1243
|
} = {}) {
|
|
1290
1244
|
this.$btns = [];
|
|
@@ -1310,7 +1264,7 @@ class DefaultTitleBar {
|
|
|
1310
1264
|
if (now - this.lastTitleBarClick.timestamp <= 500) {
|
|
1311
1265
|
if (Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5) {
|
|
1312
1266
|
if (this.onEvent) {
|
|
1313
|
-
this.onEvent({ type:
|
|
1267
|
+
this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
|
|
1314
1268
|
}
|
|
1315
1269
|
}
|
|
1316
1270
|
} else if (this.onDragStart) {
|
|
@@ -1342,7 +1296,7 @@ class DefaultTitleBar {
|
|
|
1342
1296
|
if (now - this.lastTitleBarTouch.timestamp <= 500) {
|
|
1343
1297
|
if (Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10) {
|
|
1344
1298
|
if (this.onEvent) {
|
|
1345
|
-
this.onEvent({ type:
|
|
1299
|
+
this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
|
|
1346
1300
|
}
|
|
1347
1301
|
}
|
|
1348
1302
|
} else if (this.onDragStart) {
|
|
@@ -1361,16 +1315,16 @@ class DefaultTitleBar {
|
|
|
1361
1315
|
this.boxStatus = boxStatus;
|
|
1362
1316
|
this.buttons = buttons || [
|
|
1363
1317
|
{
|
|
1364
|
-
type:
|
|
1318
|
+
type: TELE_BOX_DELEGATE_EVENT.Minimize,
|
|
1365
1319
|
iconClassName: this.wrapClassName("titlebar-icon-minimize")
|
|
1366
1320
|
},
|
|
1367
1321
|
{
|
|
1368
|
-
type:
|
|
1322
|
+
type: TELE_BOX_DELEGATE_EVENT.Maximize,
|
|
1369
1323
|
iconClassName: this.wrapClassName("titlebar-icon-maximize"),
|
|
1370
|
-
isActive: (state2) => state2 ===
|
|
1324
|
+
isActive: (state2) => state2 === TELE_BOX_STATE.Maximized
|
|
1371
1325
|
},
|
|
1372
1326
|
{
|
|
1373
|
-
type:
|
|
1327
|
+
type: TELE_BOX_DELEGATE_EVENT.Close,
|
|
1374
1328
|
iconClassName: this.wrapClassName("titlebar-icon-close")
|
|
1375
1329
|
}
|
|
1376
1330
|
];
|
|
@@ -1388,7 +1342,10 @@ class DefaultTitleBar {
|
|
|
1388
1342
|
this.state = state;
|
|
1389
1343
|
this.buttons.forEach((btn, i2) => {
|
|
1390
1344
|
if (btn.isActive) {
|
|
1391
|
-
this.$btns[i2].classList.toggle(
|
|
1345
|
+
this.$btns[i2].classList.toggle(
|
|
1346
|
+
"is-active",
|
|
1347
|
+
btn.isActive(state)
|
|
1348
|
+
);
|
|
1392
1349
|
}
|
|
1393
1350
|
});
|
|
1394
1351
|
}
|
|
@@ -1399,7 +1356,10 @@ class DefaultTitleBar {
|
|
|
1399
1356
|
if (boxStatus) {
|
|
1400
1357
|
this.buttons.forEach((btn, i2) => {
|
|
1401
1358
|
if (btn.isActive) {
|
|
1402
|
-
this.$btns[i2].classList.toggle(
|
|
1359
|
+
this.$btns[i2].classList.toggle(
|
|
1360
|
+
"is-active",
|
|
1361
|
+
btn.isActive(boxStatus)
|
|
1362
|
+
);
|
|
1403
1363
|
}
|
|
1404
1364
|
});
|
|
1405
1365
|
}
|
|
@@ -1431,7 +1391,9 @@ class DefaultTitleBar {
|
|
|
1431
1391
|
this.buttons.forEach(({ iconClassName, isActive }, i2) => {
|
|
1432
1392
|
const teleTitleBarBtnIndex = String(i2);
|
|
1433
1393
|
const $btn = document.createElement("button");
|
|
1434
|
-
$btn.className = `${this.wrapClassName(
|
|
1394
|
+
$btn.className = `${this.wrapClassName(
|
|
1395
|
+
"titlebar-btn"
|
|
1396
|
+
)} ${iconClassName}`;
|
|
1435
1397
|
$btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
|
|
1436
1398
|
$btn.dataset.teleTitleBarNoDblClick = "true";
|
|
1437
1399
|
if (isActive) {
|
|
@@ -1440,24 +1402,30 @@ class DefaultTitleBar {
|
|
|
1440
1402
|
this.$btns.push($btn);
|
|
1441
1403
|
$buttonsContainer.appendChild($btn);
|
|
1442
1404
|
});
|
|
1443
|
-
this.sideEffect.addEventListener(
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
const
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1405
|
+
this.sideEffect.addEventListener(
|
|
1406
|
+
$buttonsContainer,
|
|
1407
|
+
"click",
|
|
1408
|
+
(ev) => {
|
|
1409
|
+
var _a;
|
|
1410
|
+
if (this.readonly) {
|
|
1411
|
+
return;
|
|
1412
|
+
}
|
|
1413
|
+
const target = ev.target;
|
|
1414
|
+
const teleTitleBarBtnIndex = Number(
|
|
1415
|
+
(_a = target.dataset) == null ? void 0 : _a.teleTitleBarBtnIndex
|
|
1416
|
+
);
|
|
1417
|
+
if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
|
|
1418
|
+
preventEvent(ev);
|
|
1419
|
+
const btn = this.buttons[teleTitleBarBtnIndex];
|
|
1420
|
+
if (this.onEvent) {
|
|
1421
|
+
this.onEvent({
|
|
1422
|
+
type: btn.type,
|
|
1423
|
+
value: btn.value
|
|
1424
|
+
});
|
|
1425
|
+
}
|
|
1458
1426
|
}
|
|
1459
1427
|
}
|
|
1460
|
-
|
|
1428
|
+
);
|
|
1461
1429
|
this.$titleBar.appendChild($titleArea);
|
|
1462
1430
|
this.$titleBar.appendChild($buttonsContainer);
|
|
1463
1431
|
}
|
|
@@ -1467,8 +1435,17 @@ class DefaultTitleBar {
|
|
|
1467
1435
|
const $dragArea = document.createElement("div");
|
|
1468
1436
|
$dragArea.className = this.wrapClassName("drag-area");
|
|
1469
1437
|
$dragArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
|
|
1470
|
-
this.sideEffect.addEventListener(
|
|
1471
|
-
|
|
1438
|
+
this.sideEffect.addEventListener(
|
|
1439
|
+
$dragArea,
|
|
1440
|
+
"mousedown",
|
|
1441
|
+
this.handleTitleBarClick
|
|
1442
|
+
);
|
|
1443
|
+
this.sideEffect.addEventListener(
|
|
1444
|
+
$dragArea,
|
|
1445
|
+
"touchstart",
|
|
1446
|
+
this.handleTitleBarTouch,
|
|
1447
|
+
{ passive: true }
|
|
1448
|
+
);
|
|
1472
1449
|
return $dragArea;
|
|
1473
1450
|
}
|
|
1474
1451
|
dragHandle() {
|
|
@@ -1492,7 +1469,7 @@ class TeleBox {
|
|
|
1492
1469
|
constructor({
|
|
1493
1470
|
id = genUniqueKey(),
|
|
1494
1471
|
title = getBoxDefaultName(),
|
|
1495
|
-
prefersColorScheme =
|
|
1472
|
+
prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
|
|
1496
1473
|
darkMode,
|
|
1497
1474
|
visible = true,
|
|
1498
1475
|
width = 0.5,
|
|
@@ -1539,38 +1516,53 @@ class TeleBox {
|
|
|
1539
1516
|
this._delegateEvents = new EventEmitter();
|
|
1540
1517
|
const boxStatus$ = createVal(boxStatus);
|
|
1541
1518
|
const lastNotMinimizedBoxStatus$ = createVal(lastNotMinimizedBoxStatus);
|
|
1542
|
-
const prefersColorScheme$ = createVal(
|
|
1519
|
+
const prefersColorScheme$ = createVal(
|
|
1520
|
+
prefersColorScheme
|
|
1521
|
+
);
|
|
1543
1522
|
prefersColorScheme$.reaction((prefersColorScheme2, _, skipUpdate) => {
|
|
1544
1523
|
if (!skipUpdate) {
|
|
1545
|
-
this.events.emit(
|
|
1524
|
+
this.events.emit(
|
|
1525
|
+
TELE_BOX_EVENT.PrefersColorScheme,
|
|
1526
|
+
prefersColorScheme2
|
|
1527
|
+
);
|
|
1546
1528
|
}
|
|
1547
1529
|
});
|
|
1548
1530
|
const darkMode$ = createVal(Boolean(darkMode));
|
|
1549
1531
|
if (darkMode == null) {
|
|
1550
|
-
prefersColorScheme$.subscribe(
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1532
|
+
prefersColorScheme$.subscribe(
|
|
1533
|
+
(prefersColorScheme2, _, skipUpdate) => {
|
|
1534
|
+
this._sideEffect.add(() => {
|
|
1535
|
+
if (prefersColorScheme2 === "auto") {
|
|
1536
|
+
const prefersDark = window.matchMedia(
|
|
1537
|
+
"(prefers-color-scheme: dark)"
|
|
1538
|
+
);
|
|
1539
|
+
if (prefersDark) {
|
|
1540
|
+
darkMode$.setValue(
|
|
1541
|
+
prefersDark.matches,
|
|
1542
|
+
skipUpdate
|
|
1543
|
+
);
|
|
1544
|
+
const handler = (evt) => {
|
|
1545
|
+
darkMode$.setValue(evt.matches, skipUpdate);
|
|
1546
|
+
};
|
|
1547
|
+
prefersDark.addListener(handler);
|
|
1548
|
+
return () => prefersDark.removeListener(handler);
|
|
1549
|
+
} else {
|
|
1550
|
+
return noop;
|
|
1551
|
+
}
|
|
1561
1552
|
} else {
|
|
1553
|
+
darkMode$.setValue(
|
|
1554
|
+
prefersColorScheme2 === "dark",
|
|
1555
|
+
skipUpdate
|
|
1556
|
+
);
|
|
1562
1557
|
return noop;
|
|
1563
1558
|
}
|
|
1564
|
-
}
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
}
|
|
1568
|
-
}, "prefers-color-scheme");
|
|
1569
|
-
});
|
|
1559
|
+
}, "prefers-color-scheme");
|
|
1560
|
+
}
|
|
1561
|
+
);
|
|
1570
1562
|
}
|
|
1571
1563
|
darkMode$.reaction((darkMode2, _, skipUpdate) => {
|
|
1572
1564
|
if (!skipUpdate) {
|
|
1573
|
-
this.events.emit(
|
|
1565
|
+
this.events.emit(TELE_BOX_EVENT.DarkMode, darkMode2);
|
|
1574
1566
|
}
|
|
1575
1567
|
});
|
|
1576
1568
|
const containerRect$ = createVal(containerRect, shallowequal);
|
|
@@ -1584,13 +1576,13 @@ class TeleBox {
|
|
|
1584
1576
|
const visible$ = createVal(visible);
|
|
1585
1577
|
visible$.reaction((visible2, _, skipUpdate) => {
|
|
1586
1578
|
if (!skipUpdate && !visible2) {
|
|
1587
|
-
this.events.emit(
|
|
1579
|
+
this.events.emit(TELE_BOX_EVENT.Close);
|
|
1588
1580
|
}
|
|
1589
1581
|
});
|
|
1590
1582
|
const readonly$ = createVal(readonly);
|
|
1591
1583
|
readonly$.reaction((readonly2, _, skipUpdate) => {
|
|
1592
1584
|
if (!skipUpdate) {
|
|
1593
|
-
this.events.emit(
|
|
1585
|
+
this.events.emit(TELE_BOX_EVENT.Readonly, readonly2);
|
|
1594
1586
|
}
|
|
1595
1587
|
});
|
|
1596
1588
|
const resizable$ = createVal(resizable);
|
|
@@ -1600,122 +1592,151 @@ class TeleBox {
|
|
|
1600
1592
|
const zIndex$ = createVal(zIndex);
|
|
1601
1593
|
zIndex$.reaction((zIndex2, _, skipUpdate) => {
|
|
1602
1594
|
if (!skipUpdate) {
|
|
1603
|
-
this.events.emit(
|
|
1595
|
+
this.events.emit(TELE_BOX_EVENT.ZIndex, zIndex2);
|
|
1604
1596
|
}
|
|
1605
1597
|
});
|
|
1606
1598
|
const focus$ = createVal(focus);
|
|
1607
1599
|
focus$.reaction((focus2, _, skipUpdate) => {
|
|
1608
1600
|
if (!skipUpdate) {
|
|
1609
|
-
this.events.emit(
|
|
1601
|
+
this.events.emit(
|
|
1602
|
+
focus2 ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur
|
|
1603
|
+
);
|
|
1610
1604
|
}
|
|
1611
1605
|
});
|
|
1612
1606
|
const minimized$ = createVal(minimized);
|
|
1613
1607
|
minimized$.reaction((minimized2, _, skipUpdate) => {
|
|
1614
1608
|
if (!skipUpdate) {
|
|
1615
|
-
this.events.emit(
|
|
1609
|
+
this.events.emit(TELE_BOX_EVENT.Minimized, minimized2);
|
|
1616
1610
|
}
|
|
1617
1611
|
});
|
|
1618
1612
|
const maximized$ = createVal(maximized);
|
|
1619
1613
|
maximized$.reaction((maximized2, _, skipUpdate) => {
|
|
1620
1614
|
if (!skipUpdate) {
|
|
1621
|
-
this.events.emit(
|
|
1615
|
+
this.events.emit(TELE_BOX_EVENT.Maximized, maximized2);
|
|
1622
1616
|
}
|
|
1623
1617
|
});
|
|
1624
|
-
const state$ = combine(
|
|
1618
|
+
const state$ = combine(
|
|
1619
|
+
[minimized$, maximized$, boxStatus$],
|
|
1620
|
+
([minimized2, maximized2, boxStatus2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : !boxStatus2 ? TELE_BOX_STATE.Normal : boxStatus2
|
|
1621
|
+
);
|
|
1625
1622
|
state$.reaction((state, _, skipUpdate) => {
|
|
1626
1623
|
if (!skipUpdate) {
|
|
1627
|
-
this.events.emit(
|
|
1624
|
+
this.events.emit(TELE_BOX_EVENT.State, state);
|
|
1628
1625
|
}
|
|
1629
1626
|
});
|
|
1630
|
-
const minSize$ = createVal(
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1627
|
+
const minSize$ = createVal(
|
|
1628
|
+
{
|
|
1629
|
+
width: clamp(minWidth, 0, 1),
|
|
1630
|
+
height: clamp(minHeight, 0, 1)
|
|
1631
|
+
},
|
|
1632
|
+
shallowequal
|
|
1633
|
+
);
|
|
1634
|
+
const intrinsicSize$ = createVal(
|
|
1635
|
+
{
|
|
1636
|
+
width: clamp(width, minSize$.value.width, 1),
|
|
1637
|
+
height: clamp(height, minSize$.value.height, 1)
|
|
1638
|
+
},
|
|
1639
|
+
shallowequal
|
|
1640
|
+
);
|
|
1638
1641
|
minSize$.reaction((minSize, _, skipUpdate) => {
|
|
1639
|
-
intrinsicSize$.setValue(
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1642
|
+
intrinsicSize$.setValue(
|
|
1643
|
+
{
|
|
1644
|
+
width: clamp(width, minSize.width, 1),
|
|
1645
|
+
height: clamp(height, minSize.height, 1)
|
|
1646
|
+
},
|
|
1647
|
+
skipUpdate
|
|
1648
|
+
);
|
|
1643
1649
|
});
|
|
1644
1650
|
intrinsicSize$.reaction((size, _, skipUpdate) => {
|
|
1645
1651
|
if (!skipUpdate) {
|
|
1646
|
-
this.events.emit(
|
|
1652
|
+
this.events.emit(TELE_BOX_EVENT.IntrinsicResize, size);
|
|
1647
1653
|
}
|
|
1648
1654
|
});
|
|
1649
|
-
const size$ = combine(
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
+
const size$ = combine(
|
|
1656
|
+
[intrinsicSize$, maximized$, boxStatus$],
|
|
1657
|
+
([intrinsicSize, maximized2, boxStatus2]) => {
|
|
1658
|
+
if (maximized2 || boxStatus2 === TELE_BOX_STATE.Maximized) {
|
|
1659
|
+
return { width: 1, height: 1 };
|
|
1660
|
+
}
|
|
1661
|
+
return intrinsicSize;
|
|
1662
|
+
},
|
|
1663
|
+
shallowequal
|
|
1664
|
+
);
|
|
1655
1665
|
size$.reaction((size, _, skipUpdate) => {
|
|
1656
1666
|
if (!skipUpdate) {
|
|
1657
|
-
this.events.emit(
|
|
1667
|
+
this.events.emit(TELE_BOX_EVENT.Resize, size);
|
|
1658
1668
|
}
|
|
1659
1669
|
});
|
|
1660
|
-
const visualSize$ = combine(
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1670
|
+
const visualSize$ = combine(
|
|
1671
|
+
[size$, minimized$, containerRect$, collectorRect$, boxStatus$],
|
|
1672
|
+
([size, minimized2, containerRect2, collectorRect2, boxStatus2]) => {
|
|
1673
|
+
if ((minimized2 || boxStatus2 === TELE_BOX_STATE.Minimized) && collectorRect2) {
|
|
1674
|
+
return {
|
|
1675
|
+
width: collectorRect2.width / size.width / containerRect2.width,
|
|
1676
|
+
height: collectorRect2.height / size.height / containerRect2.height
|
|
1677
|
+
};
|
|
1678
|
+
}
|
|
1679
|
+
return size;
|
|
1680
|
+
},
|
|
1681
|
+
shallowequal
|
|
1682
|
+
);
|
|
1669
1683
|
visualSize$.reaction((size, _, skipUpdate) => {
|
|
1670
1684
|
if (!skipUpdate) {
|
|
1671
|
-
this.events.emit(
|
|
1685
|
+
this.events.emit(TELE_BOX_EVENT.VisualResize, size);
|
|
1672
1686
|
}
|
|
1673
1687
|
});
|
|
1674
|
-
const intrinsicCoord$ = createVal(
|
|
1688
|
+
const intrinsicCoord$ = createVal(
|
|
1689
|
+
{ x: clamp(x, 0, 1), y: clamp(y, 0, 1) },
|
|
1690
|
+
shallowequal
|
|
1691
|
+
);
|
|
1675
1692
|
intrinsicCoord$.reaction((coord, _, skipUpdate) => {
|
|
1676
1693
|
if (!skipUpdate) {
|
|
1677
|
-
this.events.emit(
|
|
1678
|
-
}
|
|
1679
|
-
});
|
|
1680
|
-
const coord$ = combine(
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1694
|
+
this.events.emit(TELE_BOX_EVENT.IntrinsicMove, coord);
|
|
1695
|
+
}
|
|
1696
|
+
});
|
|
1697
|
+
const coord$ = combine(
|
|
1698
|
+
[
|
|
1699
|
+
intrinsicCoord$,
|
|
1700
|
+
intrinsicSize$,
|
|
1701
|
+
containerRect$,
|
|
1702
|
+
collectorRect$,
|
|
1703
|
+
minimized$,
|
|
1704
|
+
maximized$,
|
|
1705
|
+
boxStatus$,
|
|
1706
|
+
lastNotMinimizedBoxStatus$
|
|
1707
|
+
],
|
|
1708
|
+
([
|
|
1709
|
+
intrinsicCoord,
|
|
1710
|
+
intrinsicSize,
|
|
1711
|
+
containerRect2,
|
|
1712
|
+
collectorRect2,
|
|
1713
|
+
minimized2,
|
|
1714
|
+
maximized2,
|
|
1715
|
+
boxStatus2,
|
|
1716
|
+
lastNotMinimizedBoxStatus2
|
|
1717
|
+
]) => {
|
|
1718
|
+
if ((minimized2 || boxStatus2 === TELE_BOX_STATE.Minimized) && collectorRect2) {
|
|
1719
|
+
if (maximized2 || lastNotMinimizedBoxStatus2 === TELE_BOX_STATE.Maximized) {
|
|
1720
|
+
return {
|
|
1721
|
+
x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - 1 / 2,
|
|
1722
|
+
y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - 1 / 2
|
|
1723
|
+
};
|
|
1724
|
+
}
|
|
1701
1725
|
return {
|
|
1702
|
-
x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width -
|
|
1703
|
-
y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height -
|
|
1726
|
+
x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - intrinsicSize.width / 2,
|
|
1727
|
+
y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - intrinsicSize.height / 2
|
|
1704
1728
|
};
|
|
1705
1729
|
}
|
|
1706
|
-
|
|
1707
|
-
x:
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
}
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
}
|
|
1714
|
-
return intrinsicCoord;
|
|
1715
|
-
}, shallowequal);
|
|
1730
|
+
if (maximized2 || boxStatus2 === TELE_BOX_STATE.Maximized) {
|
|
1731
|
+
return { x: 0, y: 0 };
|
|
1732
|
+
}
|
|
1733
|
+
return intrinsicCoord;
|
|
1734
|
+
},
|
|
1735
|
+
shallowequal
|
|
1736
|
+
);
|
|
1716
1737
|
coord$.reaction((coord, _, skipUpdate) => {
|
|
1717
1738
|
if (!skipUpdate) {
|
|
1718
|
-
this.events.emit(
|
|
1739
|
+
this.events.emit(TELE_BOX_EVENT.Move, coord);
|
|
1719
1740
|
}
|
|
1720
1741
|
});
|
|
1721
1742
|
this.titleBar = titleBar || new DefaultTitleBar({
|
|
@@ -1732,24 +1753,27 @@ class TeleBox {
|
|
|
1732
1753
|
this._delegateEvents.emit(event.type);
|
|
1733
1754
|
} else {
|
|
1734
1755
|
switch (event.type) {
|
|
1735
|
-
case
|
|
1756
|
+
case TELE_BOX_DELEGATE_EVENT.Maximize: {
|
|
1736
1757
|
if (!boxStatus$.value) {
|
|
1737
1758
|
maximized$.setValue(!maximized$.value);
|
|
1738
1759
|
}
|
|
1739
1760
|
break;
|
|
1740
1761
|
}
|
|
1741
|
-
case
|
|
1762
|
+
case TELE_BOX_DELEGATE_EVENT.Minimize: {
|
|
1742
1763
|
if (!boxStatus$.value) {
|
|
1743
1764
|
minimized$.setValue(true);
|
|
1744
1765
|
}
|
|
1745
1766
|
break;
|
|
1746
1767
|
}
|
|
1747
|
-
case
|
|
1768
|
+
case TELE_BOX_DELEGATE_EVENT.Close: {
|
|
1748
1769
|
visible$.setValue(false);
|
|
1749
1770
|
break;
|
|
1750
1771
|
}
|
|
1751
1772
|
default: {
|
|
1752
|
-
console.error(
|
|
1773
|
+
console.error(
|
|
1774
|
+
"Unsupported titleBar event:",
|
|
1775
|
+
event
|
|
1776
|
+
);
|
|
1753
1777
|
break;
|
|
1754
1778
|
}
|
|
1755
1779
|
}
|
|
@@ -1796,7 +1820,13 @@ class TeleBox {
|
|
|
1796
1820
|
this._boxStatus$ = boxStatus$;
|
|
1797
1821
|
this._lastNotMinimizedBoxStatus$ = lastNotMinimizedBoxStatus$;
|
|
1798
1822
|
if (this.fixRatio) {
|
|
1799
|
-
this.transform(
|
|
1823
|
+
this.transform(
|
|
1824
|
+
coord$.value.x,
|
|
1825
|
+
coord$.value.y,
|
|
1826
|
+
size$.value.width,
|
|
1827
|
+
size$.value.height,
|
|
1828
|
+
true
|
|
1829
|
+
);
|
|
1800
1830
|
}
|
|
1801
1831
|
this.$box = this.render();
|
|
1802
1832
|
}
|
|
@@ -1817,12 +1847,12 @@ class TeleBox {
|
|
|
1817
1847
|
}
|
|
1818
1848
|
setState(state, skipUpdate = false) {
|
|
1819
1849
|
switch (state) {
|
|
1820
|
-
case
|
|
1850
|
+
case TELE_BOX_STATE.Maximized: {
|
|
1821
1851
|
this.setMinimized(false, skipUpdate);
|
|
1822
1852
|
this.setMaximized(true, skipUpdate);
|
|
1823
1853
|
break;
|
|
1824
1854
|
}
|
|
1825
|
-
case
|
|
1855
|
+
case TELE_BOX_STATE.Minimized: {
|
|
1826
1856
|
this.setMinimized(true, skipUpdate);
|
|
1827
1857
|
this.setMaximized(false, skipUpdate);
|
|
1828
1858
|
break;
|
|
@@ -1836,8 +1866,8 @@ class TeleBox {
|
|
|
1836
1866
|
return this;
|
|
1837
1867
|
}
|
|
1838
1868
|
setBoxStatus(boxStatus, skipUpdate = false) {
|
|
1839
|
-
if (boxStatus ===
|
|
1840
|
-
if (this._boxStatus$.value && this._boxStatus$.value !==
|
|
1869
|
+
if (boxStatus === TELE_BOX_STATE.Minimized) {
|
|
1870
|
+
if (this._boxStatus$.value && this._boxStatus$.value !== TELE_BOX_STATE.Minimized) {
|
|
1841
1871
|
this.setLastNotMinimizedBoxStatus(this._boxStatus$.value, skipUpdate);
|
|
1842
1872
|
}
|
|
1843
1873
|
} else {
|
|
@@ -1845,14 +1875,14 @@ class TeleBox {
|
|
|
1845
1875
|
}
|
|
1846
1876
|
this._boxStatus$.setValue(boxStatus, skipUpdate);
|
|
1847
1877
|
if (!skipUpdate) {
|
|
1848
|
-
this.events.emit(
|
|
1878
|
+
this.events.emit(TELE_BOX_EVENT.BoxStatus, { id: this.id, boxStatus });
|
|
1849
1879
|
}
|
|
1850
1880
|
return this;
|
|
1851
1881
|
}
|
|
1852
1882
|
setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate = false) {
|
|
1853
1883
|
this._lastNotMinimizedBoxStatus$.setValue(lastNotMinimizedBoxStatus, skipUpdate);
|
|
1854
1884
|
if (!skipUpdate) {
|
|
1855
|
-
this.events.emit(
|
|
1885
|
+
this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, { id: this.id, lastNotMinimizedBoxStatus });
|
|
1856
1886
|
}
|
|
1857
1887
|
return this;
|
|
1858
1888
|
}
|
|
@@ -1863,11 +1893,17 @@ class TeleBox {
|
|
|
1863
1893
|
return this._minSize$.value.height;
|
|
1864
1894
|
}
|
|
1865
1895
|
setMinWidth(minWidth, skipUpdate = false) {
|
|
1866
|
-
this._minSize$.setValue(
|
|
1896
|
+
this._minSize$.setValue(
|
|
1897
|
+
{ width: minWidth, height: this.minHeight },
|
|
1898
|
+
skipUpdate
|
|
1899
|
+
);
|
|
1867
1900
|
return this;
|
|
1868
1901
|
}
|
|
1869
1902
|
setMinHeight(minHeight, skipUpdate = false) {
|
|
1870
|
-
this._minSize$.setValue(
|
|
1903
|
+
this._minSize$.setValue(
|
|
1904
|
+
{ width: this.minWidth, height: minHeight },
|
|
1905
|
+
skipUpdate
|
|
1906
|
+
);
|
|
1871
1907
|
return this;
|
|
1872
1908
|
}
|
|
1873
1909
|
get intrinsicWidth() {
|
|
@@ -1928,14 +1964,20 @@ class TeleBox {
|
|
|
1928
1964
|
height = this.intrinsicHeight;
|
|
1929
1965
|
}
|
|
1930
1966
|
}
|
|
1931
|
-
this._intrinsicCoord$.setValue(
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1967
|
+
this._intrinsicCoord$.setValue(
|
|
1968
|
+
{
|
|
1969
|
+
x: width >= this.minWidth ? x : this.intrinsicX,
|
|
1970
|
+
y: height >= this.minHeight ? y : this.intrinsicY
|
|
1971
|
+
},
|
|
1972
|
+
skipUpdate
|
|
1973
|
+
);
|
|
1974
|
+
this._intrinsicSize$.setValue(
|
|
1975
|
+
{
|
|
1976
|
+
width: clamp(width, this.minWidth, 1),
|
|
1977
|
+
height: clamp(height, this.minHeight, 1)
|
|
1978
|
+
},
|
|
1979
|
+
skipUpdate
|
|
1980
|
+
);
|
|
1939
1981
|
return this;
|
|
1940
1982
|
}
|
|
1941
1983
|
mount(container) {
|
|
@@ -2011,33 +2053,52 @@ class TeleBox {
|
|
|
2011
2053
|
bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
|
|
2012
2054
|
bindClassName(this.$box, this._focus$, "blur", isFalsy);
|
|
2013
2055
|
bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
|
|
2014
|
-
bindClassName(
|
|
2056
|
+
bindClassName(
|
|
2057
|
+
this.$box,
|
|
2058
|
+
this._darkMode$,
|
|
2059
|
+
"color-scheme-light",
|
|
2060
|
+
isFalsy
|
|
2061
|
+
);
|
|
2015
2062
|
this._renderSideEffect.add(() => {
|
|
2016
2063
|
const minimizedClassName = this.wrapClassName("minimized");
|
|
2017
2064
|
const maximizedClassName = this.wrapClassName("maximized");
|
|
2018
2065
|
const MAXIMIZED_TIMER_ID = "box-maximized-timer";
|
|
2019
2066
|
return this._state$.subscribe((state) => {
|
|
2020
|
-
this.$box.classList.toggle(
|
|
2021
|
-
|
|
2067
|
+
this.$box.classList.toggle(
|
|
2068
|
+
minimizedClassName,
|
|
2069
|
+
state === TELE_BOX_STATE.Minimized
|
|
2070
|
+
);
|
|
2071
|
+
if (state === TELE_BOX_STATE.Maximized) {
|
|
2022
2072
|
this._renderSideEffect.flush(MAXIMIZED_TIMER_ID);
|
|
2023
2073
|
this.$box.classList.toggle(maximizedClassName, true);
|
|
2024
2074
|
} else {
|
|
2025
|
-
this._renderSideEffect.setTimeout(
|
|
2026
|
-
|
|
2027
|
-
|
|
2075
|
+
this._renderSideEffect.setTimeout(
|
|
2076
|
+
() => {
|
|
2077
|
+
this.$box.classList.toggle(
|
|
2078
|
+
maximizedClassName,
|
|
2079
|
+
false
|
|
2080
|
+
);
|
|
2081
|
+
},
|
|
2082
|
+
0,
|
|
2083
|
+
MAXIMIZED_TIMER_ID
|
|
2084
|
+
);
|
|
2028
2085
|
}
|
|
2029
2086
|
});
|
|
2030
2087
|
});
|
|
2031
|
-
this._renderSideEffect.add(
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2088
|
+
this._renderSideEffect.add(
|
|
2089
|
+
() => this._visible$.subscribe((visible) => {
|
|
2090
|
+
if (visible) {
|
|
2091
|
+
this.$box.style.removeProperty("display");
|
|
2092
|
+
} else {
|
|
2093
|
+
this.$box.style.display = "none";
|
|
2094
|
+
}
|
|
2095
|
+
})
|
|
2096
|
+
);
|
|
2097
|
+
this._renderSideEffect.add(
|
|
2098
|
+
() => this._zIndex$.subscribe((zIndex) => {
|
|
2099
|
+
this.$box.style.zIndex = String(zIndex);
|
|
2100
|
+
})
|
|
2101
|
+
);
|
|
2041
2102
|
const boxStyler = index(this.$box);
|
|
2042
2103
|
this.$box.dataset.teleBoxID = this.id;
|
|
2043
2104
|
this.$box.style.width = this.absoluteWidth + "px";
|
|
@@ -2045,25 +2106,29 @@ class TeleBox {
|
|
|
2045
2106
|
const translateX = this.x * this.containerRect.width + this.containerRect.x;
|
|
2046
2107
|
const translateY = this.y * this.containerRect.height + this.containerRect.y;
|
|
2047
2108
|
this.$box.style.transform = `translate(${translateX - 10}px,${translateY - 10}px)`;
|
|
2048
|
-
this._valSideEffectBinder.combine(
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2109
|
+
this._valSideEffectBinder.combine(
|
|
2110
|
+
[
|
|
2111
|
+
this._coord$,
|
|
2112
|
+
this._size$,
|
|
2113
|
+
this._minimized$,
|
|
2114
|
+
this._containerRect$,
|
|
2115
|
+
this._collectorRect$,
|
|
2116
|
+
this._boxStatus$
|
|
2117
|
+
],
|
|
2118
|
+
([coord, size, minimized, containerRect, collectorRect, boxStatus]) => {
|
|
2119
|
+
const absoluteWidth = size.width * containerRect.width;
|
|
2120
|
+
const absoluteHeight = size.height * containerRect.height;
|
|
2121
|
+
return {
|
|
2122
|
+
width: absoluteWidth + ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
|
|
2123
|
+
height: absoluteHeight + ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
|
|
2124
|
+
x: coord.x * containerRect.width,
|
|
2125
|
+
y: coord.y * containerRect.height,
|
|
2126
|
+
scaleX: (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? collectorRect.width / absoluteWidth : 1,
|
|
2127
|
+
scaleY: (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? collectorRect.height / absoluteHeight : 1
|
|
2128
|
+
};
|
|
2129
|
+
},
|
|
2130
|
+
shallowequal
|
|
2131
|
+
).subscribe((styles) => {
|
|
2067
2132
|
boxStyler.set(styles);
|
|
2068
2133
|
});
|
|
2069
2134
|
boxStyler.set({ x: translateX, y: translateY });
|
|
@@ -2128,7 +2193,7 @@ class TeleBox {
|
|
|
2128
2193
|
_renderResizeHandlers() {
|
|
2129
2194
|
const $resizeHandles = document.createElement("div");
|
|
2130
2195
|
$resizeHandles.className = this.wrapClassName("resize-handles");
|
|
2131
|
-
Object.values(
|
|
2196
|
+
Object.values(TELE_BOX_RESIZE_HANDLE).forEach((handleType) => {
|
|
2132
2197
|
const $handle = document.createElement("div");
|
|
2133
2198
|
$handle.className = this.wrapClassName(handleType) + " " + this.wrapClassName("resize-handle");
|
|
2134
2199
|
$handle.dataset.teleBoxHandle = handleType;
|
|
@@ -2146,7 +2211,7 @@ class TeleBox {
|
|
|
2146
2211
|
let trackStartPageY = 0;
|
|
2147
2212
|
let trackingHandle;
|
|
2148
2213
|
const handleTracking = (ev) => {
|
|
2149
|
-
if (this.state !==
|
|
2214
|
+
if (this.state !== TELE_BOX_STATE.Normal) {
|
|
2150
2215
|
return;
|
|
2151
2216
|
}
|
|
2152
2217
|
preventEvent(ev);
|
|
@@ -2157,45 +2222,95 @@ class TeleBox {
|
|
|
2157
2222
|
const offsetX = (pageX - trackStartPageX) / this.containerRect.width;
|
|
2158
2223
|
const offsetY = (pageY - trackStartPageY) / this.containerRect.height;
|
|
2159
2224
|
switch (trackingHandle) {
|
|
2160
|
-
case
|
|
2161
|
-
this.transform(
|
|
2225
|
+
case TELE_BOX_RESIZE_HANDLE.North: {
|
|
2226
|
+
this.transform(
|
|
2227
|
+
this.x,
|
|
2228
|
+
trackStartY + offsetY,
|
|
2229
|
+
this.width,
|
|
2230
|
+
trackStartHeight - offsetY
|
|
2231
|
+
);
|
|
2162
2232
|
break;
|
|
2163
2233
|
}
|
|
2164
|
-
case
|
|
2165
|
-
this.transform(
|
|
2234
|
+
case TELE_BOX_RESIZE_HANDLE.South: {
|
|
2235
|
+
this.transform(
|
|
2236
|
+
this.x,
|
|
2237
|
+
this.y,
|
|
2238
|
+
this.width,
|
|
2239
|
+
trackStartHeight + offsetY
|
|
2240
|
+
);
|
|
2166
2241
|
break;
|
|
2167
2242
|
}
|
|
2168
|
-
case
|
|
2169
|
-
this.transform(
|
|
2243
|
+
case TELE_BOX_RESIZE_HANDLE.West: {
|
|
2244
|
+
this.transform(
|
|
2245
|
+
trackStartX + offsetX,
|
|
2246
|
+
this.y,
|
|
2247
|
+
trackStartWidth - offsetX,
|
|
2248
|
+
this.height
|
|
2249
|
+
);
|
|
2170
2250
|
break;
|
|
2171
2251
|
}
|
|
2172
|
-
case
|
|
2173
|
-
this.transform(
|
|
2252
|
+
case TELE_BOX_RESIZE_HANDLE.East: {
|
|
2253
|
+
this.transform(
|
|
2254
|
+
this.x,
|
|
2255
|
+
this.y,
|
|
2256
|
+
trackStartWidth + offsetX,
|
|
2257
|
+
this.height
|
|
2258
|
+
);
|
|
2174
2259
|
break;
|
|
2175
2260
|
}
|
|
2176
|
-
case
|
|
2177
|
-
this.transform(
|
|
2261
|
+
case TELE_BOX_RESIZE_HANDLE.NorthWest: {
|
|
2262
|
+
this.transform(
|
|
2263
|
+
trackStartX + offsetX,
|
|
2264
|
+
trackStartY + offsetY,
|
|
2265
|
+
trackStartWidth - offsetX,
|
|
2266
|
+
trackStartHeight - offsetY
|
|
2267
|
+
);
|
|
2178
2268
|
break;
|
|
2179
2269
|
}
|
|
2180
|
-
case
|
|
2181
|
-
this.transform(
|
|
2270
|
+
case TELE_BOX_RESIZE_HANDLE.NorthEast: {
|
|
2271
|
+
this.transform(
|
|
2272
|
+
this.x,
|
|
2273
|
+
trackStartY + offsetY,
|
|
2274
|
+
trackStartWidth + offsetX,
|
|
2275
|
+
trackStartHeight - offsetY
|
|
2276
|
+
);
|
|
2182
2277
|
break;
|
|
2183
2278
|
}
|
|
2184
|
-
case
|
|
2185
|
-
this.transform(
|
|
2279
|
+
case TELE_BOX_RESIZE_HANDLE.SouthEast: {
|
|
2280
|
+
this.transform(
|
|
2281
|
+
this.x,
|
|
2282
|
+
this.y,
|
|
2283
|
+
trackStartWidth + offsetX,
|
|
2284
|
+
trackStartHeight + offsetY
|
|
2285
|
+
);
|
|
2186
2286
|
break;
|
|
2187
2287
|
}
|
|
2188
|
-
case
|
|
2189
|
-
this.transform(
|
|
2288
|
+
case TELE_BOX_RESIZE_HANDLE.SouthWest: {
|
|
2289
|
+
this.transform(
|
|
2290
|
+
trackStartX + offsetX,
|
|
2291
|
+
this.y,
|
|
2292
|
+
trackStartWidth - offsetX,
|
|
2293
|
+
trackStartHeight + offsetY
|
|
2294
|
+
);
|
|
2190
2295
|
break;
|
|
2191
2296
|
}
|
|
2192
2297
|
default: {
|
|
2193
2298
|
if (this.fence) {
|
|
2194
|
-
this.move(
|
|
2299
|
+
this.move(
|
|
2300
|
+
clamp(trackStartX + offsetX, 0, 1 - this.width),
|
|
2301
|
+
clamp(trackStartY + offsetY, 0, 1 - this.height)
|
|
2302
|
+
);
|
|
2195
2303
|
} else {
|
|
2196
2304
|
const xOverflowOffset = 20 / this.containerRect.width;
|
|
2197
2305
|
const yOverflowOffset = 20 / this.containerRect.height;
|
|
2198
|
-
this.move(
|
|
2306
|
+
this.move(
|
|
2307
|
+
clamp(
|
|
2308
|
+
trackStartX + offsetX,
|
|
2309
|
+
xOverflowOffset - this.width,
|
|
2310
|
+
1 - xOverflowOffset
|
|
2311
|
+
),
|
|
2312
|
+
clamp(trackStartY + offsetY, 0, 1 - yOverflowOffset)
|
|
2313
|
+
);
|
|
2199
2314
|
}
|
|
2200
2315
|
break;
|
|
2201
2316
|
}
|
|
@@ -2219,7 +2334,7 @@ class TeleBox {
|
|
|
2219
2334
|
if (ev.button != null && ev.button !== 0) {
|
|
2220
2335
|
return;
|
|
2221
2336
|
}
|
|
2222
|
-
if (!this.draggable || trackingHandle || this.state !==
|
|
2337
|
+
if (!this.draggable || trackingHandle || this.state !== TELE_BOX_STATE.Normal) {
|
|
2223
2338
|
return;
|
|
2224
2339
|
}
|
|
2225
2340
|
const target = ev.target;
|
|
@@ -2235,7 +2350,9 @@ class TeleBox {
|
|
|
2235
2350
|
$trackMask = document.createElement("div");
|
|
2236
2351
|
}
|
|
2237
2352
|
const cursor = trackingHandle ? this.wrapClassName(`cursor-${trackingHandle}`) : "";
|
|
2238
|
-
$trackMask.className = this.wrapClassName(
|
|
2353
|
+
$trackMask.className = this.wrapClassName(
|
|
2354
|
+
`track-mask${cursor ? ` ${cursor}` : ""}`
|
|
2355
|
+
);
|
|
2239
2356
|
this.$box.appendChild($trackMask);
|
|
2240
2357
|
this.$box.classList.add(transformingClassName);
|
|
2241
2358
|
this._sideEffect.add(() => {
|
|
@@ -2255,18 +2372,33 @@ class TeleBox {
|
|
|
2255
2372
|
window.removeEventListener("touchmove", handleTracking);
|
|
2256
2373
|
window.removeEventListener("mouseup", handleTrackEnd);
|
|
2257
2374
|
window.removeEventListener("touchend", handleTrackEnd);
|
|
2258
|
-
window.removeEventListener(
|
|
2375
|
+
window.removeEventListener(
|
|
2376
|
+
"touchcancel",
|
|
2377
|
+
handleTrackEnd
|
|
2378
|
+
);
|
|
2259
2379
|
};
|
|
2260
2380
|
}, TRACKING_DISPOSER_ID);
|
|
2261
2381
|
}
|
|
2262
2382
|
};
|
|
2263
2383
|
this._handleTrackStart = handleTrackStart;
|
|
2264
|
-
this._sideEffect.addEventListener(
|
|
2265
|
-
|
|
2384
|
+
this._sideEffect.addEventListener(
|
|
2385
|
+
$resizeHandles,
|
|
2386
|
+
"mousedown",
|
|
2387
|
+
handleTrackStart,
|
|
2388
|
+
{},
|
|
2389
|
+
"box-resizeHandles-mousedown"
|
|
2390
|
+
);
|
|
2391
|
+
this._sideEffect.addEventListener(
|
|
2392
|
+
$resizeHandles,
|
|
2393
|
+
"touchstart",
|
|
2394
|
+
handleTrackStart,
|
|
2395
|
+
{ passive: false },
|
|
2396
|
+
"box-resizeHandles-touchstart"
|
|
2397
|
+
);
|
|
2266
2398
|
}
|
|
2267
2399
|
destroy() {
|
|
2268
2400
|
this.$box.remove();
|
|
2269
|
-
this.events.emit(
|
|
2401
|
+
this.events.emit(TELE_BOX_EVENT.Destroyed);
|
|
2270
2402
|
this._sideEffect.flushAll();
|
|
2271
2403
|
this._renderSideEffect.flushAll();
|
|
2272
2404
|
this.events.removeAllListeners();
|
|
@@ -2279,7 +2411,7 @@ class TeleBox {
|
|
|
2279
2411
|
function noop() {
|
|
2280
2412
|
return;
|
|
2281
2413
|
}
|
|
2282
|
-
var style$2 = "
|
|
2414
|
+
var style$2 = "";
|
|
2283
2415
|
var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
|
|
2284
2416
|
class TeleBoxCollector {
|
|
2285
2417
|
constructor({
|
|
@@ -2332,7 +2464,7 @@ class TeleBoxCollector {
|
|
|
2332
2464
|
const boxesStatus = this.boxesStatus;
|
|
2333
2465
|
if (boxesStatus) {
|
|
2334
2466
|
for (const status of boxesStatus.values()) {
|
|
2335
|
-
if (status ===
|
|
2467
|
+
if (status === TELE_BOX_STATE.Minimized) {
|
|
2336
2468
|
return true;
|
|
2337
2469
|
}
|
|
2338
2470
|
}
|
|
@@ -2347,7 +2479,10 @@ class TeleBoxCollector {
|
|
|
2347
2479
|
if (this._visible !== visible) {
|
|
2348
2480
|
this._visible = visible;
|
|
2349
2481
|
if (this.$collector) {
|
|
2350
|
-
this.$collector.classList.toggle(
|
|
2482
|
+
this.$collector.classList.toggle(
|
|
2483
|
+
this.wrapClassName("collector-visible"),
|
|
2484
|
+
visible
|
|
2485
|
+
);
|
|
2351
2486
|
}
|
|
2352
2487
|
}
|
|
2353
2488
|
return this;
|
|
@@ -2356,7 +2491,10 @@ class TeleBoxCollector {
|
|
|
2356
2491
|
if (this._readonly !== readonly) {
|
|
2357
2492
|
this._readonly = readonly;
|
|
2358
2493
|
if (this.$collector) {
|
|
2359
|
-
this.$collector.classList.toggle(
|
|
2494
|
+
this.$collector.classList.toggle(
|
|
2495
|
+
this.wrapClassName("collector-readonly"),
|
|
2496
|
+
readonly
|
|
2497
|
+
);
|
|
2360
2498
|
}
|
|
2361
2499
|
}
|
|
2362
2500
|
return this;
|
|
@@ -2365,8 +2503,14 @@ class TeleBoxCollector {
|
|
|
2365
2503
|
if (this._darkMode !== darkMode) {
|
|
2366
2504
|
this._darkMode = darkMode;
|
|
2367
2505
|
if (this.$collector) {
|
|
2368
|
-
this.$collector.classList.toggle(
|
|
2369
|
-
|
|
2506
|
+
this.$collector.classList.toggle(
|
|
2507
|
+
this.wrapClassName("color-scheme-dark"),
|
|
2508
|
+
darkMode
|
|
2509
|
+
);
|
|
2510
|
+
this.$collector.classList.toggle(
|
|
2511
|
+
this.wrapClassName("color-scheme-light"),
|
|
2512
|
+
!darkMode
|
|
2513
|
+
);
|
|
2370
2514
|
}
|
|
2371
2515
|
}
|
|
2372
2516
|
return this;
|
|
@@ -2389,14 +2533,25 @@ class TeleBoxCollector {
|
|
|
2389
2533
|
this.$collector = document.createElement("button");
|
|
2390
2534
|
this.$collector.className = this.wrapClassName("collector");
|
|
2391
2535
|
this.$collector.style.backgroundImage = `url('${collectorSVG}')`;
|
|
2392
|
-
this.$collector.addEventListener(
|
|
2536
|
+
this.$collector.addEventListener(
|
|
2537
|
+
"click",
|
|
2538
|
+
this.handleCollectorClick
|
|
2539
|
+
);
|
|
2393
2540
|
if (this._visible) {
|
|
2394
|
-
this.$collector.classList.add(
|
|
2541
|
+
this.$collector.classList.add(
|
|
2542
|
+
this.wrapClassName("collector-visible")
|
|
2543
|
+
);
|
|
2395
2544
|
}
|
|
2396
2545
|
if (this._readonly) {
|
|
2397
|
-
this.$collector.classList.add(
|
|
2398
|
-
|
|
2399
|
-
|
|
2546
|
+
this.$collector.classList.add(
|
|
2547
|
+
this.wrapClassName("collector-readonly")
|
|
2548
|
+
);
|
|
2549
|
+
}
|
|
2550
|
+
this.$collector.classList.add(
|
|
2551
|
+
this.wrapClassName(
|
|
2552
|
+
this._darkMode ? "color-scheme-dark" : "color-scheme-light"
|
|
2553
|
+
)
|
|
2554
|
+
);
|
|
2400
2555
|
this.$appMenuContainer.classList.add(this.wrapClassName("collector-shadow"));
|
|
2401
2556
|
this.$collector.append(this.$appMenuContainer);
|
|
2402
2557
|
this.setStyles(this.styles);
|
|
@@ -2405,7 +2560,10 @@ class TeleBoxCollector {
|
|
|
2405
2560
|
}
|
|
2406
2561
|
destroy() {
|
|
2407
2562
|
if (this.$collector) {
|
|
2408
|
-
this.$collector.removeEventListener(
|
|
2563
|
+
this.$collector.removeEventListener(
|
|
2564
|
+
"click",
|
|
2565
|
+
this.handleCollectorClick
|
|
2566
|
+
);
|
|
2409
2567
|
this.$collector.remove();
|
|
2410
2568
|
this.$collector = void 0;
|
|
2411
2569
|
}
|
|
@@ -2415,8 +2573,7 @@ class TeleBoxCollector {
|
|
|
2415
2573
|
return `${this.namespace}-${className}`;
|
|
2416
2574
|
}
|
|
2417
2575
|
}
|
|
2418
|
-
|
|
2419
|
-
(function(TELE_BOX_MANAGER_EVENT2) {
|
|
2576
|
+
var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
|
|
2420
2577
|
TELE_BOX_MANAGER_EVENT2["Focused"] = "focused";
|
|
2421
2578
|
TELE_BOX_MANAGER_EVENT2["Blurred"] = "blurred";
|
|
2422
2579
|
TELE_BOX_MANAGER_EVENT2["Created"] = "created";
|
|
@@ -2434,8 +2591,9 @@ exports.TELE_BOX_MANAGER_EVENT = void 0;
|
|
|
2434
2591
|
TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
|
|
2435
2592
|
TELE_BOX_MANAGER_EVENT2["BoxStatus"] = "box_status";
|
|
2436
2593
|
TELE_BOX_MANAGER_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
|
|
2437
|
-
|
|
2438
|
-
|
|
2594
|
+
return TELE_BOX_MANAGER_EVENT2;
|
|
2595
|
+
})(TELE_BOX_MANAGER_EVENT || {});
|
|
2596
|
+
var style$1 = "";
|
|
2439
2597
|
class MaxTitleBar extends DefaultTitleBar {
|
|
2440
2598
|
constructor(config) {
|
|
2441
2599
|
super(config);
|
|
@@ -2453,7 +2611,7 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2453
2611
|
if (this.getBoxesStatus) {
|
|
2454
2612
|
const boxesStatus = this.getBoxesStatus();
|
|
2455
2613
|
if (boxesStatus.size) {
|
|
2456
|
-
const hasMaximizedBox = [...boxesStatus.values()].find((state) => state ===
|
|
2614
|
+
const hasMaximizedBox = [...boxesStatus.values()].find((state) => state === TELE_BOX_STATE.Maximized);
|
|
2457
2615
|
return !!hasMaximizedBox;
|
|
2458
2616
|
}
|
|
2459
2617
|
}
|
|
@@ -2463,7 +2621,7 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2463
2621
|
if (this.getBoxesStatus) {
|
|
2464
2622
|
const boxesStatus = this.getBoxesStatus();
|
|
2465
2623
|
if (boxesStatus) {
|
|
2466
|
-
return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) ===
|
|
2624
|
+
return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
|
|
2467
2625
|
}
|
|
2468
2626
|
}
|
|
2469
2627
|
return [];
|
|
@@ -2475,15 +2633,21 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2475
2633
|
}
|
|
2476
2634
|
if (this.$titles) {
|
|
2477
2635
|
const { children } = this.$titles.firstElementChild;
|
|
2478
|
-
if (this.state ===
|
|
2636
|
+
if (this.state === TELE_BOX_STATE.Maximized && !this.hasMaximizedBoxInStatus()) {
|
|
2479
2637
|
for (let i2 = children.length - 1; i2 >= 0; i2 -= 1) {
|
|
2480
2638
|
const $tab = children[i2];
|
|
2481
2639
|
const id = (_a = $tab.dataset) == null ? void 0 : _a.teleBoxID;
|
|
2482
2640
|
if (id) {
|
|
2483
2641
|
if (box && id === box.id) {
|
|
2484
|
-
$tab.classList.toggle(
|
|
2642
|
+
$tab.classList.toggle(
|
|
2643
|
+
this.wrapClassName("titles-tab-focus"),
|
|
2644
|
+
true
|
|
2645
|
+
);
|
|
2485
2646
|
} else if (this.focusedBox && id === this.focusedBox.id) {
|
|
2486
|
-
$tab.classList.toggle(
|
|
2647
|
+
$tab.classList.toggle(
|
|
2648
|
+
this.wrapClassName("titles-tab-focus"),
|
|
2649
|
+
false
|
|
2650
|
+
);
|
|
2487
2651
|
}
|
|
2488
2652
|
}
|
|
2489
2653
|
}
|
|
@@ -2493,9 +2657,15 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2493
2657
|
const id = (_b = $tab.dataset) == null ? void 0 : _b.teleBoxID;
|
|
2494
2658
|
if (id) {
|
|
2495
2659
|
if (box && id === box.id) {
|
|
2496
|
-
$tab.classList.toggle(
|
|
2660
|
+
$tab.classList.toggle(
|
|
2661
|
+
this.wrapClassName("titles-tab-focus"),
|
|
2662
|
+
true
|
|
2663
|
+
);
|
|
2497
2664
|
} else if (this.focusedBox && id === this.focusedBox.id) {
|
|
2498
|
-
$tab.classList.toggle(
|
|
2665
|
+
$tab.classList.toggle(
|
|
2666
|
+
this.wrapClassName("titles-tab-focus"),
|
|
2667
|
+
false
|
|
2668
|
+
);
|
|
2499
2669
|
}
|
|
2500
2670
|
}
|
|
2501
2671
|
}
|
|
@@ -2513,39 +2683,57 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2513
2683
|
}
|
|
2514
2684
|
updateBoxesStatus() {
|
|
2515
2685
|
if (this.hasMaximizedBoxInStatus()) {
|
|
2516
|
-
this.setBoxStatus(
|
|
2686
|
+
this.setBoxStatus(TELE_BOX_STATE.Maximized);
|
|
2517
2687
|
}
|
|
2518
2688
|
if (this.$titleBar) {
|
|
2519
|
-
this.$titleBar.classList.toggle(
|
|
2689
|
+
this.$titleBar.classList.toggle(
|
|
2690
|
+
this.wrapClassName("max-titlebar-maximized"),
|
|
2691
|
+
this.state === TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus()
|
|
2692
|
+
);
|
|
2520
2693
|
}
|
|
2521
2694
|
this.updateTitles();
|
|
2522
2695
|
}
|
|
2523
2696
|
setBoxes(boxes) {
|
|
2524
2697
|
this.boxes = boxes;
|
|
2525
2698
|
if (this.$titleBar) {
|
|
2526
|
-
this.$titleBar.classList.toggle(
|
|
2699
|
+
this.$titleBar.classList.toggle(
|
|
2700
|
+
this.wrapClassName("max-titlebar-maximized"),
|
|
2701
|
+
this.state === TELE_BOX_STATE.Maximized && boxes.length > 0 || this.hasMaximizedBoxInStatus()
|
|
2702
|
+
);
|
|
2527
2703
|
}
|
|
2528
2704
|
this.updateTitles();
|
|
2529
2705
|
}
|
|
2530
2706
|
setState(state) {
|
|
2531
2707
|
super.setState(state);
|
|
2532
2708
|
if (this.$titleBar) {
|
|
2533
|
-
this.$titleBar.classList.toggle(
|
|
2709
|
+
this.$titleBar.classList.toggle(
|
|
2710
|
+
this.wrapClassName("max-titlebar-maximized"),
|
|
2711
|
+
state === TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus()
|
|
2712
|
+
);
|
|
2534
2713
|
}
|
|
2535
2714
|
this.updateTitles();
|
|
2536
2715
|
}
|
|
2537
2716
|
setReadonly(readonly) {
|
|
2538
2717
|
super.setReadonly(readonly);
|
|
2539
2718
|
if (this.$titleBar) {
|
|
2540
|
-
this.$titleBar.classList.toggle(
|
|
2719
|
+
this.$titleBar.classList.toggle(
|
|
2720
|
+
this.wrapClassName("readonly"),
|
|
2721
|
+
this.readonly
|
|
2722
|
+
);
|
|
2541
2723
|
}
|
|
2542
2724
|
}
|
|
2543
2725
|
setDarkMode(darkMode) {
|
|
2544
2726
|
if (darkMode !== this.darkMode) {
|
|
2545
2727
|
this.darkMode = darkMode;
|
|
2546
2728
|
if (this.$titleBar) {
|
|
2547
|
-
this.$titleBar.classList.toggle(
|
|
2548
|
-
|
|
2729
|
+
this.$titleBar.classList.toggle(
|
|
2730
|
+
this.wrapClassName("color-scheme-dark"),
|
|
2731
|
+
darkMode
|
|
2732
|
+
);
|
|
2733
|
+
this.$titleBar.classList.toggle(
|
|
2734
|
+
this.wrapClassName("color-scheme-light"),
|
|
2735
|
+
!darkMode
|
|
2736
|
+
);
|
|
2549
2737
|
}
|
|
2550
2738
|
}
|
|
2551
2739
|
}
|
|
@@ -2555,9 +2743,19 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2555
2743
|
$titleBar.style.transform = `translate(${x}px, ${y}px)`;
|
|
2556
2744
|
$titleBar.style.width = width + "px";
|
|
2557
2745
|
$titleBar.classList.add(this.wrapClassName("max-titlebar"));
|
|
2558
|
-
$titleBar.classList.toggle(
|
|
2559
|
-
|
|
2560
|
-
|
|
2746
|
+
$titleBar.classList.toggle(
|
|
2747
|
+
this.wrapClassName("max-titlebar-maximized"),
|
|
2748
|
+
this.state === TELE_BOX_STATE.Maximized && this.boxes.length > 0
|
|
2749
|
+
);
|
|
2750
|
+
$titleBar.classList.toggle(
|
|
2751
|
+
this.wrapClassName("readonly"),
|
|
2752
|
+
this.readonly
|
|
2753
|
+
);
|
|
2754
|
+
$titleBar.classList.add(
|
|
2755
|
+
this.wrapClassName(
|
|
2756
|
+
this.darkMode ? "color-scheme-dark" : "color-scheme-light"
|
|
2757
|
+
)
|
|
2758
|
+
);
|
|
2561
2759
|
const $titlesArea = document.createElement("div");
|
|
2562
2760
|
$titlesArea.classList.add(this.wrapClassName("titles-area"));
|
|
2563
2761
|
$titleBar.insertBefore($titlesArea, $titleBar.firstElementChild);
|
|
@@ -2571,24 +2769,34 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2571
2769
|
this.focusedBox = void 0;
|
|
2572
2770
|
}
|
|
2573
2771
|
updateTitles() {
|
|
2574
|
-
if (this.$titleBar && (this.state ===
|
|
2575
|
-
this.$titleBar.classList.toggle(
|
|
2772
|
+
if (this.$titleBar && (this.state === TELE_BOX_STATE.Maximized || this.hasMaximizedBoxInStatus())) {
|
|
2773
|
+
this.$titleBar.classList.toggle(
|
|
2774
|
+
this.wrapClassName("max-titlebar-single-title"),
|
|
2775
|
+
this.boxes.length === 1 || this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1
|
|
2776
|
+
);
|
|
2576
2777
|
if (this.boxes.length === 1 || this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1) {
|
|
2577
2778
|
this.setTitle(this.boxes[0].title);
|
|
2578
2779
|
} else {
|
|
2579
|
-
this.$titleBar.replaceChild(
|
|
2780
|
+
this.$titleBar.replaceChild(
|
|
2781
|
+
this.renderTitles(),
|
|
2782
|
+
this.$titleBar.firstElementChild
|
|
2783
|
+
);
|
|
2580
2784
|
}
|
|
2581
2785
|
}
|
|
2582
2786
|
}
|
|
2583
2787
|
renderTitles() {
|
|
2584
2788
|
this.$titles = document.createElement("div");
|
|
2585
2789
|
this.$titles.className = this.wrapClassName("titles");
|
|
2586
|
-
this.$titles.addEventListener(
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2790
|
+
this.$titles.addEventListener(
|
|
2791
|
+
"wheel",
|
|
2792
|
+
(ev) => {
|
|
2793
|
+
ev.currentTarget.scrollBy({
|
|
2794
|
+
left: ev.deltaY > 0 ? 250 : -250,
|
|
2795
|
+
behavior: "smooth"
|
|
2796
|
+
});
|
|
2797
|
+
},
|
|
2798
|
+
{ passive: false }
|
|
2799
|
+
);
|
|
2592
2800
|
const $content = document.createElement("div");
|
|
2593
2801
|
$content.className = this.wrapClassName("titles-content");
|
|
2594
2802
|
this.$titles.appendChild($content);
|
|
@@ -2606,7 +2814,7 @@ class MaxTitleBar extends DefaultTitleBar {
|
|
|
2606
2814
|
return this.$titles;
|
|
2607
2815
|
}
|
|
2608
2816
|
}
|
|
2609
|
-
var style = "
|
|
2817
|
+
var style = "";
|
|
2610
2818
|
class AppMenu {
|
|
2611
2819
|
constructor(props) {
|
|
2612
2820
|
this.namespace = "telebox-app-menu";
|
|
@@ -2629,8 +2837,8 @@ class AppMenu {
|
|
|
2629
2837
|
const target = e2.target;
|
|
2630
2838
|
const id = target.getAttribute(`data-${this.c("app-id")}`);
|
|
2631
2839
|
if (id) {
|
|
2632
|
-
const lastNotMinimizedBoxStatus = this.manager.getLastNotMinimizedBoxStatus(id) ||
|
|
2633
|
-
const zIndex = (lastNotMinimizedBoxStatus ===
|
|
2840
|
+
const lastNotMinimizedBoxStatus = this.manager.getLastNotMinimizedBoxStatus(id) || TELE_BOX_STATE.Normal;
|
|
2841
|
+
const zIndex = (lastNotMinimizedBoxStatus === TELE_BOX_STATE.Maximized ? this.manager.getMaxMaximizedBoxZIndex() : this.manager.getMaxNormalBoxZIndex()) + 1;
|
|
2634
2842
|
this.manager.setBox(id, {
|
|
2635
2843
|
status: lastNotMinimizedBoxStatus,
|
|
2636
2844
|
zIndex
|
|
@@ -2657,12 +2865,12 @@ class AppMenu {
|
|
|
2657
2865
|
}
|
|
2658
2866
|
get boxesStatus() {
|
|
2659
2867
|
var _a;
|
|
2660
|
-
return ((_a = this.getBoxesStatus) == null ? void 0 : _a.call(this)) || new Map();
|
|
2868
|
+
return ((_a = this.getBoxesStatus) == null ? void 0 : _a.call(this)) || /* @__PURE__ */ new Map();
|
|
2661
2869
|
}
|
|
2662
2870
|
get minimizedBoxesStatus() {
|
|
2663
2871
|
const arr = [];
|
|
2664
2872
|
this.boxesStatus.forEach((status) => {
|
|
2665
|
-
if (status ===
|
|
2873
|
+
if (status === TELE_BOX_STATE.Minimized) {
|
|
2666
2874
|
arr.push(status);
|
|
2667
2875
|
}
|
|
2668
2876
|
});
|
|
@@ -2723,7 +2931,7 @@ class AppMenu {
|
|
|
2723
2931
|
class TeleBoxManager {
|
|
2724
2932
|
constructor({
|
|
2725
2933
|
root = document.body,
|
|
2726
|
-
prefersColorScheme =
|
|
2934
|
+
prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
|
|
2727
2935
|
minimized = false,
|
|
2728
2936
|
maximized = false,
|
|
2729
2937
|
fence = true,
|
|
@@ -2750,7 +2958,7 @@ class TeleBoxManager {
|
|
|
2750
2958
|
console.log("topBox===>topBox$===>000");
|
|
2751
2959
|
let currentTopBox = void 0;
|
|
2752
2960
|
const topBox = boxes.reduce((topBox2, box) => {
|
|
2753
|
-
if (box.boxStatus && box.boxStatus ===
|
|
2961
|
+
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
|
|
2754
2962
|
return topBox2;
|
|
2755
2963
|
}
|
|
2756
2964
|
if (!topBox2) {
|
|
@@ -2764,8 +2972,8 @@ class TeleBoxManager {
|
|
|
2764
2972
|
}
|
|
2765
2973
|
return;
|
|
2766
2974
|
});
|
|
2767
|
-
this.boxesStatus$ = new Map();
|
|
2768
|
-
this.lastNotMinimizedBoxesStatus$ = new Map();
|
|
2975
|
+
this.boxesStatus$ = /* @__PURE__ */ new Map();
|
|
2976
|
+
this.lastNotMinimizedBoxesStatus$ = /* @__PURE__ */ new Map();
|
|
2769
2977
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
|
|
2770
2978
|
const prefersDark$ = createVal(false);
|
|
2771
2979
|
if (prefersDark) {
|
|
@@ -2780,16 +2988,24 @@ class TeleBoxManager {
|
|
|
2780
2988
|
}
|
|
2781
2989
|
const prefersColorScheme$ = createVal(prefersColorScheme);
|
|
2782
2990
|
prefersColorScheme$.reaction((prefersColorScheme2, _, skipUpdate) => {
|
|
2783
|
-
this.boxes.forEach(
|
|
2991
|
+
this.boxes.forEach(
|
|
2992
|
+
(box) => box.setPrefersColorScheme(prefersColorScheme2, skipUpdate)
|
|
2993
|
+
);
|
|
2784
2994
|
if (!skipUpdate) {
|
|
2785
|
-
this.events.emit(
|
|
2995
|
+
this.events.emit(
|
|
2996
|
+
TELE_BOX_MANAGER_EVENT.PrefersColorScheme,
|
|
2997
|
+
prefersColorScheme2
|
|
2998
|
+
);
|
|
2786
2999
|
}
|
|
2787
3000
|
});
|
|
2788
|
-
this._darkMode$ = combine(
|
|
3001
|
+
this._darkMode$ = combine(
|
|
3002
|
+
[prefersDark$, prefersColorScheme$],
|
|
3003
|
+
([prefersDark2, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark2 : prefersColorScheme2 === "dark"
|
|
3004
|
+
);
|
|
2789
3005
|
this._darkMode$.reaction((darkMode, _, skipUpdate) => {
|
|
2790
3006
|
this.boxes.forEach((box) => box.setDarkMode(darkMode, skipUpdate));
|
|
2791
3007
|
if (!skipUpdate) {
|
|
2792
|
-
this.events.emit(
|
|
3008
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
|
|
2793
3009
|
}
|
|
2794
3010
|
});
|
|
2795
3011
|
const readonly$ = createVal(readonly);
|
|
@@ -2799,16 +3015,21 @@ class TeleBoxManager {
|
|
|
2799
3015
|
const minimized$ = createVal(minimized);
|
|
2800
3016
|
const maximized$ = createVal(maximized);
|
|
2801
3017
|
maximized$.reaction((maximized2, _, skipUpdate) => {
|
|
2802
|
-
this.boxes.forEach(
|
|
3018
|
+
this.boxes.forEach(
|
|
3019
|
+
(box) => box.setMaximized(maximized2, skipUpdate)
|
|
3020
|
+
);
|
|
2803
3021
|
if (!skipUpdate) {
|
|
2804
|
-
this.events.emit(
|
|
3022
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Maximized, maximized2);
|
|
2805
3023
|
}
|
|
2806
3024
|
});
|
|
2807
|
-
const state$ = combine(
|
|
3025
|
+
const state$ = combine(
|
|
3026
|
+
[minimized$, maximized$],
|
|
3027
|
+
([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal
|
|
3028
|
+
);
|
|
2808
3029
|
state$.reaction((state, _, skipUpdate) => {
|
|
2809
3030
|
this.maxTitleBar.setState(state);
|
|
2810
3031
|
if (!skipUpdate) {
|
|
2811
|
-
this.events.emit(
|
|
3032
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
|
|
2812
3033
|
}
|
|
2813
3034
|
});
|
|
2814
3035
|
const fence$ = createVal(fence);
|
|
@@ -2817,14 +3038,18 @@ class TeleBoxManager {
|
|
|
2817
3038
|
});
|
|
2818
3039
|
const containerRect$ = createVal(containerRect, shallowequal);
|
|
2819
3040
|
containerRect$.reaction((containerRect2, _, skipUpdate) => {
|
|
2820
|
-
this.boxes.forEach(
|
|
3041
|
+
this.boxes.forEach(
|
|
3042
|
+
(box) => box.setContainerRect(containerRect2, skipUpdate)
|
|
3043
|
+
);
|
|
2821
3044
|
this.maxTitleBar.setContainerRect(containerRect2);
|
|
2822
3045
|
});
|
|
2823
|
-
const collector$ = createVal(
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
3046
|
+
const collector$ = createVal(
|
|
3047
|
+
collector === null ? null : collector || new TeleBoxCollector({
|
|
3048
|
+
visible: minimized,
|
|
3049
|
+
readonly,
|
|
3050
|
+
namespace
|
|
3051
|
+
}).mount(root)
|
|
3052
|
+
);
|
|
2828
3053
|
collector$.subscribe((collector2) => {
|
|
2829
3054
|
if (collector2) {
|
|
2830
3055
|
collector2.setVisible(minimized$.value);
|
|
@@ -2847,10 +3072,12 @@ class TeleBoxManager {
|
|
|
2847
3072
|
}, "collect-onClick");
|
|
2848
3073
|
}
|
|
2849
3074
|
});
|
|
2850
|
-
readonly$.subscribe(
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
3075
|
+
readonly$.subscribe(
|
|
3076
|
+
(readonly2) => {
|
|
3077
|
+
var _a;
|
|
3078
|
+
return (_a = collector$.value) == null ? void 0 : _a.setReadonly(readonly2);
|
|
3079
|
+
}
|
|
3080
|
+
);
|
|
2854
3081
|
this._darkMode$.subscribe((darkMode) => {
|
|
2855
3082
|
var _a;
|
|
2856
3083
|
(_a = collector$.value) == null ? void 0 : _a.setDarkMode(darkMode);
|
|
@@ -2875,7 +3102,9 @@ class TeleBoxManager {
|
|
|
2875
3102
|
collectorRect$.setValue(collectorRect);
|
|
2876
3103
|
}
|
|
2877
3104
|
};
|
|
2878
|
-
const collectorRect$ = createVal(
|
|
3105
|
+
const collectorRect$ = createVal(
|
|
3106
|
+
minimized$.value ? this._calcCollectorRect() : void 0
|
|
3107
|
+
);
|
|
2879
3108
|
collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
|
|
2880
3109
|
this.boxes.forEach((box) => {
|
|
2881
3110
|
box.setCollectorRect(collectorRect, skipUpdate);
|
|
@@ -2887,9 +3116,11 @@ class TeleBoxManager {
|
|
|
2887
3116
|
if (minimized2) {
|
|
2888
3117
|
this._setCollectorRect(this._calcCollectorRect());
|
|
2889
3118
|
}
|
|
2890
|
-
this.boxes.forEach(
|
|
3119
|
+
this.boxes.forEach(
|
|
3120
|
+
(box) => box.setMinimized(minimized2, skipUpdate)
|
|
3121
|
+
);
|
|
2891
3122
|
if (!skipUpdate) {
|
|
2892
|
-
this.events.emit(
|
|
3123
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Minimized, minimized2);
|
|
2893
3124
|
}
|
|
2894
3125
|
});
|
|
2895
3126
|
const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
|
|
@@ -2913,14 +3144,14 @@ class TeleBoxManager {
|
|
|
2913
3144
|
if (!this.useBoxesStatus) {
|
|
2914
3145
|
this.makeBoxTop(box);
|
|
2915
3146
|
} else {
|
|
2916
|
-
if (box.boxStatus && box.boxStatus ===
|
|
3147
|
+
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
|
|
2917
3148
|
const maxNormalBoxZIndex = this.getMaxNormalBoxZIndex();
|
|
2918
3149
|
if (maxNormalBoxZIndex > box.zIndex) {
|
|
2919
3150
|
this.setBox(box, {
|
|
2920
3151
|
zIndex: maxNormalBoxZIndex + 1
|
|
2921
3152
|
}, false);
|
|
2922
3153
|
}
|
|
2923
|
-
} else if (box.boxStatus && box.boxStatus ===
|
|
3154
|
+
} else if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
|
|
2924
3155
|
const maxMaximizedBoxZIndex = this.getMaxMaximizedBoxZIndex();
|
|
2925
3156
|
if (maxMaximizedBoxZIndex > box.zIndex) {
|
|
2926
3157
|
this.setBox(box, {
|
|
@@ -2937,8 +3168,18 @@ class TeleBoxManager {
|
|
|
2937
3168
|
}
|
|
2938
3169
|
}
|
|
2939
3170
|
};
|
|
2940
|
-
this._sideEffect.addEventListener(
|
|
2941
|
-
|
|
3171
|
+
this._sideEffect.addEventListener(
|
|
3172
|
+
window,
|
|
3173
|
+
"mousedown",
|
|
3174
|
+
checkFocusBox,
|
|
3175
|
+
true
|
|
3176
|
+
);
|
|
3177
|
+
this._sideEffect.addEventListener(
|
|
3178
|
+
window,
|
|
3179
|
+
"touchstart",
|
|
3180
|
+
checkFocusBox,
|
|
3181
|
+
true
|
|
3182
|
+
);
|
|
2942
3183
|
this.maxTitleBar = new MaxTitleBar({
|
|
2943
3184
|
darkMode: this.darkMode,
|
|
2944
3185
|
readonly: readonly$.value,
|
|
@@ -2951,7 +3192,7 @@ class TeleBoxManager {
|
|
|
2951
3192
|
},
|
|
2952
3193
|
onEvent: (event) => {
|
|
2953
3194
|
switch (event.type) {
|
|
2954
|
-
case
|
|
3195
|
+
case TELE_BOX_DELEGATE_EVENT.Maximize: {
|
|
2955
3196
|
if (this.hasBoxesStatus()) {
|
|
2956
3197
|
let targetBox = this.maxTitleBar.focusedBox;
|
|
2957
3198
|
if (!targetBox) {
|
|
@@ -2961,7 +3202,7 @@ class TeleBoxManager {
|
|
|
2961
3202
|
const box = this.getBox(targetBox.id);
|
|
2962
3203
|
if (box) {
|
|
2963
3204
|
this.setBox(box, {
|
|
2964
|
-
status:
|
|
3205
|
+
status: TELE_BOX_STATE.Normal,
|
|
2965
3206
|
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
2966
3207
|
}, false, () => {
|
|
2967
3208
|
this.makeMaximizedTopBoxFocus();
|
|
@@ -2973,7 +3214,7 @@ class TeleBoxManager {
|
|
|
2973
3214
|
}
|
|
2974
3215
|
break;
|
|
2975
3216
|
}
|
|
2976
|
-
case
|
|
3217
|
+
case TELE_BOX_DELEGATE_EVENT.Minimize: {
|
|
2977
3218
|
if (this.hasBoxesStatus()) {
|
|
2978
3219
|
let targetBox = this.maxTitleBar.focusedBox;
|
|
2979
3220
|
if (!targetBox) {
|
|
@@ -2988,7 +3229,7 @@ class TeleBoxManager {
|
|
|
2988
3229
|
isFocusChanged = true;
|
|
2989
3230
|
}
|
|
2990
3231
|
this.setBox(box, {
|
|
2991
|
-
status:
|
|
3232
|
+
status: TELE_BOX_STATE.Minimized,
|
|
2992
3233
|
zIndex: -1
|
|
2993
3234
|
}, false);
|
|
2994
3235
|
if (isFocusChanged) {
|
|
@@ -3003,7 +3244,7 @@ class TeleBoxManager {
|
|
|
3003
3244
|
}
|
|
3004
3245
|
break;
|
|
3005
3246
|
}
|
|
3006
|
-
case
|
|
3247
|
+
case TELE_BOX_EVENT.Close: {
|
|
3007
3248
|
if (this.hasBoxesStatus()) {
|
|
3008
3249
|
let targetBox = this.maxTitleBar.focusedBox;
|
|
3009
3250
|
if (!targetBox) {
|
|
@@ -3034,7 +3275,9 @@ class TeleBoxManager {
|
|
|
3034
3275
|
}
|
|
3035
3276
|
}
|
|
3036
3277
|
});
|
|
3037
|
-
readonly$.subscribe(
|
|
3278
|
+
readonly$.subscribe(
|
|
3279
|
+
(readonly2) => this.maxTitleBar.setReadonly(readonly2)
|
|
3280
|
+
);
|
|
3038
3281
|
this._darkMode$.subscribe((darkMode) => {
|
|
3039
3282
|
this.maxTitleBar.setDarkMode(darkMode);
|
|
3040
3283
|
});
|
|
@@ -3072,12 +3315,12 @@ class TeleBoxManager {
|
|
|
3072
3315
|
}
|
|
3073
3316
|
setState(state, skipUpdate = false) {
|
|
3074
3317
|
switch (state) {
|
|
3075
|
-
case
|
|
3318
|
+
case TELE_BOX_STATE.Maximized: {
|
|
3076
3319
|
this.setMinimized(false, skipUpdate);
|
|
3077
3320
|
this.setMaximized(true, skipUpdate);
|
|
3078
3321
|
break;
|
|
3079
3322
|
}
|
|
3080
|
-
case
|
|
3323
|
+
case TELE_BOX_STATE.Minimized: {
|
|
3081
3324
|
this.setMinimized(true, skipUpdate);
|
|
3082
3325
|
this.setMaximized(false, skipUpdate);
|
|
3083
3326
|
break;
|
|
@@ -3094,9 +3337,9 @@ class TeleBoxManager {
|
|
|
3094
3337
|
if (boxStatus) {
|
|
3095
3338
|
const oldBoxStatus = this.boxesStatus$.get(boxId);
|
|
3096
3339
|
this.boxesStatus$.set(boxId, boxStatus);
|
|
3097
|
-
if (boxStatus ===
|
|
3340
|
+
if (boxStatus === TELE_BOX_STATE.Minimized && oldBoxStatus !== TELE_BOX_STATE.Minimized) {
|
|
3098
3341
|
this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
|
|
3099
|
-
} else if (oldBoxStatus ===
|
|
3342
|
+
} else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
|
|
3100
3343
|
this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
|
|
3101
3344
|
}
|
|
3102
3345
|
} else {
|
|
@@ -3104,7 +3347,7 @@ class TeleBoxManager {
|
|
|
3104
3347
|
this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
|
|
3105
3348
|
}
|
|
3106
3349
|
if (!skipUpdate) {
|
|
3107
|
-
this.events.emit(
|
|
3350
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
|
|
3108
3351
|
}
|
|
3109
3352
|
}
|
|
3110
3353
|
getBoxStatus(boxId) {
|
|
@@ -3116,10 +3359,13 @@ class TeleBoxManager {
|
|
|
3116
3359
|
get lastNotMinimizedBoxesStatus() {
|
|
3117
3360
|
return this.lastNotMinimizedBoxesStatus$;
|
|
3118
3361
|
}
|
|
3119
|
-
|
|
3362
|
+
setBoxesStatus(boxesStatus, skipUpdate = false) {
|
|
3120
3363
|
this.boxesStatus$ = boxesStatus;
|
|
3121
3364
|
this.effectBoxesStatusChange(skipUpdate);
|
|
3122
3365
|
}
|
|
3366
|
+
getBoxesStatus() {
|
|
3367
|
+
return this.boxesStatus$;
|
|
3368
|
+
}
|
|
3123
3369
|
effectBoxStatusChange() {
|
|
3124
3370
|
if (!this.useBoxesStatus) {
|
|
3125
3371
|
return;
|
|
@@ -3147,7 +3393,7 @@ class TeleBoxManager {
|
|
|
3147
3393
|
var _a;
|
|
3148
3394
|
const boxStatus = this.boxesStatus$.get(box.id);
|
|
3149
3395
|
if (boxStatus) {
|
|
3150
|
-
if (boxStatus !==
|
|
3396
|
+
if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
|
|
3151
3397
|
newTopBox = box;
|
|
3152
3398
|
}
|
|
3153
3399
|
box.setBoxStatus(boxStatus, skipUpdate);
|
|
@@ -3222,39 +3468,39 @@ class TeleBoxManager {
|
|
|
3222
3468
|
if (!this.useBoxesStatus) {
|
|
3223
3469
|
return false;
|
|
3224
3470
|
}
|
|
3225
|
-
return this.boxes.some((box) => box.boxStatus && box.boxStatus ===
|
|
3471
|
+
return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
|
|
3226
3472
|
}
|
|
3227
3473
|
getMinimizedBoxesStatus() {
|
|
3228
|
-
const minimizedBoxes = new Map();
|
|
3474
|
+
const minimizedBoxes = /* @__PURE__ */ new Map();
|
|
3229
3475
|
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3230
|
-
if (boxStatus ===
|
|
3476
|
+
if (boxStatus === TELE_BOX_STATE.Minimized) {
|
|
3231
3477
|
minimizedBoxes.set(boxId, boxStatus);
|
|
3232
3478
|
}
|
|
3233
3479
|
});
|
|
3234
3480
|
return minimizedBoxes;
|
|
3235
3481
|
}
|
|
3236
3482
|
getNotMinimizedBoxesStatus() {
|
|
3237
|
-
const notMinimizedBoxes = new Map();
|
|
3483
|
+
const notMinimizedBoxes = /* @__PURE__ */ new Map();
|
|
3238
3484
|
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3239
|
-
if (boxStatus !==
|
|
3485
|
+
if (boxStatus !== TELE_BOX_STATE.Minimized) {
|
|
3240
3486
|
notMinimizedBoxes.set(boxId, boxStatus);
|
|
3241
3487
|
}
|
|
3242
3488
|
});
|
|
3243
3489
|
return notMinimizedBoxes;
|
|
3244
3490
|
}
|
|
3245
3491
|
getAllMaximizedBoxesStatus() {
|
|
3246
|
-
const maximizedBoxes = new Map();
|
|
3492
|
+
const maximizedBoxes = /* @__PURE__ */ new Map();
|
|
3247
3493
|
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3248
|
-
if (boxStatus ===
|
|
3494
|
+
if (boxStatus === TELE_BOX_STATE.Maximized) {
|
|
3249
3495
|
maximizedBoxes.set(boxId, boxStatus);
|
|
3250
3496
|
}
|
|
3251
3497
|
});
|
|
3252
3498
|
return maximizedBoxes;
|
|
3253
3499
|
}
|
|
3254
3500
|
getAllNormalBoxesStatus() {
|
|
3255
|
-
const normalBoxes = new Map();
|
|
3501
|
+
const normalBoxes = /* @__PURE__ */ new Map();
|
|
3256
3502
|
this.boxesStatus$.forEach((boxStatus, boxId) => {
|
|
3257
|
-
if (boxStatus ===
|
|
3503
|
+
if (boxStatus === TELE_BOX_STATE.Normal) {
|
|
3258
3504
|
normalBoxes.set(boxId, boxStatus);
|
|
3259
3505
|
}
|
|
3260
3506
|
});
|
|
@@ -3270,7 +3516,7 @@ class TeleBoxManager {
|
|
|
3270
3516
|
this.lastNotMinimizedBoxesStatus$.delete(boxId);
|
|
3271
3517
|
}
|
|
3272
3518
|
if (!skipUpdate) {
|
|
3273
|
-
this.events.emit(
|
|
3519
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus: lastNotMinimizedBoxStatus });
|
|
3274
3520
|
}
|
|
3275
3521
|
}
|
|
3276
3522
|
setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus, skipUpdate = false) {
|
|
@@ -3345,7 +3591,7 @@ class TeleBoxManager {
|
|
|
3345
3591
|
return this.getUnabledBoxesStatusZIndex();
|
|
3346
3592
|
}
|
|
3347
3593
|
return this.boxes.reduce((maxZIndex, box) => {
|
|
3348
|
-
if (box.boxStatus && box.boxStatus ===
|
|
3594
|
+
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
|
|
3349
3595
|
return Math.max(maxZIndex, box.zIndex);
|
|
3350
3596
|
}
|
|
3351
3597
|
return maxZIndex;
|
|
@@ -3356,7 +3602,7 @@ class TeleBoxManager {
|
|
|
3356
3602
|
return this.getUnabledBoxesStatusZIndex();
|
|
3357
3603
|
}
|
|
3358
3604
|
return this.boxes.reduce((maxZIndex, box) => {
|
|
3359
|
-
if (box.boxStatus && box.boxStatus ===
|
|
3605
|
+
if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
|
|
3360
3606
|
return Math.max(maxZIndex, box.zIndex);
|
|
3361
3607
|
}
|
|
3362
3608
|
return maxZIndex;
|
|
@@ -3365,9 +3611,9 @@ class TeleBoxManager {
|
|
|
3365
3611
|
create(config = {}, smartPosition = true) {
|
|
3366
3612
|
var _a;
|
|
3367
3613
|
console.log("create===>", config, (_a = this.topBox) == null ? void 0 : _a.zIndex);
|
|
3368
|
-
const box = new TeleBox(
|
|
3369
|
-
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
3370
|
-
|
|
3614
|
+
const box = new TeleBox({
|
|
3615
|
+
zIndex: this.getMaxNormalBoxZIndex() + 1,
|
|
3616
|
+
...smartPosition ? this.smartPosition(config) : config,
|
|
3371
3617
|
darkMode: this.darkMode,
|
|
3372
3618
|
prefersColorScheme: this.prefersColorScheme,
|
|
3373
3619
|
maximized: this.maximized,
|
|
@@ -3377,7 +3623,7 @@ class TeleBoxManager {
|
|
|
3377
3623
|
containerRect: this.containerRect,
|
|
3378
3624
|
readonly: this.readonly,
|
|
3379
3625
|
collectorRect: this.collectorRect
|
|
3380
|
-
})
|
|
3626
|
+
});
|
|
3381
3627
|
box.mount(this.root);
|
|
3382
3628
|
this.boxes$.setValue([...this.boxes, box]);
|
|
3383
3629
|
if (box.boxStatus && this.useBoxesStatus) {
|
|
@@ -3392,19 +3638,19 @@ class TeleBoxManager {
|
|
|
3392
3638
|
this.makeBoxTop(box);
|
|
3393
3639
|
}
|
|
3394
3640
|
}
|
|
3395
|
-
box._delegateEvents.on(
|
|
3641
|
+
box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
|
|
3396
3642
|
if (this.useBoxesStatus && box.boxStatus) {
|
|
3397
|
-
if (box.boxStatus ===
|
|
3643
|
+
if (box.boxStatus === TELE_BOX_STATE.Maximized) {
|
|
3398
3644
|
this.setBox(box.id, {
|
|
3399
|
-
status:
|
|
3645
|
+
status: TELE_BOX_STATE.Normal,
|
|
3400
3646
|
zIndex: this.getMaxNormalBoxZIndex() + 1
|
|
3401
3647
|
}, false);
|
|
3402
3648
|
} else {
|
|
3403
|
-
[...this.boxes].filter((box2) => box2.boxStatus ===
|
|
3404
|
-
if (box2.boxStatus ===
|
|
3649
|
+
[...this.boxes].filter((box2) => box2.boxStatus === TELE_BOX_STATE.Normal).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
|
|
3650
|
+
if (box2.boxStatus === TELE_BOX_STATE.Normal) {
|
|
3405
3651
|
console.log("maximized===>", box2.id);
|
|
3406
3652
|
this.setBox(box2.id, {
|
|
3407
|
-
status:
|
|
3653
|
+
status: TELE_BOX_STATE.Maximized,
|
|
3408
3654
|
zIndex: this.getMaxMaximizedBoxZIndex() + 1
|
|
3409
3655
|
}, false);
|
|
3410
3656
|
}
|
|
@@ -3415,7 +3661,7 @@ class TeleBoxManager {
|
|
|
3415
3661
|
this.setMaximized(!this.maximized);
|
|
3416
3662
|
}
|
|
3417
3663
|
});
|
|
3418
|
-
box._delegateEvents.on(
|
|
3664
|
+
box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
|
|
3419
3665
|
var _a2;
|
|
3420
3666
|
if (box.boxStatus && this.useBoxesStatus) {
|
|
3421
3667
|
if (this.topBox === box) {
|
|
@@ -3424,7 +3670,7 @@ class TeleBoxManager {
|
|
|
3424
3670
|
}
|
|
3425
3671
|
}
|
|
3426
3672
|
this.setBox(box, {
|
|
3427
|
-
status:
|
|
3673
|
+
status: TELE_BOX_STATE.Minimized,
|
|
3428
3674
|
zIndex: -1
|
|
3429
3675
|
}, false, () => {
|
|
3430
3676
|
this.focusTopBox();
|
|
@@ -3433,33 +3679,33 @@ class TeleBoxManager {
|
|
|
3433
3679
|
this.setMinimized(true);
|
|
3434
3680
|
}
|
|
3435
3681
|
});
|
|
3436
|
-
box._delegateEvents.on(
|
|
3682
|
+
box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
|
|
3437
3683
|
this.remove(box);
|
|
3438
3684
|
this.focusTopBox();
|
|
3439
3685
|
});
|
|
3440
3686
|
box._coord$.reaction((_, __, skipUpdate) => {
|
|
3441
3687
|
if (!skipUpdate) {
|
|
3442
|
-
this.events.emit(
|
|
3688
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
|
|
3443
3689
|
}
|
|
3444
3690
|
});
|
|
3445
3691
|
box._size$.reaction((_, __, skipUpdate) => {
|
|
3446
3692
|
if (!skipUpdate) {
|
|
3447
|
-
this.events.emit(
|
|
3693
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
|
|
3448
3694
|
}
|
|
3449
3695
|
});
|
|
3450
3696
|
box._intrinsicCoord$.reaction((_, __, skipUpdate) => {
|
|
3451
3697
|
if (!skipUpdate) {
|
|
3452
|
-
this.events.emit(
|
|
3698
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
|
|
3453
3699
|
}
|
|
3454
3700
|
});
|
|
3455
3701
|
box._intrinsicSize$.reaction((_, __, skipUpdate) => {
|
|
3456
3702
|
if (!skipUpdate) {
|
|
3457
|
-
this.events.emit(
|
|
3703
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
|
|
3458
3704
|
}
|
|
3459
3705
|
});
|
|
3460
3706
|
box._visualSize$.reaction((_, __, skipUpdate) => {
|
|
3461
3707
|
if (!skipUpdate) {
|
|
3462
|
-
this.events.emit(
|
|
3708
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
|
|
3463
3709
|
}
|
|
3464
3710
|
});
|
|
3465
3711
|
box._zIndex$.reaction((_, __, skipUpdate) => {
|
|
@@ -3467,7 +3713,7 @@ class TeleBoxManager {
|
|
|
3467
3713
|
console.log("topBox===>_zIndex", this.boxes.map((box2) => ({ id: box2.id, zIndex: box2.zIndex, boxStatus: box2.boxStatus })));
|
|
3468
3714
|
let currentTopBox = void 0;
|
|
3469
3715
|
const topBox = this.boxes.reduce((topBox2, box2) => {
|
|
3470
|
-
if (box2.boxStatus && box2.boxStatus ===
|
|
3716
|
+
if (box2.boxStatus && box2.boxStatus === TELE_BOX_STATE.Minimized) {
|
|
3471
3717
|
return topBox2;
|
|
3472
3718
|
}
|
|
3473
3719
|
if (!topBox2) {
|
|
@@ -3480,10 +3726,10 @@ class TeleBoxManager {
|
|
|
3480
3726
|
this.topBox$.setValue(topBox);
|
|
3481
3727
|
}
|
|
3482
3728
|
if (!skipUpdate) {
|
|
3483
|
-
this.events.emit(
|
|
3729
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
|
|
3484
3730
|
}
|
|
3485
3731
|
});
|
|
3486
|
-
this.events.emit(
|
|
3732
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
|
|
3487
3733
|
return box;
|
|
3488
3734
|
}
|
|
3489
3735
|
query(config) {
|
|
@@ -3541,7 +3787,7 @@ class TeleBoxManager {
|
|
|
3541
3787
|
this.setMaximized(false);
|
|
3542
3788
|
this.setMinimized(false);
|
|
3543
3789
|
}
|
|
3544
|
-
this.events.emit(
|
|
3790
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
|
|
3545
3791
|
}
|
|
3546
3792
|
return deletedBoxes[0];
|
|
3547
3793
|
}
|
|
@@ -3564,7 +3810,7 @@ class TeleBoxManager {
|
|
|
3564
3810
|
this.setMaximized(false);
|
|
3565
3811
|
this.setMinimized(false);
|
|
3566
3812
|
}
|
|
3567
|
-
this.events.emit(
|
|
3813
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
|
|
3568
3814
|
}
|
|
3569
3815
|
return deletedBoxes;
|
|
3570
3816
|
}
|
|
@@ -3593,7 +3839,10 @@ class TeleBoxManager {
|
|
|
3593
3839
|
targetBox.setFocus(true, skipUpdate);
|
|
3594
3840
|
}
|
|
3595
3841
|
if (focusChanged && !skipUpdate) {
|
|
3596
|
-
this.events.emit(
|
|
3842
|
+
this.events.emit(
|
|
3843
|
+
TELE_BOX_MANAGER_EVENT.Focused,
|
|
3844
|
+
targetBox
|
|
3845
|
+
);
|
|
3597
3846
|
}
|
|
3598
3847
|
} else if (box.focus) {
|
|
3599
3848
|
this.blurBox(box, skipUpdate);
|
|
@@ -3617,7 +3866,7 @@ class TeleBoxManager {
|
|
|
3617
3866
|
if (targetBox.focus) {
|
|
3618
3867
|
targetBox.setFocus(false, skipUpdate);
|
|
3619
3868
|
if (!skipUpdate) {
|
|
3620
|
-
this.events.emit(
|
|
3869
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
|
|
3621
3870
|
}
|
|
3622
3871
|
}
|
|
3623
3872
|
if (this.maxTitleBar.focusedBox === targetBox) {
|
|
@@ -3630,7 +3879,7 @@ class TeleBoxManager {
|
|
|
3630
3879
|
if (box.focus) {
|
|
3631
3880
|
box.setFocus(false, skipUpdate);
|
|
3632
3881
|
if (!skipUpdate) {
|
|
3633
|
-
this.events.emit(
|
|
3882
|
+
this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
|
|
3634
3883
|
}
|
|
3635
3884
|
}
|
|
3636
3885
|
});
|
|
@@ -3644,10 +3893,18 @@ class TeleBoxManager {
|
|
|
3644
3893
|
}
|
|
3645
3894
|
updateBox(box, config, skipUpdate = false) {
|
|
3646
3895
|
if (config.x != null || config.y != null) {
|
|
3647
|
-
box.move(
|
|
3896
|
+
box.move(
|
|
3897
|
+
config.x == null ? box.intrinsicX : config.x,
|
|
3898
|
+
config.y == null ? box.intrinsicY : config.y,
|
|
3899
|
+
skipUpdate
|
|
3900
|
+
);
|
|
3648
3901
|
}
|
|
3649
3902
|
if (config.width != null || config.height != null) {
|
|
3650
|
-
box.resize(
|
|
3903
|
+
box.resize(
|
|
3904
|
+
config.width == null ? box.intrinsicWidth : config.width,
|
|
3905
|
+
config.height == null ? box.intrinsicHeight : config.height,
|
|
3906
|
+
skipUpdate
|
|
3907
|
+
);
|
|
3651
3908
|
}
|
|
3652
3909
|
if (config.title != null) {
|
|
3653
3910
|
box.setTitle(config.title);
|
|
@@ -3698,7 +3955,7 @@ class TeleBoxManager {
|
|
|
3698
3955
|
vx = 20;
|
|
3699
3956
|
}
|
|
3700
3957
|
} else if (this.hasMinimizedBox()) {
|
|
3701
|
-
vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus ===
|
|
3958
|
+
vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxX, box) => {
|
|
3702
3959
|
return Math.max(maxX, box.intrinsicX * this.containerRect.width + 20);
|
|
3703
3960
|
}, vx);
|
|
3704
3961
|
}
|
|
@@ -3712,13 +3969,13 @@ class TeleBoxManager {
|
|
|
3712
3969
|
vy = 20;
|
|
3713
3970
|
}
|
|
3714
3971
|
} else if (this.hasMinimizedBox()) {
|
|
3715
|
-
vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus ===
|
|
3972
|
+
vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxY, box) => {
|
|
3716
3973
|
return Math.max(maxY, box.intrinsicY * this.containerRect.height + 20);
|
|
3717
3974
|
}, vy);
|
|
3718
3975
|
}
|
|
3719
3976
|
y = vy / this.containerRect.height;
|
|
3720
3977
|
}
|
|
3721
|
-
return
|
|
3978
|
+
return { ...config, x, y, width, height };
|
|
3722
3979
|
}
|
|
3723
3980
|
makeBoxTop(box, skipUpdate = false) {
|
|
3724
3981
|
if (!this.useBoxesStatus && this.topBox) {
|
|
@@ -3774,6 +4031,12 @@ class TeleBoxManager {
|
|
|
3774
4031
|
}
|
|
3775
4032
|
}
|
|
3776
4033
|
exports.DefaultTitleBar = DefaultTitleBar;
|
|
4034
|
+
exports.TELE_BOX_COLOR_SCHEME = TELE_BOX_COLOR_SCHEME;
|
|
4035
|
+
exports.TELE_BOX_DELEGATE_EVENT = TELE_BOX_DELEGATE_EVENT;
|
|
4036
|
+
exports.TELE_BOX_EVENT = TELE_BOX_EVENT;
|
|
4037
|
+
exports.TELE_BOX_MANAGER_EVENT = TELE_BOX_MANAGER_EVENT;
|
|
4038
|
+
exports.TELE_BOX_RESIZE_HANDLE = TELE_BOX_RESIZE_HANDLE;
|
|
4039
|
+
exports.TELE_BOX_STATE = TELE_BOX_STATE;
|
|
3777
4040
|
exports.TeleBox = TeleBox;
|
|
3778
4041
|
exports.TeleBoxCollector = TeleBoxCollector;
|
|
3779
4042
|
exports.TeleBoxDragHandleType = TeleBoxDragHandleType;
|