animot-presenter 0.5.4 → 0.5.5
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/AnimotPresenter.svelte +3 -3
- package/dist/FlowMarkers.svelte +59 -8
- package/dist/FlowMarkers.svelte.d.ts +4 -0
- package/dist/cdn/animot-presenter.css +1 -1
- package/dist/cdn/animot-presenter.esm.js +1419 -1398
- package/dist/cdn/animot-presenter.min.js +9 -9
- package/dist/types.d.ts +2 -0
- package/dist/utils/arrow-clip-draw.d.ts +4 -0
- package/dist/utils/arrow-clip-draw.js +15 -2
- package/package.json +84 -84
package/dist/types.d.ts
CHANGED
|
@@ -203,7 +203,9 @@ export interface ShapeElement extends BaseElement {
|
|
|
203
203
|
type: 'shape';
|
|
204
204
|
shapeType: ShapeType;
|
|
205
205
|
fillColor: string;
|
|
206
|
+
fillOpacity?: number;
|
|
206
207
|
strokeColor: string;
|
|
208
|
+
strokeOpacity?: number;
|
|
207
209
|
strokeWidth: number;
|
|
208
210
|
strokeStyle?: StrokeStyle;
|
|
209
211
|
strokeDashGap?: number;
|
|
@@ -20,6 +20,10 @@ export interface ArrowClipDrawParams {
|
|
|
20
20
|
endY: number;
|
|
21
21
|
loop?: boolean;
|
|
22
22
|
reverse?: boolean;
|
|
23
|
+
/** Slide loop duration in ms. When provided AND loop=true (or mode='flow'),
|
|
24
|
+
* the effective animation duration is rounded so an integer number fits in
|
|
25
|
+
* slide_duration — guarantees seamless GIF loop. */
|
|
26
|
+
slideDuration?: number;
|
|
23
27
|
key?: unknown;
|
|
24
28
|
}
|
|
25
29
|
export declare function arrowClipDraw(node: SVGSVGElement, params: ArrowClipDrawParams): {
|
|
@@ -59,7 +59,13 @@ export function arrowClipDraw(node, params) {
|
|
|
59
59
|
}
|
|
60
60
|
const clipFull = clip(100); // fully hidden (100% inset on hide side)
|
|
61
61
|
const clipNone = clip(0);
|
|
62
|
-
|
|
62
|
+
// Round duration so an integer number of cycles fits in slide_duration.
|
|
63
|
+
// Without this, GIF loop boundary shows the arrow mid-draw → snap to
|
|
64
|
+
// invisible → re-draw, which the user perceives as a reset.
|
|
65
|
+
const requested = Math.max(50, params.duration);
|
|
66
|
+
const dur = params.slideDuration && params.slideDuration > 0 && (params.loop || params.mode === 'flow')
|
|
67
|
+
? params.slideDuration / Math.max(1, Math.round(params.slideDuration / requested))
|
|
68
|
+
: requested;
|
|
63
69
|
const start = performance.now();
|
|
64
70
|
const m = params.mode;
|
|
65
71
|
// FLOW: marching ants — animate dashoffset continuously, keep base pattern.
|
|
@@ -156,10 +162,17 @@ export function arrowClipDraw(node, params) {
|
|
|
156
162
|
reg.push(run);
|
|
157
163
|
node.__svgAnimRestart = run;
|
|
158
164
|
}
|
|
165
|
+
let lastKey = params.key;
|
|
159
166
|
return {
|
|
160
167
|
update(p) {
|
|
168
|
+
// Only restart when the explicit key actually changed (avoids constant
|
|
169
|
+
// resets from Svelte's per-render fresh params object).
|
|
170
|
+
const keyChanged = p.key !== lastKey;
|
|
161
171
|
params = p;
|
|
162
|
-
|
|
172
|
+
if (keyChanged) {
|
|
173
|
+
lastKey = p.key;
|
|
174
|
+
queueMicrotask(run);
|
|
175
|
+
}
|
|
163
176
|
},
|
|
164
177
|
destroy() {
|
|
165
178
|
reset();
|
package/package.json
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "animot-presenter",
|
|
3
|
-
"version": "0.5.
|
|
4
|
-
"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"svelte": "./dist/index.js",
|
|
7
|
-
"types": "./dist/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"svelte": "./dist/index.js",
|
|
11
|
-
"types": "./dist/index.d.ts",
|
|
12
|
-
"default": "./dist/index.js"
|
|
13
|
-
},
|
|
14
|
-
"./element": {
|
|
15
|
-
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
16
|
-
"require": "./dist/cdn/animot-presenter.min.js"
|
|
17
|
-
},
|
|
18
|
-
"./cdn": {
|
|
19
|
-
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
20
|
-
"require": "./dist/cdn/animot-presenter.min.js"
|
|
21
|
-
},
|
|
22
|
-
"./styles": "./dist/styles/presenter.css"
|
|
23
|
-
},
|
|
24
|
-
"files": [
|
|
25
|
-
"dist",
|
|
26
|
-
"!dist/**/*.test.*",
|
|
27
|
-
"!dist/**/*.spec.*"
|
|
28
|
-
],
|
|
29
|
-
"scripts": {
|
|
30
|
-
"dev": "vite dev",
|
|
31
|
-
"build": "npm run build:svelte && npm run build:element",
|
|
32
|
-
"build:svelte": "svelte-kit sync && svelte-package -o dist",
|
|
33
|
-
"build:element": "vite build --config vite.element.config.ts",
|
|
34
|
-
"package": "npm run build",
|
|
35
|
-
"preview": "vite preview",
|
|
36
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
37
|
-
"prepublishOnly": "npm run build"
|
|
38
|
-
},
|
|
39
|
-
"peerDependencies": {
|
|
40
|
-
"svelte": "^5.0.0"
|
|
41
|
-
},
|
|
42
|
-
"peerDependenciesMeta": {
|
|
43
|
-
"svelte": {
|
|
44
|
-
"optional": true
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
"devDependencies": {
|
|
48
|
-
"@sveltejs/adapter-auto": "^3.0.0",
|
|
49
|
-
"@sveltejs/kit": "^2.0.0",
|
|
50
|
-
"@sveltejs/package": "^2.0.0",
|
|
51
|
-
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
52
|
-
"@types/canvas-confetti": "^1.9.0",
|
|
53
|
-
"svelte": "^5.0.0",
|
|
54
|
-
"svelte-check": "^4.0.0",
|
|
55
|
-
"typescript": "^5.0.0",
|
|
56
|
-
"vite": "^5.0.0"
|
|
57
|
-
},
|
|
58
|
-
"dependencies": {
|
|
59
|
-
"@animotion/motion": "^2.0.1",
|
|
60
|
-
"canvas-confetti": "^1.9.4",
|
|
61
|
-
"shiki": "^1.0.0"
|
|
62
|
-
},
|
|
63
|
-
"keywords": [
|
|
64
|
-
"svelte",
|
|
65
|
-
"react",
|
|
66
|
-
"vue",
|
|
67
|
-
"angular",
|
|
68
|
-
"web-component",
|
|
69
|
-
"animation",
|
|
70
|
-
"presentation",
|
|
71
|
-
"slides",
|
|
72
|
-
"morphing",
|
|
73
|
-
"animot",
|
|
74
|
-
"code-animation",
|
|
75
|
-
"typewriter",
|
|
76
|
-
"charts",
|
|
77
|
-
"particles"
|
|
78
|
-
],
|
|
79
|
-
"license": "BUSL-1.1",
|
|
80
|
-
"repository": {
|
|
81
|
-
"type": "git",
|
|
82
|
-
"url": "https://github.com/beeblock/animot-presenter"
|
|
83
|
-
}
|
|
84
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "animot-presenter",
|
|
3
|
+
"version": "0.5.5",
|
|
4
|
+
"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"svelte": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"svelte": "./dist/index.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"default": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./element": {
|
|
15
|
+
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
16
|
+
"require": "./dist/cdn/animot-presenter.min.js"
|
|
17
|
+
},
|
|
18
|
+
"./cdn": {
|
|
19
|
+
"import": "./dist/cdn/animot-presenter.esm.js",
|
|
20
|
+
"require": "./dist/cdn/animot-presenter.min.js"
|
|
21
|
+
},
|
|
22
|
+
"./styles": "./dist/styles/presenter.css"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"!dist/**/*.test.*",
|
|
27
|
+
"!dist/**/*.spec.*"
|
|
28
|
+
],
|
|
29
|
+
"scripts": {
|
|
30
|
+
"dev": "vite dev",
|
|
31
|
+
"build": "npm run build:svelte && npm run build:element",
|
|
32
|
+
"build:svelte": "svelte-kit sync && svelte-package -o dist",
|
|
33
|
+
"build:element": "vite build --config vite.element.config.ts",
|
|
34
|
+
"package": "npm run build",
|
|
35
|
+
"preview": "vite preview",
|
|
36
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
37
|
+
"prepublishOnly": "npm run build"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"svelte": "^5.0.0"
|
|
41
|
+
},
|
|
42
|
+
"peerDependenciesMeta": {
|
|
43
|
+
"svelte": {
|
|
44
|
+
"optional": true
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@sveltejs/adapter-auto": "^3.0.0",
|
|
49
|
+
"@sveltejs/kit": "^2.0.0",
|
|
50
|
+
"@sveltejs/package": "^2.0.0",
|
|
51
|
+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
52
|
+
"@types/canvas-confetti": "^1.9.0",
|
|
53
|
+
"svelte": "^5.0.0",
|
|
54
|
+
"svelte-check": "^4.0.0",
|
|
55
|
+
"typescript": "^5.0.0",
|
|
56
|
+
"vite": "^5.0.0"
|
|
57
|
+
},
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"@animotion/motion": "^2.0.1",
|
|
60
|
+
"canvas-confetti": "^1.9.4",
|
|
61
|
+
"shiki": "^1.0.0"
|
|
62
|
+
},
|
|
63
|
+
"keywords": [
|
|
64
|
+
"svelte",
|
|
65
|
+
"react",
|
|
66
|
+
"vue",
|
|
67
|
+
"angular",
|
|
68
|
+
"web-component",
|
|
69
|
+
"animation",
|
|
70
|
+
"presentation",
|
|
71
|
+
"slides",
|
|
72
|
+
"morphing",
|
|
73
|
+
"animot",
|
|
74
|
+
"code-animation",
|
|
75
|
+
"typewriter",
|
|
76
|
+
"charts",
|
|
77
|
+
"particles"
|
|
78
|
+
],
|
|
79
|
+
"license": "BUSL-1.1",
|
|
80
|
+
"repository": {
|
|
81
|
+
"type": "git",
|
|
82
|
+
"url": "https://github.com/beeblock/animot-presenter"
|
|
83
|
+
}
|
|
84
|
+
}
|