@netless/window-manager 0.4.71-beta.0 → 0.4.71
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/AppManager.d.ts +2 -1
- package/dist/Cursor/Cursor.d.ts +7 -3
- package/dist/Cursor/icons2.d.ts +4 -0
- package/dist/Cursor/index.d.ts +9 -4
- package/dist/index.d.ts +11 -0
- package/dist/index.js +14 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +211 -54
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/AppManager.ts +12 -1
- package/src/Cursor/Cursor.svelte +9 -4
- package/src/Cursor/Cursor.svelte.d.ts +21 -0
- package/src/Cursor/Cursor.ts +75 -19
- package/src/Cursor/icons2.ts +66 -0
- package/src/Cursor/index.ts +79 -21
- package/src/index.ts +46 -16
- package/src/style.css +0 -1
package/dist/index.mjs
CHANGED
@@ -2441,6 +2441,10 @@ class AppManager {
|
|
2441
2441
|
this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
|
2442
2442
|
});
|
2443
2443
|
}
|
2444
|
+
getMemberState() {
|
2445
|
+
var _a;
|
2446
|
+
return ((_a = this.room) == null ? void 0 : _a.state.memberState) || { strokeColor: [0, 0, 0] };
|
2447
|
+
}
|
2444
2448
|
async onRootDirRemoved(needClose = true) {
|
2445
2449
|
this.setMainViewScenePath(INIT_DIR);
|
2446
2450
|
this.createRootDirScenesCallback();
|
@@ -6791,8 +6795,8 @@ function create_if_block(ctx) {
|
|
6791
6795
|
let t1;
|
6792
6796
|
let t2;
|
6793
6797
|
let div1_class_value;
|
6794
|
-
let if_block0 = ctx[
|
6795
|
-
let if_block1 = ctx[
|
6798
|
+
let if_block0 = ctx[17] && create_if_block_2(ctx);
|
6799
|
+
let if_block1 = ctx[18] && create_if_block_1(ctx);
|
6796
6800
|
return {
|
6797
6801
|
c() {
|
6798
6802
|
div1 = element("div");
|
@@ -6813,7 +6817,7 @@ function create_if_block(ctx) {
|
|
6813
6817
|
set_style(div0, "background-color", ctx[2]);
|
6814
6818
|
set_style(div0, "color", ctx[9]);
|
6815
6819
|
set_style(div0, "opacity", ctx[11]);
|
6816
|
-
attr(div1, "class", div1_class_value = "netless-window-manager-cursor-name " + ctx[
|
6820
|
+
attr(div1, "class", div1_class_value = "netless-window-manager-cursor-name " + ctx[15] + " " + ctx[14]);
|
6817
6821
|
},
|
6818
6822
|
m(target, anchor) {
|
6819
6823
|
insert(target, div1, anchor);
|
@@ -6828,7 +6832,7 @@ function create_if_block(ctx) {
|
|
6828
6832
|
if_block1.m(div0, null);
|
6829
6833
|
},
|
6830
6834
|
p(ctx2, dirty) {
|
6831
|
-
if (ctx2[
|
6835
|
+
if (ctx2[17]) {
|
6832
6836
|
if (if_block0) {
|
6833
6837
|
if_block0.p(ctx2, dirty);
|
6834
6838
|
} else {
|
@@ -6842,7 +6846,7 @@ function create_if_block(ctx) {
|
|
6842
6846
|
}
|
6843
6847
|
if (dirty & 1)
|
6844
6848
|
set_data(t1, ctx2[0]);
|
6845
|
-
if (ctx2[
|
6849
|
+
if (ctx2[18]) {
|
6846
6850
|
if (if_block1) {
|
6847
6851
|
if_block1.p(ctx2, dirty);
|
6848
6852
|
} else {
|
@@ -6866,7 +6870,7 @@ function create_if_block(ctx) {
|
|
6866
6870
|
if (dirty & 2048) {
|
6867
6871
|
set_style(div0, "opacity", ctx2[11]);
|
6868
6872
|
}
|
6869
|
-
if (dirty &
|
6873
|
+
if (dirty & 49152 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-name " + ctx2[15] + " " + ctx2[14])) {
|
6870
6874
|
attr(div1, "class", div1_class_value);
|
6871
6875
|
}
|
6872
6876
|
},
|
@@ -6887,7 +6891,7 @@ function create_if_block_2(ctx) {
|
|
6887
6891
|
c() {
|
6888
6892
|
img = element("img");
|
6889
6893
|
attr(img, "class", "netless-window-manager-cursor-selector-avatar");
|
6890
|
-
attr(img, "style", ctx[
|
6894
|
+
attr(img, "style", ctx[19]());
|
6891
6895
|
if (!src_url_equal(img.src, img_src_value = ctx[7]))
|
6892
6896
|
attr(img, "src", img_src_value);
|
6893
6897
|
attr(img, "alt", "avatar");
|
@@ -6940,7 +6944,8 @@ function create_fragment(ctx) {
|
|
6940
6944
|
let img;
|
6941
6945
|
let img_class_value;
|
6942
6946
|
let img_src_value;
|
6943
|
-
let
|
6947
|
+
let div1_class_value;
|
6948
|
+
let if_block = !ctx[13] && create_if_block(ctx);
|
6944
6949
|
return {
|
6945
6950
|
c() {
|
6946
6951
|
div1 = element("div");
|
@@ -6949,14 +6954,14 @@ function create_fragment(ctx) {
|
|
6949
6954
|
t2 = space();
|
6950
6955
|
div0 = element("div");
|
6951
6956
|
img = element("img");
|
6952
|
-
attr(img, "class", img_class_value = "netless-window-manager-cursor-" + ctx[3] + "-image " + ctx[
|
6957
|
+
attr(img, "class", img_class_value = "netless-window-manager-cursor-" + ctx[3] + "-image " + ctx[14]);
|
6953
6958
|
if (!src_url_equal(img.src, img_src_value = ctx[6]))
|
6954
6959
|
attr(img, "src", img_src_value);
|
6955
6960
|
attr(img, "alt", ctx[3]);
|
6956
6961
|
attr(div0, "class", "cursor-image-wrapper");
|
6957
|
-
attr(div1, "class", "netless-window-manager-cursor-mid");
|
6962
|
+
attr(div1, "class", div1_class_value = "netless-window-manager-cursor-mid" + (ctx[12] ? " netless-window-manager-cursor-custom" : ""));
|
6958
6963
|
set_style(div1, "transform", "translateX(" + ctx[4] + "px) translateY(" + ctx[5] + "px)");
|
6959
|
-
set_style(div1, "display", ctx[
|
6964
|
+
set_style(div1, "display", ctx[16]);
|
6960
6965
|
},
|
6961
6966
|
m(target, anchor) {
|
6962
6967
|
insert(target, div1, anchor);
|
@@ -6967,7 +6972,7 @@ function create_fragment(ctx) {
|
|
6967
6972
|
append(div0, img);
|
6968
6973
|
},
|
6969
6974
|
p(ctx2, [dirty]) {
|
6970
|
-
if (!ctx2[
|
6975
|
+
if (!ctx2[13]) {
|
6971
6976
|
if (if_block) {
|
6972
6977
|
if_block.p(ctx2, dirty);
|
6973
6978
|
} else {
|
@@ -6979,7 +6984,7 @@ function create_fragment(ctx) {
|
|
6979
6984
|
if_block.d(1);
|
6980
6985
|
if_block = null;
|
6981
6986
|
}
|
6982
|
-
if (dirty &
|
6987
|
+
if (dirty & 16392 && img_class_value !== (img_class_value = "netless-window-manager-cursor-" + ctx2[3] + "-image " + ctx2[14])) {
|
6983
6988
|
attr(img, "class", img_class_value);
|
6984
6989
|
}
|
6985
6990
|
if (dirty & 64 && !src_url_equal(img.src, img_src_value = ctx2[6])) {
|
@@ -6988,11 +6993,14 @@ function create_fragment(ctx) {
|
|
6988
6993
|
if (dirty & 8) {
|
6989
6994
|
attr(img, "alt", ctx2[3]);
|
6990
6995
|
}
|
6996
|
+
if (dirty & 4096 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-mid" + (ctx2[12] ? " netless-window-manager-cursor-custom" : ""))) {
|
6997
|
+
attr(div1, "class", div1_class_value);
|
6998
|
+
}
|
6991
6999
|
if (dirty & 48) {
|
6992
7000
|
set_style(div1, "transform", "translateX(" + ctx2[4] + "px) translateY(" + ctx2[5] + "px)");
|
6993
7001
|
}
|
6994
|
-
if (dirty &
|
6995
|
-
set_style(div1, "display", ctx2[
|
7002
|
+
if (dirty & 65536) {
|
7003
|
+
set_style(div1, "display", ctx2[16]);
|
6996
7004
|
}
|
6997
7005
|
},
|
6998
7006
|
i: noop,
|
@@ -7028,6 +7036,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
7028
7036
|
let { cursorTagBackgroundColor } = $$props;
|
7029
7037
|
let { opacity } = $$props;
|
7030
7038
|
let { pencilEraserSize } = $$props;
|
7039
|
+
let { custom } = $$props;
|
7031
7040
|
const computedAvatarStyle = () => {
|
7032
7041
|
return Object.entries({
|
7033
7042
|
width: (hasName ? 19 : 28) + "px",
|
@@ -7053,7 +7062,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
7053
7062
|
if ("src" in $$props2)
|
7054
7063
|
$$invalidate(6, src = $$props2.src);
|
7055
7064
|
if ("visible" in $$props2)
|
7056
|
-
$$invalidate(
|
7065
|
+
$$invalidate(20, visible = $$props2.visible);
|
7057
7066
|
if ("avatar" in $$props2)
|
7058
7067
|
$$invalidate(7, avatar = $$props2.avatar);
|
7059
7068
|
if ("theme" in $$props2)
|
@@ -7065,32 +7074,34 @@ function instance($$self, $$props, $$invalidate) {
|
|
7065
7074
|
if ("opacity" in $$props2)
|
7066
7075
|
$$invalidate(11, opacity = $$props2.opacity);
|
7067
7076
|
if ("pencilEraserSize" in $$props2)
|
7068
|
-
$$invalidate(
|
7077
|
+
$$invalidate(21, pencilEraserSize = $$props2.pencilEraserSize);
|
7078
|
+
if ("custom" in $$props2)
|
7079
|
+
$$invalidate(12, custom = $$props2.custom);
|
7069
7080
|
};
|
7070
7081
|
$$self.$$.update = () => {
|
7071
7082
|
if ($$self.$$.dirty & 1) {
|
7072
7083
|
hasName = !isEmpty(cursorName);
|
7073
7084
|
}
|
7074
7085
|
if ($$self.$$.dirty & 2) {
|
7075
|
-
$$invalidate(
|
7086
|
+
$$invalidate(18, hasTagName = !isEmpty(tagName));
|
7076
7087
|
}
|
7077
7088
|
if ($$self.$$.dirty & 128) {
|
7078
|
-
$$invalidate(
|
7089
|
+
$$invalidate(17, hasAvatar = !isEmpty(avatar));
|
7079
7090
|
}
|
7080
|
-
if ($$self.$$.dirty &
|
7081
|
-
$$invalidate(
|
7091
|
+
if ($$self.$$.dirty & 1048576) {
|
7092
|
+
$$invalidate(16, display = visible ? "initial" : "none");
|
7082
7093
|
}
|
7083
7094
|
if ($$self.$$.dirty & 8) {
|
7084
|
-
$$invalidate(
|
7095
|
+
$$invalidate(13, isLaserPointer = appliance === ApplianceNames.laserPointer);
|
7085
7096
|
}
|
7086
|
-
if ($$self.$$.dirty &
|
7087
|
-
$$invalidate(
|
7097
|
+
if ($$self.$$.dirty & 8200) {
|
7098
|
+
$$invalidate(22, isLaserPointerPencilEraser = isLaserPointer || appliance === ApplianceNames.pencilEraser);
|
7088
7099
|
}
|
7089
|
-
if ($$self.$$.dirty &
|
7090
|
-
$$invalidate(
|
7100
|
+
if ($$self.$$.dirty & 4194304) {
|
7101
|
+
$$invalidate(15, offset = isLaserPointerPencilEraser ? "netless-window-manager-laserPointer-pencilEraser-offset" : "");
|
7091
7102
|
}
|
7092
|
-
if ($$self.$$.dirty &
|
7093
|
-
$$invalidate(
|
7103
|
+
if ($$self.$$.dirty & 2097152) {
|
7104
|
+
$$invalidate(14, pencilEraserSize3ImageOffset = pencilEraserSize === 3 ? "netless-window-manager-pencilEraser-3-offset" : "");
|
7094
7105
|
}
|
7095
7106
|
};
|
7096
7107
|
return [
|
@@ -7106,6 +7117,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
7106
7117
|
color2,
|
7107
7118
|
cursorTagBackgroundColor,
|
7108
7119
|
opacity,
|
7120
|
+
custom,
|
7109
7121
|
isLaserPointer,
|
7110
7122
|
pencilEraserSize3ImageOffset,
|
7111
7123
|
offset,
|
@@ -7129,22 +7141,78 @@ class Cursor$1 extends SvelteComponent {
|
|
7129
7141
|
x: 4,
|
7130
7142
|
y: 5,
|
7131
7143
|
src: 6,
|
7132
|
-
visible:
|
7144
|
+
visible: 20,
|
7133
7145
|
avatar: 7,
|
7134
7146
|
theme: 8,
|
7135
7147
|
color: 9,
|
7136
7148
|
cursorTagBackgroundColor: 10,
|
7137
7149
|
opacity: 11,
|
7138
|
-
pencilEraserSize:
|
7150
|
+
pencilEraserSize: 21,
|
7151
|
+
custom: 12
|
7139
7152
|
});
|
7140
7153
|
}
|
7141
7154
|
}
|
7155
|
+
const staticCircle = `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23000' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23FFF'/%3E%3C/g%3E%3C/svg%3E`;
|
7156
|
+
function circleUrl(color2) {
|
7157
|
+
return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23${color2}' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23${color2}'/%3E%3C/g%3E%3C/svg%3E`;
|
7158
|
+
}
|
7159
|
+
function crossUrl(color2) {
|
7160
|
+
return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5 12H19' stroke='%23${color2}' stroke-linejoin='round'/%3E%3Cpath d='M12 5V19' stroke='%23${color2}' stroke-linejoin='round'/%3E%3C/svg%3E`;
|
7161
|
+
}
|
7162
|
+
function cssCursor(url) {
|
7163
|
+
return `url("${url}") 12 12, auto`;
|
7164
|
+
}
|
7165
|
+
function makeStyleContent(config) {
|
7166
|
+
let result = "";
|
7167
|
+
for (const cursor in config) {
|
7168
|
+
result += `.netless-whiteboard.${cursor} {cursor: ${config[cursor]}}
|
7169
|
+
`;
|
7170
|
+
}
|
7171
|
+
return result;
|
7172
|
+
}
|
7173
|
+
const $style = document.createElement("style");
|
7174
|
+
function enableLocal(memberState) {
|
7175
|
+
const [r2, g, b] = memberState.strokeColor;
|
7176
|
+
const hex2 = ((1 << 24) + (r2 << 16) + (g << 8) + b).toString(16).slice(1);
|
7177
|
+
$style.textContent = makeStyleContent({
|
7178
|
+
"cursor-pencil": cssCursor(circleUrl(hex2)),
|
7179
|
+
"cursor-eraser": cssCursor(staticCircle),
|
7180
|
+
"cursor-rectangle": cssCursor(crossUrl(hex2)),
|
7181
|
+
"cursor-ellipse": cssCursor(crossUrl(hex2)),
|
7182
|
+
"cursor-straight": cssCursor(crossUrl(hex2)),
|
7183
|
+
"cursor-arrow": cssCursor(crossUrl(hex2)),
|
7184
|
+
"cursor-shape": cssCursor(crossUrl(hex2))
|
7185
|
+
});
|
7186
|
+
document.head.appendChild($style);
|
7187
|
+
return () => {
|
7188
|
+
if ($style.parentNode == null)
|
7189
|
+
return;
|
7190
|
+
document.head.removeChild($style);
|
7191
|
+
};
|
7192
|
+
}
|
7193
|
+
const shapeAppliances = /* @__PURE__ */ new Set([
|
7194
|
+
ApplianceNames.rectangle,
|
7195
|
+
ApplianceNames.ellipse,
|
7196
|
+
ApplianceNames.straight,
|
7197
|
+
ApplianceNames.arrow,
|
7198
|
+
ApplianceNames.shape
|
7199
|
+
]);
|
7200
|
+
function remoteIcon(applianceName, hex2) {
|
7201
|
+
if (applianceName === ApplianceNames.pencil) {
|
7202
|
+
return circleUrl(hex2);
|
7203
|
+
} else if (applianceName === ApplianceNames.eraser) {
|
7204
|
+
return staticCircle;
|
7205
|
+
} else if (shapeAppliances.has(applianceName)) {
|
7206
|
+
return crossUrl(hex2);
|
7207
|
+
}
|
7208
|
+
}
|
7142
7209
|
class Cursor {
|
7143
7210
|
constructor(manager, memberId, cursorManager, wrapper) {
|
7144
7211
|
this.manager = manager;
|
7145
7212
|
this.memberId = memberId;
|
7146
7213
|
this.cursorManager = cursorManager;
|
7147
7214
|
this.wrapper = wrapper;
|
7215
|
+
this.style = "default";
|
7148
7216
|
this.move = (position) => {
|
7149
7217
|
var _a;
|
7150
7218
|
if (position.type === "main") {
|
@@ -7163,12 +7231,22 @@ class Cursor {
|
|
7163
7231
|
}
|
7164
7232
|
}
|
7165
7233
|
};
|
7234
|
+
this.setStyle = (style2) => {
|
7235
|
+
this.style = style2;
|
7236
|
+
if (this.component) {
|
7237
|
+
this.component.$set({
|
7238
|
+
src: this.getIcon(),
|
7239
|
+
custom: this.isCustomIcon()
|
7240
|
+
});
|
7241
|
+
}
|
7242
|
+
};
|
7166
7243
|
this.leave = () => {
|
7167
7244
|
this.hide();
|
7168
7245
|
};
|
7169
7246
|
this.updateMember();
|
7170
7247
|
this.createCursor();
|
7171
7248
|
this.autoHidden();
|
7249
|
+
this.setStyle(cursorManager.style);
|
7172
7250
|
}
|
7173
7251
|
moveCursor(cursor, rect, view) {
|
7174
7252
|
var _a, _b;
|
@@ -7177,6 +7255,10 @@ class Cursor {
|
|
7177
7255
|
if (point) {
|
7178
7256
|
let translateX = point.x - 2;
|
7179
7257
|
let translateY = point.y - 18;
|
7258
|
+
if (this.isCustomIcon()) {
|
7259
|
+
translateX -= 11;
|
7260
|
+
translateY += 4;
|
7261
|
+
}
|
7180
7262
|
if (type === "app") {
|
7181
7263
|
const wrapperRect = this.cursorManager.wrapperRect;
|
7182
7264
|
if (wrapperRect) {
|
@@ -7200,6 +7282,11 @@ class Cursor {
|
|
7200
7282
|
const rgb = (_b = (_a = this.member) == null ? void 0 : _a.memberState) == null ? void 0 : _b.strokeColor.join(",");
|
7201
7283
|
return `rgb(${rgb})`;
|
7202
7284
|
}
|
7285
|
+
get memberColorHex() {
|
7286
|
+
var _a, _b;
|
7287
|
+
const [r2, g, b] = ((_b = (_a = this.member) == null ? void 0 : _a.memberState) == null ? void 0 : _b.strokeColor) || [236, 52, 85];
|
7288
|
+
return ((1 << 24) + (r2 << 16) + (g << 8) + b).toString(16).slice(1);
|
7289
|
+
}
|
7203
7290
|
get payload() {
|
7204
7291
|
var _a;
|
7205
7292
|
return (_a = this.member) == null ? void 0 : _a.payload;
|
@@ -7263,6 +7350,7 @@ class Cursor {
|
|
7263
7350
|
appliance: this.memberApplianceName,
|
7264
7351
|
avatar: this.memberAvatar,
|
7265
7352
|
src: this.getIcon(),
|
7353
|
+
custom: this.isCustomIcon(),
|
7266
7354
|
visible: false,
|
7267
7355
|
backgroundColor: this.memberColor,
|
7268
7356
|
cursorName: this.memberCursorName,
|
@@ -7276,17 +7364,44 @@ class Cursor {
|
|
7276
7364
|
}
|
7277
7365
|
getIcon() {
|
7278
7366
|
var _a;
|
7279
|
-
if (this.member)
|
7280
|
-
|
7281
|
-
|
7282
|
-
|
7283
|
-
|
7284
|
-
|
7285
|
-
}
|
7286
|
-
|
7287
|
-
|
7288
|
-
|
7367
|
+
if (!this.member)
|
7368
|
+
return;
|
7369
|
+
const { memberApplianceName, memberColorHex } = this;
|
7370
|
+
const { userApplianceIcons, applianceIcons } = this.cursorManager;
|
7371
|
+
let iconsKey = this.memberApplianceName;
|
7372
|
+
if (iconsKey === ApplianceNames.pencilEraser) {
|
7373
|
+
iconsKey = `${iconsKey}${((_a = this.member) == null ? void 0 : _a.memberState.pencilEraserSize) || 1}`;
|
7374
|
+
}
|
7375
|
+
const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
|
7376
|
+
if (userApplianceSrc)
|
7377
|
+
return userApplianceSrc;
|
7378
|
+
if (this.style === "custom" && memberApplianceName) {
|
7379
|
+
const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
|
7380
|
+
if (customApplianceSrc)
|
7381
|
+
return customApplianceSrc;
|
7382
|
+
}
|
7383
|
+
const applianceSrc = applianceIcons[iconsKey || ApplianceNames.shape];
|
7384
|
+
return applianceSrc || applianceIcons[ApplianceNames.shape];
|
7385
|
+
}
|
7386
|
+
isCustomIcon() {
|
7387
|
+
var _a;
|
7388
|
+
if (!this.member)
|
7389
|
+
return false;
|
7390
|
+
const { memberApplianceName, memberColorHex } = this;
|
7391
|
+
const { userApplianceIcons } = this.cursorManager;
|
7392
|
+
let iconsKey = this.memberApplianceName;
|
7393
|
+
if (iconsKey === ApplianceNames.pencilEraser) {
|
7394
|
+
iconsKey = `${iconsKey}${((_a = this.member) == null ? void 0 : _a.memberState.pencilEraserSize) || 1}`;
|
7395
|
+
}
|
7396
|
+
const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
|
7397
|
+
if (userApplianceSrc)
|
7398
|
+
return false;
|
7399
|
+
if (this.style === "custom" && memberApplianceName) {
|
7400
|
+
const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
|
7401
|
+
if (customApplianceSrc)
|
7402
|
+
return true;
|
7289
7403
|
}
|
7404
|
+
return false;
|
7290
7405
|
}
|
7291
7406
|
updateMember() {
|
7292
7407
|
this.member = findMemberByUid(this.manager.room, this.memberId);
|
@@ -7333,16 +7448,18 @@ const ApplianceMap = {
|
|
7333
7448
|
["pencilEraser2"]: pencilEraser2,
|
7334
7449
|
["pencilEraser3"]: pencilEraser3
|
7335
7450
|
};
|
7451
|
+
const LocalCursorSideEffectId = "local-cursor";
|
7336
7452
|
class CursorManager {
|
7337
|
-
constructor(manager, enableCursor, applianceIcons) {
|
7453
|
+
constructor(manager, enableCursor, cursorOptions, applianceIcons) {
|
7338
7454
|
var _a;
|
7339
7455
|
this.manager = manager;
|
7340
7456
|
this.enableCursor = enableCursor;
|
7341
7457
|
this.cursorInstances = /* @__PURE__ */ new Map();
|
7458
|
+
this.userApplianceIcons = {};
|
7342
7459
|
this.sideEffectManager = new SideEffectManager$1();
|
7343
7460
|
this.store = this.manager.store;
|
7344
|
-
this.
|
7345
|
-
this.
|
7461
|
+
this.leaveFlag = true;
|
7462
|
+
this._style = "default";
|
7346
7463
|
this.onCursorMove = (payload) => {
|
7347
7464
|
const cursorInstance = this.initCursorInstance(payload.uid);
|
7348
7465
|
if (payload.state === CursorState.Leave) {
|
@@ -7376,17 +7493,17 @@ class CursorManager {
|
|
7376
7493
|
if (now2 - this.mouseMoveTimer > 48) {
|
7377
7494
|
this.mouseMoveTimer = now2;
|
7378
7495
|
if (WindowManager.supportTeachingAidsPlugin && isRoom(WindowManager.displayer) && WindowManager.displayer.disableDeviceInputs) {
|
7379
|
-
if (this.
|
7496
|
+
if (this.leaveFlag) {
|
7380
7497
|
this.manager.dispatchInternalEvent(Events.CursorMove, {
|
7381
7498
|
uid: this.manager.uid,
|
7382
7499
|
state: CursorState.Leave
|
7383
7500
|
});
|
7384
|
-
this.
|
7501
|
+
this.leaveFlag = false;
|
7385
7502
|
}
|
7386
7503
|
return;
|
7387
7504
|
}
|
7388
7505
|
this.mouseMoveListener_(event, isTouch);
|
7389
|
-
this.
|
7506
|
+
this.leaveFlag = true;
|
7390
7507
|
}
|
7391
7508
|
};
|
7392
7509
|
this.mouseLeaveListener = () => {
|
@@ -7430,9 +7547,43 @@ class CursorManager {
|
|
7430
7547
|
this.sideEffectManager.add(() => {
|
7431
7548
|
return internalEmitter.on("playgroundSizeChange", () => this.updateContainerRect());
|
7432
7549
|
});
|
7550
|
+
const room = this.manager.room;
|
7551
|
+
if (room) {
|
7552
|
+
this.sideEffectManager.add(() => {
|
7553
|
+
const update2 = (state) => {
|
7554
|
+
if (this.style === "custom" && state.memberState)
|
7555
|
+
this.enableCustomCursor();
|
7556
|
+
};
|
7557
|
+
room.callbacks.on("onRoomStateChanged", update2);
|
7558
|
+
return () => room.callbacks.off("onRoomStateChanged", update2);
|
7559
|
+
});
|
7560
|
+
}
|
7433
7561
|
if (applianceIcons) {
|
7434
|
-
this.
|
7562
|
+
this.userApplianceIcons = applianceIcons;
|
7435
7563
|
}
|
7564
|
+
this.style = (cursorOptions == null ? void 0 : cursorOptions.style) || "default";
|
7565
|
+
}
|
7566
|
+
get applianceIcons() {
|
7567
|
+
return __spreadValues(__spreadValues({}, ApplianceMap), this.userApplianceIcons);
|
7568
|
+
}
|
7569
|
+
get style() {
|
7570
|
+
return this._style;
|
7571
|
+
}
|
7572
|
+
set style(value) {
|
7573
|
+
if (this._style !== value) {
|
7574
|
+
this._style = value;
|
7575
|
+
this.cursorInstances.forEach((cursor) => {
|
7576
|
+
cursor.setStyle(value);
|
7577
|
+
});
|
7578
|
+
if (value === "custom") {
|
7579
|
+
this.enableCustomCursor();
|
7580
|
+
} else {
|
7581
|
+
this.sideEffectManager.flush(LocalCursorSideEffectId);
|
7582
|
+
}
|
7583
|
+
}
|
7584
|
+
}
|
7585
|
+
enableCustomCursor() {
|
7586
|
+
this.sideEffectManager.add(() => enableLocal(this.manager.getMemberState()), LocalCursorSideEffectId);
|
7436
7587
|
}
|
7437
7588
|
canMoveCursor(member) {
|
7438
7589
|
const isLaserPointer = (member == null ? void 0 : member.memberState.currentApplianceName) === ApplianceNames.laserPointer;
|
@@ -18275,7 +18426,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
|
|
18275
18426
|
const _WindowManager = class extends InvisiblePlugin {
|
18276
18427
|
constructor(context) {
|
18277
18428
|
super(context);
|
18278
|
-
this.version = "0.4.71
|
18429
|
+
this.version = "0.4.71";
|
18279
18430
|
this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.28", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.17", "@netless/app-media-player": "0.1.0-beta.6", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
|
18280
18431
|
this.emitter = callbacks$1;
|
18281
18432
|
this.viewMode = ViewMode.Broadcaster;
|
@@ -18336,7 +18487,7 @@ const _WindowManager = class extends InvisiblePlugin {
|
|
18336
18487
|
manager.appManager = new AppManager(manager);
|
18337
18488
|
manager.appManager.polling = params.polling || false;
|
18338
18489
|
manager._pageState = new PageStateImpl(manager.appManager);
|
18339
|
-
manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
|
18490
|
+
manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.cursorOptions, params.applianceIcons);
|
18340
18491
|
if (containerSizeRatio) {
|
18341
18492
|
manager.containerSizeRatio = containerSizeRatio;
|
18342
18493
|
}
|
@@ -18376,11 +18527,7 @@ const _WindowManager = class extends InvisiblePlugin {
|
|
18376
18527
|
return manager;
|
18377
18528
|
}
|
18378
18529
|
static initContainer(manager, container, params) {
|
18379
|
-
const {
|
18380
|
-
chessboard,
|
18381
|
-
overwriteStyles,
|
18382
|
-
fullscreen
|
18383
|
-
} = params;
|
18530
|
+
const { chessboard, overwriteStyles, fullscreen } = params;
|
18384
18531
|
if (!_WindowManager.container) {
|
18385
18532
|
_WindowManager.container = container;
|
18386
18533
|
}
|
@@ -18758,6 +18905,16 @@ const _WindowManager = class extends InvisiblePlugin {
|
|
18758
18905
|
this.appManager.polling = b;
|
18759
18906
|
}
|
18760
18907
|
}
|
18908
|
+
get cursorStyle() {
|
18909
|
+
var _a;
|
18910
|
+
return ((_a = this.cursorManager) == null ? void 0 : _a.style) || "default";
|
18911
|
+
}
|
18912
|
+
set cursorStyle(value) {
|
18913
|
+
if (!this.cursorManager) {
|
18914
|
+
throw new Error("[WindowManager]: cursor is not enabled, please set { cursor: true }.");
|
18915
|
+
}
|
18916
|
+
this.cursorManager.style = value;
|
18917
|
+
}
|
18761
18918
|
get mainViewSceneIndex() {
|
18762
18919
|
var _a;
|
18763
18920
|
return ((_a = this._pageState) == null ? void 0 : _a.index) || 0;
|