@wangyaoshen/locus-player 0.1.10 → 0.1.12-dev
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/main.js +161 -54
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { Stage as
|
|
5
|
-
const
|
|
6
|
-
`,
|
|
1
|
+
var v = Object.defineProperty;
|
|
2
|
+
var m = (s, r, t) => r in s ? v(s, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[r] = t;
|
|
3
|
+
var i = (s, r, t) => (m(s, typeof r != "symbol" ? r + "" : r, t), t);
|
|
4
|
+
import { Stage as b, Player as f, Vector2 as g } from "@wangyaoshen/locus-core";
|
|
5
|
+
const I = `.initial{display:none}.state-initial .initial{display:block}.loading{display:none}.state-loading .loading{display:block}.ready{display:none}.state-ready .ready{display:block}.error{display:none}.state-error .error{display:block}:host{position:relative;display:block}.overlay{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;background-color:#0000008a;transition:opacity .1s}.overlay.state-ready:not(.auto){cursor:pointer}.overlay.playing:not(.hover):hover{cursor:none}.overlay.hover,.overlay.state-ready:focus-within,.overlay.state-ready:not(.playing){opacity:1}.overlay.hover .button,.overlay.state-ready:focus-within .button,.overlay.state-ready:not(.playing) .button{scale:1;transition:scale .1s ease-out}.overlay.state-loading,.overlay.state-error{opacity:1;transition:opacity 1s}.overlay.state-ready.auto{opacity:0}.overlay.interactive-mode{display:none}.button{width:50%;max-width:96px;aspect-ratio:1;scale:.5;transition:scale .1s ease-in,opacity .1s;background-color:transparent;border:none;background-size:100% 100%;background-repeat:no-repeat;opacity:.54;cursor:inherit;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE0LjV2LTlsNiA0LjUtNiA0LjV6Ii8+PC9zdmc+)}.playing .button{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGZpbGw9IiNmZmZmZmYiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48Zy8+PHBhdGggZD0iTTEyLDJDNi40OCwyLDIsNi40OCwyLDEyczQuNDgsMTAsMTAsMTBzMTAtNC40OCwxMC0xMFMxNy41MiwyLDEyLDJ6IE0xMSwxNkg5VjhoMlYxNnogTTE1LDE2aC0yVjhoMlYxNnoiLz48L2c+PC9zdmc+)}.button:focus,.overlay:hover .button{opacity:.87}.auto .button{display:none}.canvas{width:100%;display:block;opacity:0;transition:opacity .1s}.canvas.state-ready{opacity:1}.message{font-family:JetBrains Mono,sans-serif;text-align:center;font-size:20px;padding:8px 16px;margin:16px;border-radius:4px;color:#fff9;background-color:#000000de}.loader{width:50%;max-width:96px;display:none;rotate:-90deg;animation:stroke 2s cubic-bezier(.5,0,.5,1) infinite,rotate 2s linear infinite}@keyframes stroke{0%{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:2.8274333882px}50%{stroke-dasharray:50.8938009883px 5.6548667765px;stroke-dashoffset:-2.8274333882px}to{stroke-dasharray:5.6548667765px 50.8938009883px;stroke-dashoffset:-53.7212343766px}}@keyframes rotate{0%{rotate:-110deg}to{rotate:250deg}}
|
|
6
|
+
`, w = `<div class="overlay" part="overlay">
|
|
7
7
|
<button
|
|
8
8
|
part="play-button"
|
|
9
9
|
title="Play / Pause"
|
|
@@ -24,36 +24,51 @@ const f = `.initial{display:none}.state-initial .initial{display:block}.loading{
|
|
|
24
24
|
<circle cx="12" cy="12" r="9" />
|
|
25
25
|
</svg>
|
|
26
26
|
</div>
|
|
27
|
-
`, M = `<style>${
|
|
28
|
-
|
|
27
|
+
`, M = `<style>${I}</style>${w}`, y = "motion-canvas-player";
|
|
28
|
+
function p(s) {
|
|
29
|
+
return s !== null && "transformMousePosition" in s && "getView" in s;
|
|
30
|
+
}
|
|
31
|
+
function P(s) {
|
|
32
|
+
return s !== null && typeof s == "object" && "containsPoint" in s && "startDrag" in s && "drag" in s && "endDrag" in s && "isDragging" in s && "interactive" in s;
|
|
33
|
+
}
|
|
34
|
+
class k extends HTMLElement {
|
|
35
|
+
// 标记是否刚完成交互操作
|
|
29
36
|
constructor() {
|
|
30
37
|
super();
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
38
|
+
i(this, "root");
|
|
39
|
+
i(this, "canvas");
|
|
40
|
+
i(this, "overlay");
|
|
41
|
+
i(this, "button");
|
|
42
|
+
i(this, "state", "initial");
|
|
43
|
+
i(this, "project", null);
|
|
44
|
+
i(this, "player", null);
|
|
45
|
+
i(this, "defaultSettings");
|
|
46
|
+
i(this, "abortController", null);
|
|
47
|
+
i(this, "mouseMoveId", null);
|
|
48
|
+
i(this, "finished", !1);
|
|
49
|
+
i(this, "playing", !1);
|
|
50
|
+
i(this, "connected", !1);
|
|
51
|
+
i(this, "stage", new b());
|
|
52
|
+
// 交互状态
|
|
53
|
+
i(this, "draggingElement", null);
|
|
54
|
+
i(this, "interactiveElements", []);
|
|
55
|
+
i(this, "wasInteracting", !1);
|
|
56
|
+
i(this, "handleMouseMove", () => {
|
|
46
57
|
this.mouseMoveId && clearTimeout(this.mouseMoveId), this.hover && !this.playing && this.setPlaying(!0), this.mouseMoveId = window.setTimeout(() => {
|
|
47
58
|
this.mouseMoveId = null, this.updateClass();
|
|
48
59
|
}, 2e3), this.updateClass();
|
|
49
60
|
});
|
|
50
|
-
|
|
61
|
+
i(this, "handleMouseLeave", () => {
|
|
51
62
|
this.hover && this.setPlaying(!1), this.mouseMoveId && (clearTimeout(this.mouseMoveId), this.mouseMoveId = null, this.updateClass());
|
|
52
63
|
});
|
|
53
|
-
|
|
64
|
+
i(this, "handleMouseDown", (t) => {
|
|
54
65
|
t.preventDefault();
|
|
55
66
|
});
|
|
56
|
-
|
|
67
|
+
i(this, "handleClick", () => {
|
|
68
|
+
if (this.wasInteracting) {
|
|
69
|
+
this.wasInteracting = !1;
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
57
72
|
this.auto || (this.handleMouseMove(), this.setPlaying(!this.playing), this.button.animate(
|
|
58
73
|
[
|
|
59
74
|
{ scale: "0.9" },
|
|
@@ -65,19 +80,60 @@ class w extends HTMLElement {
|
|
|
65
80
|
{ duration: 200 }
|
|
66
81
|
));
|
|
67
82
|
});
|
|
68
|
-
|
|
83
|
+
i(this, "render", async () => {
|
|
69
84
|
this.player && await this.stage.render(
|
|
70
85
|
this.player.playback.currentScene,
|
|
71
86
|
this.player.playback.previousScene
|
|
72
87
|
);
|
|
73
88
|
});
|
|
74
|
-
|
|
89
|
+
/**
|
|
90
|
+
* 处理指针按下
|
|
91
|
+
*/
|
|
92
|
+
i(this, "handlePointerDown", (t) => {
|
|
93
|
+
if (!this.interactive || this.state !== "ready")
|
|
94
|
+
return;
|
|
95
|
+
const e = this.getScenePosition(t);
|
|
96
|
+
if (!e)
|
|
97
|
+
return;
|
|
98
|
+
const a = this.findInteractiveElementAt(e);
|
|
99
|
+
a && (t.preventDefault(), t.stopPropagation(), this.draggingElement = a, this.wasInteracting = !0, a.startDrag(), this.setPointerCapture(t.pointerId), this.style.cursor = "grabbing");
|
|
100
|
+
});
|
|
101
|
+
/**
|
|
102
|
+
* 处理指针移动
|
|
103
|
+
*/
|
|
104
|
+
i(this, "handlePointerMove", (t) => {
|
|
105
|
+
if (!this.interactive || this.state !== "ready")
|
|
106
|
+
return;
|
|
107
|
+
const e = this.getScenePosition(t);
|
|
108
|
+
if (e)
|
|
109
|
+
if (this.draggingElement)
|
|
110
|
+
t.preventDefault(), this.draggingElement.drag(e), this.render();
|
|
111
|
+
else {
|
|
112
|
+
const a = this.findInteractiveElementAt(e);
|
|
113
|
+
this.style.cursor = a ? "grab" : "default";
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
/**
|
|
117
|
+
* 处理指针释放
|
|
118
|
+
*/
|
|
119
|
+
i(this, "handlePointerUp", (t) => {
|
|
120
|
+
this.interactive && this.draggingElement && (this.draggingElement.endDrag(), this.draggingElement = null, this.releasePointerCapture(t.pointerId), this.style.cursor = "default", this.render());
|
|
121
|
+
});
|
|
122
|
+
this.root = this.attachShadow({ mode: "open" }), this.root.innerHTML = M, this.overlay = this.root.querySelector(".overlay"), this.button = this.root.querySelector(".button"), this.canvas = this.stage.finalBuffer, this.canvas.classList.add("canvas"), this.root.prepend(this.canvas), this.overlay.addEventListener("click", this.handleClick), this.overlay.addEventListener("mousemove", this.handleMouseMove), this.overlay.addEventListener("mouseleave", this.handleMouseLeave), this.button.addEventListener("mousedown", this.handleMouseDown), this.addEventListener("pointerdown", this.handlePointerDown), this.addEventListener("pointermove", this.handlePointerMove), this.addEventListener("pointerup", this.handlePointerUp), this.addEventListener("pointercancel", this.handlePointerUp), this.setState(
|
|
75
123
|
"initial"
|
|
76
124
|
/* Initial */
|
|
77
125
|
);
|
|
78
126
|
}
|
|
79
127
|
static get observedAttributes() {
|
|
80
|
-
return [
|
|
128
|
+
return [
|
|
129
|
+
"src",
|
|
130
|
+
"quality",
|
|
131
|
+
"width",
|
|
132
|
+
"height",
|
|
133
|
+
"auto",
|
|
134
|
+
"variables",
|
|
135
|
+
"interactive"
|
|
136
|
+
];
|
|
81
137
|
}
|
|
82
138
|
get auto() {
|
|
83
139
|
return !!this.getAttribute("auto");
|
|
@@ -85,6 +141,9 @@ class w extends HTMLElement {
|
|
|
85
141
|
get hover() {
|
|
86
142
|
return this.getAttribute("auto") === "hover";
|
|
87
143
|
}
|
|
144
|
+
get interactive() {
|
|
145
|
+
return this.hasAttribute("interactive");
|
|
146
|
+
}
|
|
88
147
|
get quality() {
|
|
89
148
|
const t = this.getAttribute("quality");
|
|
90
149
|
return t ? parseFloat(t) : this.defaultSettings.resolutionScale;
|
|
@@ -109,51 +168,51 @@ class w extends HTMLElement {
|
|
|
109
168
|
this.state = t, this.setPlaying(this.playing);
|
|
110
169
|
}
|
|
111
170
|
setPlaying(t) {
|
|
112
|
-
var
|
|
113
|
-
this.state === "ready" && (t || this.auto && !this.hover) ? ((
|
|
171
|
+
var e, a;
|
|
172
|
+
this.state === "ready" && (t || this.auto && !this.hover) ? ((e = this.player) == null || e.togglePlayback(!0), this.playing = !0) : ((a = this.player) == null || a.togglePlayback(!1), this.playing = !1), this.updateClass();
|
|
114
173
|
}
|
|
115
174
|
updateClass() {
|
|
116
|
-
this.overlay.className = `overlay state-${this.state}`, this.canvas.className = `canvas state-${this.state}`, this.overlay.classList.toggle("playing", this.playing), this.overlay.classList.toggle("auto", this.auto), this.overlay.classList.toggle("hover", this.mouseMoveId !== null), this.connected && (this.mouseMoveId !== null || !this.playing ? this.dataset.overlay = "" : delete this.dataset.overlay);
|
|
175
|
+
this.overlay.className = `overlay state-${this.state}`, this.canvas.className = `canvas state-${this.state}`, this.overlay.classList.toggle("playing", this.playing), this.overlay.classList.toggle("auto", this.auto), this.overlay.classList.toggle("hover", this.mouseMoveId !== null), this.overlay.classList.toggle("interactive-mode", this.interactive), this.connected && (this.mouseMoveId !== null || !this.playing ? this.dataset.overlay = "" : delete this.dataset.overlay);
|
|
117
176
|
}
|
|
118
177
|
async updateSource(t) {
|
|
119
|
-
var
|
|
178
|
+
var n, o, h, c;
|
|
120
179
|
this.setState(
|
|
121
180
|
"initial"
|
|
122
181
|
/* Initial */
|
|
123
|
-
), (
|
|
124
|
-
let
|
|
182
|
+
), (n = this.abortController) == null || n.abort(), this.abortController = new AbortController();
|
|
183
|
+
let e;
|
|
125
184
|
try {
|
|
126
|
-
const
|
|
185
|
+
const l = import(
|
|
127
186
|
/* webpackIgnore: true */
|
|
128
187
|
/* @vite-ignore */
|
|
129
188
|
t
|
|
130
|
-
),
|
|
131
|
-
await Promise.any([
|
|
189
|
+
), u = new Promise((d) => setTimeout(d, 200));
|
|
190
|
+
await Promise.any([u, l]), this.setState(
|
|
132
191
|
"loading"
|
|
133
192
|
/* Loading */
|
|
134
|
-
),
|
|
135
|
-
} catch (
|
|
136
|
-
console.error(
|
|
193
|
+
), e = (await l).default;
|
|
194
|
+
} catch (l) {
|
|
195
|
+
console.error(l), this.setState(
|
|
137
196
|
"error"
|
|
138
197
|
/* Error */
|
|
139
198
|
);
|
|
140
199
|
return;
|
|
141
200
|
}
|
|
142
|
-
this.defaultSettings =
|
|
143
|
-
const
|
|
144
|
-
|
|
201
|
+
this.defaultSettings = e.meta.getFullRenderingSettings();
|
|
202
|
+
const a = new f(e);
|
|
203
|
+
a.setVariables(this.variables), this.finished = !1, (o = this.player) == null || o.onRender.unsubscribe(this.render), (h = this.player) == null || h.togglePlayback(!1), (c = this.player) == null || c.deactivate(), this.project = e, this.player = a, this.updateSettings(), this.player.onRender.subscribe(this.render), this.player.togglePlayback(this.playing), this.setState(
|
|
145
204
|
"ready"
|
|
146
205
|
/* Ready */
|
|
147
206
|
);
|
|
148
207
|
}
|
|
149
|
-
attributeChangedCallback(t,
|
|
150
|
-
var
|
|
208
|
+
attributeChangedCallback(t, e, a) {
|
|
209
|
+
var n;
|
|
151
210
|
switch (t) {
|
|
152
211
|
case "auto":
|
|
153
212
|
this.setPlaying(this.playing);
|
|
154
213
|
break;
|
|
155
214
|
case "src":
|
|
156
|
-
this.updateSource(
|
|
215
|
+
this.updateSource(a);
|
|
157
216
|
break;
|
|
158
217
|
case "quality":
|
|
159
218
|
case "width":
|
|
@@ -161,24 +220,72 @@ class w extends HTMLElement {
|
|
|
161
220
|
this.updateSettings();
|
|
162
221
|
break;
|
|
163
222
|
case "variables":
|
|
164
|
-
(
|
|
223
|
+
(n = this.player) == null || n.setVariables(this.variables);
|
|
224
|
+
break;
|
|
225
|
+
case "interactive":
|
|
226
|
+
this.updateInteractiveState();
|
|
227
|
+
break;
|
|
165
228
|
}
|
|
166
229
|
}
|
|
167
230
|
disconnectedCallback() {
|
|
168
|
-
var t,
|
|
169
|
-
this.connected = !1, (t = this.player) == null || t.deactivate(), (
|
|
231
|
+
var t, e;
|
|
232
|
+
this.connected = !1, (t = this.player) == null || t.deactivate(), (e = this.player) == null || e.onRender.unsubscribe(this.render);
|
|
170
233
|
}
|
|
171
234
|
connectedCallback() {
|
|
172
|
-
var t,
|
|
173
|
-
this.connected = !0, (t = this.player) == null || t.activate(), (
|
|
235
|
+
var t, e;
|
|
236
|
+
this.connected = !0, (t = this.player) == null || t.activate(), (e = this.player) == null || e.onRender.subscribe(this.render), this.updateInteractiveState();
|
|
174
237
|
}
|
|
175
238
|
updateSettings() {
|
|
176
239
|
const t = {
|
|
177
240
|
...this.defaultSettings,
|
|
178
|
-
size: new
|
|
241
|
+
size: new g(this.width, this.height),
|
|
179
242
|
resolutionScale: this.quality
|
|
180
243
|
};
|
|
181
244
|
this.stage.configure(t), this.player.configure(t);
|
|
182
245
|
}
|
|
246
|
+
// ============ 交互系统 ============
|
|
247
|
+
/**
|
|
248
|
+
* 更新交互状态
|
|
249
|
+
*/
|
|
250
|
+
updateInteractiveState() {
|
|
251
|
+
this.interactive ? (this.overlay.classList.add("interactive-mode"), this.style.cursor = "default", this.refreshInteractiveElements()) : (this.overlay.classList.remove("interactive-mode"), this.style.cursor = "", this.interactiveElements = [], this.draggingElement = null);
|
|
252
|
+
}
|
|
253
|
+
/**
|
|
254
|
+
* 刷新可交互元素列表
|
|
255
|
+
*/
|
|
256
|
+
refreshInteractiveElements() {
|
|
257
|
+
var e;
|
|
258
|
+
this.interactiveElements = [];
|
|
259
|
+
const t = (e = this.player) == null ? void 0 : e.playback.currentScene;
|
|
260
|
+
if (p(t))
|
|
261
|
+
try {
|
|
262
|
+
const n = t.getView().findAll(P);
|
|
263
|
+
this.interactiveElements = n.filter((o) => o.interactive());
|
|
264
|
+
} catch {
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
/**
|
|
268
|
+
* 获取事件的场景坐标
|
|
269
|
+
*/
|
|
270
|
+
getScenePosition(t) {
|
|
271
|
+
var d;
|
|
272
|
+
const e = (d = this.player) == null ? void 0 : d.playback.currentScene;
|
|
273
|
+
if (!p(e))
|
|
274
|
+
return null;
|
|
275
|
+
const a = this.canvas.getBoundingClientRect(), n = this.width, o = this.height, h = (t.clientX - a.left) / a.width, c = (t.clientY - a.top) / a.height, l = (h - 0.5) * n, u = (c - 0.5) * o;
|
|
276
|
+
return new g(l, u);
|
|
277
|
+
}
|
|
278
|
+
/**
|
|
279
|
+
* 在指定位置查找可交互元素
|
|
280
|
+
*/
|
|
281
|
+
findInteractiveElementAt(t) {
|
|
282
|
+
this.refreshInteractiveElements();
|
|
283
|
+
for (let e = this.interactiveElements.length - 1; e >= 0; e--) {
|
|
284
|
+
const a = this.interactiveElements[e];
|
|
285
|
+
if (a.containsPoint(t))
|
|
286
|
+
return a;
|
|
287
|
+
}
|
|
288
|
+
return null;
|
|
289
|
+
}
|
|
183
290
|
}
|
|
184
|
-
customElements.get(
|
|
291
|
+
customElements.get(y) || customElements.define(y, k);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wangyaoshen/locus-player",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12-dev",
|
|
4
4
|
"description": "A custom element for displaying animations made with Motion Canvas",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"types": "types/main.d.ts",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"types"
|
|
23
23
|
],
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@wangyaoshen/locus-core": "0.1.
|
|
25
|
+
"@wangyaoshen/locus-core": "0.1.12-dev",
|
|
26
26
|
"sass": "^1.58.0",
|
|
27
27
|
"terser": "^5.16.1"
|
|
28
28
|
}
|