@kittycad/web-view 1.2.3 → 1.2.4
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/README.md +3 -0
- package/index.d.ts +6 -4
- package/index.d.ts.map +1 -1
- package/index.js +3 -1
- package/index.js.map +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -87,5 +87,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
87
87
|
})
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
+
By default, starting one web-view stops any other running web-views. Set
|
|
91
|
+
`allowMultiple: true` when a project needs any number running at once.
|
|
92
|
+
|
|
90
93
|
## Pretty screenshot of making tons of these
|
|
91
94
|
|
package/index.d.ts
CHANGED
|
@@ -10,6 +10,11 @@ type Size = {
|
|
|
10
10
|
width: number;
|
|
11
11
|
height: number;
|
|
12
12
|
};
|
|
13
|
+
type ZooWebViewArgs = {
|
|
14
|
+
zooClient: zoo.Client;
|
|
15
|
+
size: Size;
|
|
16
|
+
allowMultiple?: boolean;
|
|
17
|
+
};
|
|
13
18
|
declare enum ZooWebViewState {
|
|
14
19
|
Fresh = "fresh",
|
|
15
20
|
Starting = "starting",
|
|
@@ -21,10 +26,7 @@ export declare class ZooWebView extends EventTarget {
|
|
|
21
26
|
rtc: zoo.WebRTC | undefined;
|
|
22
27
|
size: Size;
|
|
23
28
|
state: ZooWebViewState;
|
|
24
|
-
constructor(args:
|
|
25
|
-
zooClient: zoo.Client;
|
|
26
|
-
size: Size;
|
|
27
|
-
});
|
|
29
|
+
constructor(args: ZooWebViewArgs);
|
|
28
30
|
deconstructor(): Promise<[PromiseSettledResult<void | undefined>]> | undefined;
|
|
29
31
|
static decoOff(size: Size, elZooWebView: HTMLElement, elStart: HTMLElement): void;
|
|
30
32
|
static decoOn(size: Size, elZooWebView: HTMLElement, elStart: HTMLElement): void;
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,eAAe,CAAA;AAGpC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,GAAG,CAAC,EAAE;YACJ,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAA;SAChC,CAAA;KACF;CACF;AAKD,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAA;AAID,aAAK,eAAe;IAClB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED,qBAAa,UAAW,SAAQ,WAAW;IAClC,EAAE,EAAE,WAAW,CAAA;IACf,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAY;IACvC,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,EAAE,eAAe,CAAwB;gBAEzC,IAAI,EAAE
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,eAAe,CAAA;AAGpC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,GAAG,CAAC,EAAE;YACJ,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAA;SAChC,CAAA;KACF;CACF;AAKD,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAA;AAID,aAAK,eAAe;IAClB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED,qBAAa,UAAW,SAAQ,WAAW;IAClC,EAAE,EAAE,WAAW,CAAA;IACf,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAY;IACvC,IAAI,EAAE,IAAI,CAAA;IACV,KAAK,EAAE,eAAe,CAAwB;gBAEzC,IAAI,EAAE,cAAc;IA+EhC,aAAa;IAmBb,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW;IAgB1E,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW;IASzE,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE;CAqB3C"}
|
package/index.js
CHANGED
|
@@ -71,7 +71,9 @@ var ZooWebView = class _ZooWebView extends EventTarget {
|
|
|
71
71
|
fps: 30
|
|
72
72
|
});
|
|
73
73
|
zooWebRTC.addResizeObserver(this.el);
|
|
74
|
-
|
|
74
|
+
if (args.allowMultiple !== true) {
|
|
75
|
+
window.zoo?.kittycadWebViews?.filter((v) => ["running" /* Running */, "starting" /* Starting */].indexOf(v.state) >= 0).forEach((v) => v.deconstructor());
|
|
76
|
+
}
|
|
75
77
|
this.state = "starting" /* Starting */;
|
|
76
78
|
const onClose = () => {
|
|
77
79
|
this.deconstructor();
|
package/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/svg-zoo.ts"],
|
|
4
|
-
"sourcesContent": ["import * as zoo from '@kittycad/lib'\nimport svgZoo from './svg-zoo'\n\ndeclare global {\n interface Window {\n zoo?: {\n kittycadWebViews?: ZooWebView[]\n }\n }\n}\n\nwindow.zoo ??= {}\nwindow.zoo.kittycadWebViews ??= []\n\ntype Size = {\n width: number,\n height: number,\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\nenum ZooWebViewState {\n Fresh = 'fresh',\n Starting = 'starting',\n Running = 'running',\n Killed = 'killed',\n}\n\nexport class ZooWebView extends EventTarget {\n public el: HTMLElement\n public rtc: zoo.WebRTC | undefined = undefined\n public size: Size\n public state: ZooWebViewState = ZooWebViewState.Fresh\n \n constructor(args:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAAqB;;;ACArB,IAAO,kBAAQ;;;ADWf,OAAO,QAAQ,CAAC;AAChB,OAAO,IAAI,qBAAqB,CAAC;
|
|
4
|
+
"sourcesContent": ["import * as zoo from '@kittycad/lib'\nimport svgZoo from './svg-zoo'\n\ndeclare global {\n interface Window {\n zoo?: {\n kittycadWebViews?: ZooWebView[]\n }\n }\n}\n\nwindow.zoo ??= {}\nwindow.zoo.kittycadWebViews ??= []\n\ntype Size = {\n width: number,\n height: number,\n}\n\ntype ZooWebViewArgs = {\n zooClient: zoo.Client,\n size: Size,\n allowMultiple?: boolean,\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\nenum ZooWebViewState {\n Fresh = 'fresh',\n Starting = 'starting',\n Running = 'running',\n Killed = 'killed',\n}\n\nexport class ZooWebView extends EventTarget {\n public el: HTMLElement\n public rtc: zoo.WebRTC | undefined = undefined\n public size: Size\n public state: ZooWebViewState = ZooWebViewState.Fresh\n \n constructor(args: ZooWebViewArgs) {\n super()\n \n this.size = args.size\n \n const sizeAdjusted: Size = {\n width: args.size.width - args.size.width % 4,\n height: args.size.height - args.size.height % 4,\n }\n \n this.el = ZooWebView.createElements({ size: sizeAdjusted })\n \n const elVideo = this.el.querySelector<HTMLVideoElement>('video')\n if (elVideo === null) return\n elVideo.addEventListener('contextmenu', preventDefault)\n \n const elStart = this.el.querySelector<HTMLElement>('div.start')\n if (elStart === null) return\n \n const startZooWebRTC = () => {\n // Owns setting up the WebSocket. Because the WebSocket is only good for a\n // single WebRTC handshake, and it's to be used as the ICE information\n // exchange, any other usage by an application is unexpected.\n const zooWebRTC = new zoo.WebRTC({\n client: args.zooClient,\n video_res_width: sizeAdjusted.width,\n video_res_height: sizeAdjusted.height,\n order_independent_transparency: true,\n show_grid: true,\n post_effect: 'ssao',\n fps: 30,\n })\n \n zooWebRTC.addResizeObserver(this.el)\n \n if (args.allowMultiple !== true) {\n window.zoo?.kittycadWebViews\n ?.filter(v => [ZooWebViewState.Running, ZooWebViewState.Starting].indexOf(v.state) >= 0)\n .forEach(v => v.deconstructor())\n }\n \n this.state = ZooWebViewState.Starting\n \n const onClose = () => {\n this.deconstructor()\n }\n zooWebRTC.addEventListener('close', onClose, { once: true })\n\n const onTrack = (event: Event) => {\n if (!(event.target instanceof zoo.WebRTC)) return\n elVideo.srcObject = event.target.track?.streams[0] ?? null\n }\n zooWebRTC.addEventListener('track', onTrack, { once: true })\n \n const onConnected = (_event: Event) => {\n void elVideo.play().catch(console.warn)\n \n this.rtc = zooWebRTC\n this.state = ZooWebViewState.Running\n this.dispatchEvent(new Event('ready'))\n }\n \n zooWebRTC.addMouseEvents(elVideo)\n zooWebRTC.addEventListener('connected', onConnected, { once: true })\n \n zooWebRTC.start()\n }\n \n this.state = ZooWebViewState.Fresh\n \n window.zoo?.kittycadWebViews?.push(this)\n \n const elStartClick = () => {\n ZooWebView.decoOn(sizeAdjusted, this.el, elStart)\n startZooWebRTC()\n }\n elStart.addEventListener('click', elStartClick)\n }\n \n deconstructor() {\n this.state = ZooWebViewState.Killed\n \n // Never remove this event listener.\n // elStart.removeEventListener('click', elStartClick)\n \n const elVideo = this.el.querySelector<HTMLVideoElement>('video')\n if (elVideo === null) return\n elVideo.pause()\n \n const elStart = this.el.querySelector<HTMLElement>('div.start')\n if (elStart === null) return\n ZooWebView.decoOff(this.size, this.el, elStart)\n \n return Promise.allSettled([\n this.rtc?.deconstructor()\n ])\n }\n\n static decoOff(size: Size, elZooWebView: HTMLElement, elStart: HTMLElement) {\n elZooWebView.style.width = size.width.toString()\n elZooWebView.style.height = size.height.toString()\n \n elZooWebView.style.justifyContent = 'center'\n elZooWebView.style.alignItems = 'center'\n elZooWebView.style.cursor = 'pointer'\n elZooWebView.style.backgroundColor = '#1c1c1c'\n \n elStart.style.paddingTop = ''\n elStart.style.paddingRight = ''\n elStart.style.width = (size.width / 2).toString()\n elStart.style.position = 'absolute'\n elStart.style.color = 'hsl(154deg 100% 25%)'\n }\n\n static decoOn(size: Size, elZooWebView: HTMLElement, elStart: HTMLElement) {\n elZooWebView.style.justifyContent = 'right'\n elZooWebView.style.alignItems = 'flex-start'\n elStart.style.width = (size.width / 4).toString()\n elStart.style.color = 'hsl(154deg 100% 58%)'\n elStart.style.paddingTop = '0.5em'\n elStart.style.paddingRight = '0.5em'\n }\n\n static createElements(args: { size: Size }) {\n const elZooWebView = document.createElement('div')\n const elVideo = document.createElement('video')\n const elStart = document.createElement('div')\n \n elStart.classList.add('start')\n elStart.innerHTML = svgZoo\n \n elVideo.width = args.size.width - args.size.width % 4\n elVideo.height = args.size.height - args.size.height % 4\n \n elZooWebView.style.display = 'flex'\n elZooWebView.style.overflow = 'auto'\n elZooWebView.style.overscrollBehavior = 'contain'\n\n ZooWebView.decoOff(args.size, elZooWebView, elStart)\n \n elZooWebView.appendChild(elVideo)\n elZooWebView.appendChild(elStart)\n return elZooWebView\n }\n}\n", "export default '<svg viewBox=\"0 -2 245 84\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g><path fill=\"currentcolor\" d=\"M49.1899 14.2024V1.75536H0.0079789V19.3089H44.4824L0.0159578 67.5334H0.0079789V67.5414L0 67.5493L0.0079789 67.5573V79.3501H11.4018L22.8755 66.903V79.3501H72.0574V61.7965H27.591L72.0574 13.5641V1.75536L60.6556 1.77131L49.1899 14.2024Z\"></path><path fill=\"currentcolor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M116.723 17.5536C103.981 17.5536 93.6164 27.9182 93.6164 40.6605C93.6164 45.751 95.276 50.4665 98.0846 54.2884L86.0205 67.2781C79.8129 60.1369 76.0628 50.8256 76.0628 40.6605C76.0628 18.2398 94.3026 0 116.723 0C125.819 0 134.221 3.00007 141.003 8.06666L128.939 21.0563C125.396 18.8382 121.207 17.5536 116.723 17.5536ZM139.83 40.6605C139.83 35.5699 138.171 30.8544 135.37 27.0245L147.426 14.0349C153.634 21.176 157.384 30.4874 157.384 40.6605C157.384 63.0732 139.144 81.3129 116.723 81.3129C107.627 81.3129 99.2256 78.3129 92.4435 73.2542L104.516 60.2566C108.058 62.4748 112.239 63.7594 116.723 63.7594C129.466 63.7594 139.83 53.3948 139.83 40.6605Z\"></path><path fill=\"currentcolor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M204.34 17.5536C191.597 17.5536 181.233 27.9182 181.233 40.6605C181.233 45.751 182.892 50.4665 185.701 54.2884L173.637 67.2781C167.429 60.1369 163.679 50.8256 163.679 40.6605C163.679 18.2398 181.919 0 204.34 0C213.435 0 221.837 3.00007 228.619 8.06666L216.555 21.0563C213.013 18.8382 208.824 17.5536 204.34 17.5536ZM222.986 27.0245L235.042 14.0349C241.25 21.176 245 30.4874 245 40.6605C245 63.0732 226.76 81.3129 204.34 81.3129C195.244 81.3129 186.842 78.3129 180.06 73.2542L192.132 60.2566C195.674 62.4748 199.855 63.7594 204.34 63.7594C217.082 63.7594 227.446 53.3948 227.446 40.6605C227.446 35.5699 225.787 30.8544 222.986 27.0245Z\"></path></g></svg>'\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|