@netless/telebox-insider 1.0.0-alpha.15 → 1.0.0-alpha.18
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/package.json
CHANGED
|
@@ -1,68 +1,68 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
2
|
+
"name": "@netless/telebox-insider",
|
|
3
|
+
"version": "1.0.0-alpha.18",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "Window widget for Whiteboard",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"author": "CRIMX <straybugs@gmail.com> (https://github.com/crimx/)",
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"*.css"
|
|
10
|
+
],
|
|
11
|
+
"main": "./dist/telebox-insider.cjs.js",
|
|
12
|
+
"module": "./dist/telebox-insider.es.js",
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"files": [
|
|
15
|
+
"src",
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
|
20
|
+
"@netless/eslint-plugin": "^1.1.2",
|
|
21
|
+
"@rollup/plugin-commonjs": "^17.1.0",
|
|
22
|
+
"@rollup/plugin-node-resolve": "^11.2.0",
|
|
23
|
+
"@rollup/plugin-url": "^6.0.0",
|
|
24
|
+
"@types/chance": "^1.1.1",
|
|
25
|
+
"@types/faker": "^5.1.7",
|
|
26
|
+
"@types/node": "^14.14.16",
|
|
27
|
+
"@typescript-eslint/eslint-plugin": "^4.11.0",
|
|
28
|
+
"@typescript-eslint/parser": "^4.11.0",
|
|
29
|
+
"chance": "^1.1.7",
|
|
30
|
+
"cross-env": "^7.0.2",
|
|
31
|
+
"eslint": "^7.31.0",
|
|
32
|
+
"eslint-config-prettier": "^6.11.0",
|
|
33
|
+
"eslint-loader": "^4.0.2",
|
|
34
|
+
"eslint-plugin-jsx-a11y": "^6.3.1",
|
|
35
|
+
"eslint-plugin-prettier": "^3.1.4",
|
|
36
|
+
"faker": "^5.4.0",
|
|
37
|
+
"fork-ts-checker-webpack-plugin": "^6.0.4",
|
|
38
|
+
"lint-staged": "^10.5.4",
|
|
39
|
+
"minimist": "^1.2.5",
|
|
40
|
+
"prettier": "^2.0.5",
|
|
41
|
+
"rimraf": "^3.0.0",
|
|
42
|
+
"rollup-plugin-exclude-dependencies-from-bundle": "^1.1.22",
|
|
43
|
+
"sass": "^1.36.0",
|
|
44
|
+
"sass-loader": "^10.1.1",
|
|
45
|
+
"typescript": "^4.1.2",
|
|
46
|
+
"vite": "^2.4.4"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@juggle/resize-observer": "^3.3.1",
|
|
50
|
+
"@types/shallowequal": "^1.1.1",
|
|
51
|
+
"emittery": "^0.11.0",
|
|
52
|
+
"shallowequal": "^1.1.0",
|
|
53
|
+
"side-effect-manager": "^1.1.0",
|
|
54
|
+
"stylefire": "^7.0.3",
|
|
55
|
+
"value-enhancer": "^1.3.0"
|
|
56
|
+
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"start": "vite ./playground --open --host",
|
|
59
|
+
"lint": "lint-staged",
|
|
60
|
+
"types": "cross-env NODE_ENV=production tsc --declaration --emitDeclarationOnly --esModuleInterop --outDir dist",
|
|
61
|
+
"build": "vite build && yarn run types",
|
|
62
|
+
"build:dev": "vite build --mode development && yarn run types",
|
|
63
|
+
"storybook": "start-storybook -p 6006 --no-version-updates",
|
|
64
|
+
"build-storybook": "build-storybook && node scripts/move-storybook.js",
|
|
65
|
+
"deploy-storybook": "yarn run build-storybook && node scripts/deploy-storybook.js",
|
|
66
|
+
"cleanup": "rimraf ./dist"
|
|
67
|
+
}
|
|
68
|
+
}
|
package/src/TeleBox/index.ts
CHANGED
|
@@ -91,7 +91,7 @@ type MyReadonlyValConfig = {
|
|
|
91
91
|
highlightStage: ReadonlyVal<boolean, boolean>;
|
|
92
92
|
boxHighlightStage: Val<boolean | null, boolean>;
|
|
93
93
|
contentRect: Val<TeleBoxRect>;
|
|
94
|
-
contentStageRect: ReadonlyVal<TeleBoxRect
|
|
94
|
+
contentStageRect: ReadonlyVal<TeleBoxRect>;
|
|
95
95
|
};
|
|
96
96
|
|
|
97
97
|
type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
|
|
@@ -629,7 +629,7 @@ export class TeleBox {
|
|
|
629
629
|
}
|
|
630
630
|
|
|
631
631
|
/** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. */
|
|
632
|
-
setHighlightStage(highlightStage: boolean | null): void {
|
|
632
|
+
public setHighlightStage(highlightStage: boolean | null): void {
|
|
633
633
|
this._boxHighlightStage$.setValue(highlightStage);
|
|
634
634
|
}
|
|
635
635
|
|
|
@@ -820,19 +820,36 @@ export class TeleBox {
|
|
|
820
820
|
this.wrapClassName("content") + " tele-fancy-scrollbar";
|
|
821
821
|
this.$content = $content;
|
|
822
822
|
|
|
823
|
+
const updateContentRect = (): void => {
|
|
824
|
+
const rect = $content.getBoundingClientRect();
|
|
825
|
+
this._contentRect$.setValue({
|
|
826
|
+
x: 0,
|
|
827
|
+
y: 0,
|
|
828
|
+
width: rect.width,
|
|
829
|
+
height: rect.height,
|
|
830
|
+
});
|
|
831
|
+
};
|
|
823
832
|
this._sideEffect.add(() => {
|
|
824
833
|
const observer = new ResizeObserver(() => {
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
y: 0,
|
|
829
|
-
width: rect.width,
|
|
830
|
-
height: rect.height,
|
|
831
|
-
});
|
|
834
|
+
if (!this.minimized) {
|
|
835
|
+
updateContentRect();
|
|
836
|
+
}
|
|
832
837
|
});
|
|
833
838
|
observer.observe($content);
|
|
834
839
|
return () => observer.disconnect();
|
|
835
840
|
});
|
|
841
|
+
this._sideEffect.addDisposer(
|
|
842
|
+
this._minimized$.reaction((minimized) => {
|
|
843
|
+
// correct content size when restoring from minimized
|
|
844
|
+
if (!minimized) {
|
|
845
|
+
this._sideEffect.setTimeout(
|
|
846
|
+
updateContentRect,
|
|
847
|
+
400,
|
|
848
|
+
"minimized-content-rect-fix"
|
|
849
|
+
);
|
|
850
|
+
}
|
|
851
|
+
})
|
|
852
|
+
);
|
|
836
853
|
|
|
837
854
|
this._sideEffect.add(() => {
|
|
838
855
|
let last$userStyles: HTMLStyleElement | undefined;
|
|
@@ -874,12 +891,10 @@ export class TeleBox {
|
|
|
874
891
|
$stage.className = this.wrapClassName("content-stage");
|
|
875
892
|
this._sideEffect.addDisposer(
|
|
876
893
|
this._contentStageRect$.subscribe((rect) => {
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
$stage.style.height = rect.height + "px";
|
|
882
|
-
}
|
|
894
|
+
$stage.style.top = rect.y + "px";
|
|
895
|
+
$stage.style.left = rect.x + "px";
|
|
896
|
+
$stage.style.width = rect.width + "px";
|
|
897
|
+
$stage.style.height = rect.height + "px";
|
|
883
898
|
}),
|
|
884
899
|
"content-stage-rect"
|
|
885
900
|
);
|
|
@@ -1191,4 +1206,5 @@ export type ReadonlyTeleBox = Pick<
|
|
|
1191
1206
|
| "setRatio"
|
|
1192
1207
|
| "setVisible"
|
|
1193
1208
|
| "handleTrackStart"
|
|
1209
|
+
| "onValChanged"
|
|
1194
1210
|
>;
|