gsap-offset-path 1.0.0

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +78 -0
  2. package/dist/index.d.ts +78 -0
  3. package/dist/index.js +153 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +122 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/package.json +46 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,78 @@
1
+ /** Join types for path offsetting corners */
2
+ declare enum JoinType {
3
+ Square = 0,
4
+ Bevel = 1,
5
+ Round = 2,
6
+ Miter = 3
7
+ }
8
+ /** End types for open path endings */
9
+ declare enum EndType {
10
+ Polygon = 0,
11
+ Joined = 1,
12
+ Butt = 2,
13
+ Square = 3,
14
+ Round = 4
15
+ }
16
+ /** Options for the offsetPath GSAP property */
17
+ interface OffsetPathOptions {
18
+ /** Offset amount in SVG units. Positive = expand outward, negative = shrink inward. */
19
+ offset: number;
20
+ /** How to join offset segments at corners. Default: Round */
21
+ joinType?: JoinType;
22
+ /** How to end open paths. Default: Polygon */
23
+ endType?: EndType;
24
+ /** Limit on miter joins. Default: 2.0 */
25
+ miterLimit?: number;
26
+ /** Curve approximation tolerance. Default: 0.25 */
27
+ arcTolerance?: number;
28
+ /** Anchor X position (0.0 = left, 1.0 = right). Keeps this point fixed during offset. */
29
+ originX?: number;
30
+ /** Anchor Y position (0.0 = top, 1.0 = bottom). Keeps this point fixed during offset. */
31
+ originY?: number;
32
+ }
33
+ /** Configuration for WASM initialization */
34
+ interface InitOptions {
35
+ /** URL or path to the .wasm binary (e.g. "/wasm/clipper_offset_bg.wasm") */
36
+ wasmUrl: string;
37
+ /** URL or path to the WASM glue JS (e.g. "/wasm/clipper_offset.js") */
38
+ glueUrl: string;
39
+ }
40
+ declare module 'gsap' {
41
+ interface TweenVars {
42
+ offsetPath?: OffsetPathOptions | number;
43
+ }
44
+ }
45
+
46
+ /**
47
+ * Initialize the WASM module for the OffsetPath plugin.
48
+ * Must be called (and awaited) before any offsetPath animations will render.
49
+ *
50
+ * @param options.glueUrl - URL to the WASM glue JS file (clipper_offset.js)
51
+ * @param options.wasmUrl - URL to the .wasm binary
52
+ */
53
+ declare function initOffsetPath(options: InitOptions): Promise<void>;
54
+ /**
55
+ * Returns true if the WASM module has been initialized and is ready.
56
+ */
57
+ declare function isReady(): boolean;
58
+ /**
59
+ * GSAP OffsetPath Plugin
60
+ *
61
+ * Animates SVG path offsetting using Clipper2 WASM. Supports expanding
62
+ * (positive offset) and shrinking (negative offset) SVG paths with
63
+ * configurable join types, anchor points, and smooth interpolation.
64
+ *
65
+ * Usage:
66
+ * ```ts
67
+ * gsap.registerPlugin(OffsetPathPlugin);
68
+ * await initOffsetPath();
69
+ *
70
+ * gsap.to(svgPathElement, {
71
+ * offsetPath: { offset: -20, originX: 0.5, originY: 1 },
72
+ * duration: 1
73
+ * });
74
+ * ```
75
+ */
76
+ declare const OffsetPathPlugin: gsap.Plugin;
77
+
78
+ export { EndType, type InitOptions, JoinType, type OffsetPathOptions, OffsetPathPlugin, initOffsetPath, isReady };
package/dist/index.d.ts ADDED
@@ -0,0 +1,78 @@
1
+ /** Join types for path offsetting corners */
2
+ declare enum JoinType {
3
+ Square = 0,
4
+ Bevel = 1,
5
+ Round = 2,
6
+ Miter = 3
7
+ }
8
+ /** End types for open path endings */
9
+ declare enum EndType {
10
+ Polygon = 0,
11
+ Joined = 1,
12
+ Butt = 2,
13
+ Square = 3,
14
+ Round = 4
15
+ }
16
+ /** Options for the offsetPath GSAP property */
17
+ interface OffsetPathOptions {
18
+ /** Offset amount in SVG units. Positive = expand outward, negative = shrink inward. */
19
+ offset: number;
20
+ /** How to join offset segments at corners. Default: Round */
21
+ joinType?: JoinType;
22
+ /** How to end open paths. Default: Polygon */
23
+ endType?: EndType;
24
+ /** Limit on miter joins. Default: 2.0 */
25
+ miterLimit?: number;
26
+ /** Curve approximation tolerance. Default: 0.25 */
27
+ arcTolerance?: number;
28
+ /** Anchor X position (0.0 = left, 1.0 = right). Keeps this point fixed during offset. */
29
+ originX?: number;
30
+ /** Anchor Y position (0.0 = top, 1.0 = bottom). Keeps this point fixed during offset. */
31
+ originY?: number;
32
+ }
33
+ /** Configuration for WASM initialization */
34
+ interface InitOptions {
35
+ /** URL or path to the .wasm binary (e.g. "/wasm/clipper_offset_bg.wasm") */
36
+ wasmUrl: string;
37
+ /** URL or path to the WASM glue JS (e.g. "/wasm/clipper_offset.js") */
38
+ glueUrl: string;
39
+ }
40
+ declare module 'gsap' {
41
+ interface TweenVars {
42
+ offsetPath?: OffsetPathOptions | number;
43
+ }
44
+ }
45
+
46
+ /**
47
+ * Initialize the WASM module for the OffsetPath plugin.
48
+ * Must be called (and awaited) before any offsetPath animations will render.
49
+ *
50
+ * @param options.glueUrl - URL to the WASM glue JS file (clipper_offset.js)
51
+ * @param options.wasmUrl - URL to the .wasm binary
52
+ */
53
+ declare function initOffsetPath(options: InitOptions): Promise<void>;
54
+ /**
55
+ * Returns true if the WASM module has been initialized and is ready.
56
+ */
57
+ declare function isReady(): boolean;
58
+ /**
59
+ * GSAP OffsetPath Plugin
60
+ *
61
+ * Animates SVG path offsetting using Clipper2 WASM. Supports expanding
62
+ * (positive offset) and shrinking (negative offset) SVG paths with
63
+ * configurable join types, anchor points, and smooth interpolation.
64
+ *
65
+ * Usage:
66
+ * ```ts
67
+ * gsap.registerPlugin(OffsetPathPlugin);
68
+ * await initOffsetPath();
69
+ *
70
+ * gsap.to(svgPathElement, {
71
+ * offsetPath: { offset: -20, originX: 0.5, originY: 1 },
72
+ * duration: 1
73
+ * });
74
+ * ```
75
+ */
76
+ declare const OffsetPathPlugin: gsap.Plugin;
77
+
78
+ export { EndType, type InitOptions, JoinType, type OffsetPathOptions, OffsetPathPlugin, initOffsetPath, isReady };
package/dist/index.js ADDED
@@ -0,0 +1,153 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ EndType: () => EndType,
24
+ JoinType: () => JoinType,
25
+ OffsetPathPlugin: () => OffsetPathPlugin,
26
+ initOffsetPath: () => initOffsetPath,
27
+ isReady: () => isReady
28
+ });
29
+ module.exports = __toCommonJS(index_exports);
30
+
31
+ // src/OffsetPathPlugin.ts
32
+ var wasmModule = null;
33
+ var wasmInitialized = false;
34
+ var wasmInitPromise = null;
35
+ async function initOffsetPath(options) {
36
+ if (wasmInitialized) return;
37
+ if (wasmInitPromise) return wasmInitPromise;
38
+ wasmInitPromise = (async () => {
39
+ try {
40
+ const module2 = await import(
41
+ /* webpackIgnore: true */
42
+ options.glueUrl
43
+ );
44
+ await module2.default(options.wasmUrl);
45
+ wasmModule = module2;
46
+ wasmInitialized = true;
47
+ } catch (error) {
48
+ wasmInitPromise = null;
49
+ throw error;
50
+ }
51
+ })();
52
+ return wasmInitPromise;
53
+ }
54
+ function isReady() {
55
+ return wasmInitialized;
56
+ }
57
+ var OffsetPathPlugin = {
58
+ name: "offsetPath",
59
+ version: "1.0.0",
60
+ init(target, value) {
61
+ if (!(target instanceof SVGPathElement)) {
62
+ console.warn("[OffsetPathPlugin] Target must be SVGPathElement, got:", target);
63
+ return false;
64
+ }
65
+ const originalPath = target.getAttribute("d");
66
+ if (!originalPath) {
67
+ console.warn("[OffsetPathPlugin] Path element has no 'd' attribute");
68
+ return false;
69
+ }
70
+ const options = typeof value === "number" ? { offset: value } : { ...value };
71
+ const data = this;
72
+ data._target = target;
73
+ data._originalPath = originalPath;
74
+ data._options = {
75
+ joinType: options.joinType ?? 2,
76
+ // Round
77
+ endType: options.endType ?? 0,
78
+ // Polygon
79
+ miterLimit: options.miterLimit ?? 2,
80
+ arcTolerance: options.arcTolerance ?? 0.25,
81
+ originX: options.originX ?? null,
82
+ originY: options.originY ?? null
83
+ };
84
+ data._startOffset = target.__gsapOffsetPath ?? 0;
85
+ data._endOffset = options.offset;
86
+ return true;
87
+ },
88
+ render(progress, data) {
89
+ const offsetAmount = data._startOffset + (data._endOffset - data._startOffset) * progress;
90
+ data._target.__gsapOffsetPath = offsetAmount;
91
+ if (!wasmInitialized || !wasmModule) {
92
+ return;
93
+ }
94
+ try {
95
+ if (Math.abs(offsetAmount) < 1e-3) {
96
+ data._target.style.visibility = "visible";
97
+ data._target.setAttribute("d", data._originalPath);
98
+ return;
99
+ }
100
+ const result = wasmModule.offset_svg_path(
101
+ data._originalPath,
102
+ offsetAmount,
103
+ data._options.joinType,
104
+ data._options.endType,
105
+ data._options.miterLimit,
106
+ data._options.arcTolerance,
107
+ data._options.originX,
108
+ data._options.originY
109
+ );
110
+ if (!result || result.trim() === "") {
111
+ data._target.style.visibility = "hidden";
112
+ return;
113
+ }
114
+ data._target.style.visibility = "visible";
115
+ data._target.setAttribute("d", result);
116
+ } catch (error) {
117
+ console.error("[OffsetPathPlugin] Error during render:", error);
118
+ data._target.style.visibility = "hidden";
119
+ }
120
+ },
121
+ kill() {
122
+ const data = this;
123
+ if (data._target && data._originalPath) {
124
+ data._target.setAttribute("d", data._originalPath);
125
+ }
126
+ }
127
+ };
128
+
129
+ // src/types.ts
130
+ var JoinType = /* @__PURE__ */ ((JoinType2) => {
131
+ JoinType2[JoinType2["Square"] = 0] = "Square";
132
+ JoinType2[JoinType2["Bevel"] = 1] = "Bevel";
133
+ JoinType2[JoinType2["Round"] = 2] = "Round";
134
+ JoinType2[JoinType2["Miter"] = 3] = "Miter";
135
+ return JoinType2;
136
+ })(JoinType || {});
137
+ var EndType = /* @__PURE__ */ ((EndType2) => {
138
+ EndType2[EndType2["Polygon"] = 0] = "Polygon";
139
+ EndType2[EndType2["Joined"] = 1] = "Joined";
140
+ EndType2[EndType2["Butt"] = 2] = "Butt";
141
+ EndType2[EndType2["Square"] = 3] = "Square";
142
+ EndType2[EndType2["Round"] = 4] = "Round";
143
+ return EndType2;
144
+ })(EndType || {});
145
+ // Annotate the CommonJS export names for ESM import in node:
146
+ 0 && (module.exports = {
147
+ EndType,
148
+ JoinType,
149
+ OffsetPathPlugin,
150
+ initOffsetPath,
151
+ isReady
152
+ });
153
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/OffsetPathPlugin.ts","../src/types.ts"],"sourcesContent":["export { OffsetPathPlugin, initOffsetPath, isReady } from './OffsetPathPlugin';\r\nexport { JoinType, EndType } from './types';\r\nexport type { OffsetPathOptions, InitOptions } from './types';\r\n","import { gsap } from 'gsap';\r\nimport type { OffsetPathOptions, ClipperOffsetWasm, InitOptions } from './types';\r\n\r\n// Module state\r\nlet wasmModule: ClipperOffsetWasm | null = null;\r\nlet wasmInitialized = false;\r\nlet wasmInitPromise: Promise<void> | null = null;\r\n\r\n/**\r\n * Initialize the WASM module for the OffsetPath plugin.\r\n * Must be called (and awaited) before any offsetPath animations will render.\r\n *\r\n * @param options.glueUrl - URL to the WASM glue JS file (clipper_offset.js)\r\n * @param options.wasmUrl - URL to the .wasm binary\r\n */\r\nexport async function initOffsetPath(options: InitOptions): Promise<void> {\r\n if (wasmInitialized) return;\r\n if (wasmInitPromise) return wasmInitPromise;\r\n\r\n wasmInitPromise = (async () => {\r\n try {\r\n const module: ClipperOffsetWasm = await import(\r\n /* webpackIgnore: true */\r\n options.glueUrl\r\n );\r\n\r\n await module.default(options.wasmUrl);\r\n\r\n wasmModule = module;\r\n wasmInitialized = true;\r\n } catch (error) {\r\n wasmInitPromise = null;\r\n throw error;\r\n }\r\n })();\r\n\r\n return wasmInitPromise;\r\n}\r\n\r\n/**\r\n * Returns true if the WASM module has been initialized and is ready.\r\n */\r\nexport function isReady(): boolean {\r\n return wasmInitialized;\r\n}\r\n\r\n/**\r\n * GSAP OffsetPath Plugin\r\n *\r\n * Animates SVG path offsetting using Clipper2 WASM. Supports expanding\r\n * (positive offset) and shrinking (negative offset) SVG paths with\r\n * configurable join types, anchor points, and smooth interpolation.\r\n *\r\n * Usage:\r\n * ```ts\r\n * gsap.registerPlugin(OffsetPathPlugin);\r\n * await initOffsetPath();\r\n *\r\n * gsap.to(svgPathElement, {\r\n * offsetPath: { offset: -20, originX: 0.5, originY: 1 },\r\n * duration: 1\r\n * });\r\n * ```\r\n */\r\nexport const OffsetPathPlugin: gsap.Plugin = {\r\n name: 'offsetPath',\r\n version: '1.0.0',\r\n\r\n init(target: any, value: OffsetPathOptions | number) {\r\n // Validate target is SVGPathElement\r\n if (!(target instanceof SVGPathElement)) {\r\n console.warn('[OffsetPathPlugin] Target must be SVGPathElement, got:', target);\r\n return false;\r\n }\r\n\r\n // Store original path data\r\n const originalPath = target.getAttribute('d');\r\n if (!originalPath) {\r\n console.warn(\"[OffsetPathPlugin] Path element has no 'd' attribute\");\r\n return false;\r\n }\r\n\r\n // Parse options\r\n const options: OffsetPathOptions =\r\n typeof value === 'number' ? { offset: value } : { ...value };\r\n\r\n // Store plugin state\r\n const data = this as any;\r\n data._target = target;\r\n data._originalPath = originalPath;\r\n data._options = {\r\n joinType: options.joinType ?? 2, // Round\r\n endType: options.endType ?? 0, // Polygon\r\n miterLimit: options.miterLimit ?? 2.0,\r\n arcTolerance: options.arcTolerance ?? 0.25,\r\n originX: options.originX ?? null,\r\n originY: options.originY ?? null,\r\n };\r\n\r\n // Read current offset from element for animation chaining\r\n data._startOffset = (target as any).__gsapOffsetPath ?? 0;\r\n data._endOffset = options.offset;\r\n\r\n return true;\r\n },\r\n\r\n render(progress: number, data: any) {\r\n const offsetAmount =\r\n data._startOffset + (data._endOffset - data._startOffset) * progress;\r\n\r\n // Track current offset on target for chaining\r\n (data._target as any).__gsapOffsetPath = offsetAmount;\r\n\r\n if (!wasmInitialized || !wasmModule) {\r\n return;\r\n }\r\n\r\n try {\r\n // Return to original path at zero offset\r\n if (Math.abs(offsetAmount) < 0.001) {\r\n data._target.style.visibility = 'visible';\r\n data._target.setAttribute('d', data._originalPath);\r\n return;\r\n }\r\n\r\n const result = wasmModule.offset_svg_path(\r\n data._originalPath,\r\n offsetAmount,\r\n data._options.joinType,\r\n data._options.endType,\r\n data._options.miterLimit,\r\n data._options.arcTolerance,\r\n data._options.originX,\r\n data._options.originY,\r\n );\r\n\r\n // Empty result means path deflated to nothing — hide the element\r\n if (!result || result.trim() === '') {\r\n data._target.style.visibility = 'hidden';\r\n return;\r\n }\r\n\r\n data._target.style.visibility = 'visible';\r\n data._target.setAttribute('d', result);\r\n } catch (error) {\r\n console.error('[OffsetPathPlugin] Error during render:', error);\r\n data._target.style.visibility = 'hidden';\r\n }\r\n },\r\n\r\n kill() {\r\n const data = this as any;\r\n if (data._target && data._originalPath) {\r\n data._target.setAttribute('d', data._originalPath);\r\n }\r\n },\r\n};\r\n","/** Join types for path offsetting corners */\r\nexport enum JoinType {\r\n Square = 0,\r\n Bevel = 1,\r\n Round = 2,\r\n Miter = 3,\r\n}\r\n\r\n/** End types for open path endings */\r\nexport enum EndType {\r\n Polygon = 0,\r\n Joined = 1,\r\n Butt = 2,\r\n Square = 3,\r\n Round = 4,\r\n}\r\n\r\n/** Options for the offsetPath GSAP property */\r\nexport interface OffsetPathOptions {\r\n /** Offset amount in SVG units. Positive = expand outward, negative = shrink inward. */\r\n offset: number;\r\n /** How to join offset segments at corners. Default: Round */\r\n joinType?: JoinType;\r\n /** How to end open paths. Default: Polygon */\r\n endType?: EndType;\r\n /** Limit on miter joins. Default: 2.0 */\r\n miterLimit?: number;\r\n /** Curve approximation tolerance. Default: 0.25 */\r\n arcTolerance?: number;\r\n /** Anchor X position (0.0 = left, 1.0 = right). Keeps this point fixed during offset. */\r\n originX?: number;\r\n /** Anchor Y position (0.0 = top, 1.0 = bottom). Keeps this point fixed during offset. */\r\n originY?: number;\r\n}\r\n\r\n/** Configuration for WASM initialization */\r\nexport interface InitOptions {\r\n /** URL or path to the .wasm binary (e.g. \"/wasm/clipper_offset_bg.wasm\") */\r\n wasmUrl: string;\r\n /** URL or path to the WASM glue JS (e.g. \"/wasm/clipper_offset.js\") */\r\n glueUrl: string;\r\n}\r\n\r\n/** WASM module interface (matches wasm-pack output) */\r\nexport interface ClipperOffsetWasm {\r\n default: (urlOrBuffer: string | BufferSource) => Promise<void>;\r\n offset_svg_path: (\r\n pathData: string,\r\n offsetAmount: number,\r\n joinType: number,\r\n endType: number,\r\n miterLimit: number,\r\n arcTolerance: number,\r\n originX: number | undefined | null,\r\n originY: number | undefined | null,\r\n ) => string;\r\n offset_svg_path_simple: (pathData: string, offsetAmount: number) => string;\r\n validate_svg_path: (pathData: string) => boolean;\r\n}\r\n\r\n// Extend GSAP's TweenVars interface\r\ndeclare module 'gsap' {\r\n interface TweenVars {\r\n offsetPath?: OffsetPathOptions | number;\r\n }\r\n}\r\n"],"mappings":"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","names":["module","JoinType","EndType"]}
package/dist/index.mjs ADDED
@@ -0,0 +1,122 @@
1
+ // src/OffsetPathPlugin.ts
2
+ var wasmModule = null;
3
+ var wasmInitialized = false;
4
+ var wasmInitPromise = null;
5
+ async function initOffsetPath(options) {
6
+ if (wasmInitialized) return;
7
+ if (wasmInitPromise) return wasmInitPromise;
8
+ wasmInitPromise = (async () => {
9
+ try {
10
+ const module = await import(
11
+ /* webpackIgnore: true */
12
+ options.glueUrl
13
+ );
14
+ await module.default(options.wasmUrl);
15
+ wasmModule = module;
16
+ wasmInitialized = true;
17
+ } catch (error) {
18
+ wasmInitPromise = null;
19
+ throw error;
20
+ }
21
+ })();
22
+ return wasmInitPromise;
23
+ }
24
+ function isReady() {
25
+ return wasmInitialized;
26
+ }
27
+ var OffsetPathPlugin = {
28
+ name: "offsetPath",
29
+ version: "1.0.0",
30
+ init(target, value) {
31
+ if (!(target instanceof SVGPathElement)) {
32
+ console.warn("[OffsetPathPlugin] Target must be SVGPathElement, got:", target);
33
+ return false;
34
+ }
35
+ const originalPath = target.getAttribute("d");
36
+ if (!originalPath) {
37
+ console.warn("[OffsetPathPlugin] Path element has no 'd' attribute");
38
+ return false;
39
+ }
40
+ const options = typeof value === "number" ? { offset: value } : { ...value };
41
+ const data = this;
42
+ data._target = target;
43
+ data._originalPath = originalPath;
44
+ data._options = {
45
+ joinType: options.joinType ?? 2,
46
+ // Round
47
+ endType: options.endType ?? 0,
48
+ // Polygon
49
+ miterLimit: options.miterLimit ?? 2,
50
+ arcTolerance: options.arcTolerance ?? 0.25,
51
+ originX: options.originX ?? null,
52
+ originY: options.originY ?? null
53
+ };
54
+ data._startOffset = target.__gsapOffsetPath ?? 0;
55
+ data._endOffset = options.offset;
56
+ return true;
57
+ },
58
+ render(progress, data) {
59
+ const offsetAmount = data._startOffset + (data._endOffset - data._startOffset) * progress;
60
+ data._target.__gsapOffsetPath = offsetAmount;
61
+ if (!wasmInitialized || !wasmModule) {
62
+ return;
63
+ }
64
+ try {
65
+ if (Math.abs(offsetAmount) < 1e-3) {
66
+ data._target.style.visibility = "visible";
67
+ data._target.setAttribute("d", data._originalPath);
68
+ return;
69
+ }
70
+ const result = wasmModule.offset_svg_path(
71
+ data._originalPath,
72
+ offsetAmount,
73
+ data._options.joinType,
74
+ data._options.endType,
75
+ data._options.miterLimit,
76
+ data._options.arcTolerance,
77
+ data._options.originX,
78
+ data._options.originY
79
+ );
80
+ if (!result || result.trim() === "") {
81
+ data._target.style.visibility = "hidden";
82
+ return;
83
+ }
84
+ data._target.style.visibility = "visible";
85
+ data._target.setAttribute("d", result);
86
+ } catch (error) {
87
+ console.error("[OffsetPathPlugin] Error during render:", error);
88
+ data._target.style.visibility = "hidden";
89
+ }
90
+ },
91
+ kill() {
92
+ const data = this;
93
+ if (data._target && data._originalPath) {
94
+ data._target.setAttribute("d", data._originalPath);
95
+ }
96
+ }
97
+ };
98
+
99
+ // src/types.ts
100
+ var JoinType = /* @__PURE__ */ ((JoinType2) => {
101
+ JoinType2[JoinType2["Square"] = 0] = "Square";
102
+ JoinType2[JoinType2["Bevel"] = 1] = "Bevel";
103
+ JoinType2[JoinType2["Round"] = 2] = "Round";
104
+ JoinType2[JoinType2["Miter"] = 3] = "Miter";
105
+ return JoinType2;
106
+ })(JoinType || {});
107
+ var EndType = /* @__PURE__ */ ((EndType2) => {
108
+ EndType2[EndType2["Polygon"] = 0] = "Polygon";
109
+ EndType2[EndType2["Joined"] = 1] = "Joined";
110
+ EndType2[EndType2["Butt"] = 2] = "Butt";
111
+ EndType2[EndType2["Square"] = 3] = "Square";
112
+ EndType2[EndType2["Round"] = 4] = "Round";
113
+ return EndType2;
114
+ })(EndType || {});
115
+ export {
116
+ EndType,
117
+ JoinType,
118
+ OffsetPathPlugin,
119
+ initOffsetPath,
120
+ isReady
121
+ };
122
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/OffsetPathPlugin.ts","../src/types.ts"],"sourcesContent":["import { gsap } from 'gsap';\r\nimport type { OffsetPathOptions, ClipperOffsetWasm, InitOptions } from './types';\r\n\r\n// Module state\r\nlet wasmModule: ClipperOffsetWasm | null = null;\r\nlet wasmInitialized = false;\r\nlet wasmInitPromise: Promise<void> | null = null;\r\n\r\n/**\r\n * Initialize the WASM module for the OffsetPath plugin.\r\n * Must be called (and awaited) before any offsetPath animations will render.\r\n *\r\n * @param options.glueUrl - URL to the WASM glue JS file (clipper_offset.js)\r\n * @param options.wasmUrl - URL to the .wasm binary\r\n */\r\nexport async function initOffsetPath(options: InitOptions): Promise<void> {\r\n if (wasmInitialized) return;\r\n if (wasmInitPromise) return wasmInitPromise;\r\n\r\n wasmInitPromise = (async () => {\r\n try {\r\n const module: ClipperOffsetWasm = await import(\r\n /* webpackIgnore: true */\r\n options.glueUrl\r\n );\r\n\r\n await module.default(options.wasmUrl);\r\n\r\n wasmModule = module;\r\n wasmInitialized = true;\r\n } catch (error) {\r\n wasmInitPromise = null;\r\n throw error;\r\n }\r\n })();\r\n\r\n return wasmInitPromise;\r\n}\r\n\r\n/**\r\n * Returns true if the WASM module has been initialized and is ready.\r\n */\r\nexport function isReady(): boolean {\r\n return wasmInitialized;\r\n}\r\n\r\n/**\r\n * GSAP OffsetPath Plugin\r\n *\r\n * Animates SVG path offsetting using Clipper2 WASM. Supports expanding\r\n * (positive offset) and shrinking (negative offset) SVG paths with\r\n * configurable join types, anchor points, and smooth interpolation.\r\n *\r\n * Usage:\r\n * ```ts\r\n * gsap.registerPlugin(OffsetPathPlugin);\r\n * await initOffsetPath();\r\n *\r\n * gsap.to(svgPathElement, {\r\n * offsetPath: { offset: -20, originX: 0.5, originY: 1 },\r\n * duration: 1\r\n * });\r\n * ```\r\n */\r\nexport const OffsetPathPlugin: gsap.Plugin = {\r\n name: 'offsetPath',\r\n version: '1.0.0',\r\n\r\n init(target: any, value: OffsetPathOptions | number) {\r\n // Validate target is SVGPathElement\r\n if (!(target instanceof SVGPathElement)) {\r\n console.warn('[OffsetPathPlugin] Target must be SVGPathElement, got:', target);\r\n return false;\r\n }\r\n\r\n // Store original path data\r\n const originalPath = target.getAttribute('d');\r\n if (!originalPath) {\r\n console.warn(\"[OffsetPathPlugin] Path element has no 'd' attribute\");\r\n return false;\r\n }\r\n\r\n // Parse options\r\n const options: OffsetPathOptions =\r\n typeof value === 'number' ? { offset: value } : { ...value };\r\n\r\n // Store plugin state\r\n const data = this as any;\r\n data._target = target;\r\n data._originalPath = originalPath;\r\n data._options = {\r\n joinType: options.joinType ?? 2, // Round\r\n endType: options.endType ?? 0, // Polygon\r\n miterLimit: options.miterLimit ?? 2.0,\r\n arcTolerance: options.arcTolerance ?? 0.25,\r\n originX: options.originX ?? null,\r\n originY: options.originY ?? null,\r\n };\r\n\r\n // Read current offset from element for animation chaining\r\n data._startOffset = (target as any).__gsapOffsetPath ?? 0;\r\n data._endOffset = options.offset;\r\n\r\n return true;\r\n },\r\n\r\n render(progress: number, data: any) {\r\n const offsetAmount =\r\n data._startOffset + (data._endOffset - data._startOffset) * progress;\r\n\r\n // Track current offset on target for chaining\r\n (data._target as any).__gsapOffsetPath = offsetAmount;\r\n\r\n if (!wasmInitialized || !wasmModule) {\r\n return;\r\n }\r\n\r\n try {\r\n // Return to original path at zero offset\r\n if (Math.abs(offsetAmount) < 0.001) {\r\n data._target.style.visibility = 'visible';\r\n data._target.setAttribute('d', data._originalPath);\r\n return;\r\n }\r\n\r\n const result = wasmModule.offset_svg_path(\r\n data._originalPath,\r\n offsetAmount,\r\n data._options.joinType,\r\n data._options.endType,\r\n data._options.miterLimit,\r\n data._options.arcTolerance,\r\n data._options.originX,\r\n data._options.originY,\r\n );\r\n\r\n // Empty result means path deflated to nothing — hide the element\r\n if (!result || result.trim() === '') {\r\n data._target.style.visibility = 'hidden';\r\n return;\r\n }\r\n\r\n data._target.style.visibility = 'visible';\r\n data._target.setAttribute('d', result);\r\n } catch (error) {\r\n console.error('[OffsetPathPlugin] Error during render:', error);\r\n data._target.style.visibility = 'hidden';\r\n }\r\n },\r\n\r\n kill() {\r\n const data = this as any;\r\n if (data._target && data._originalPath) {\r\n data._target.setAttribute('d', data._originalPath);\r\n }\r\n },\r\n};\r\n","/** Join types for path offsetting corners */\r\nexport enum JoinType {\r\n Square = 0,\r\n Bevel = 1,\r\n Round = 2,\r\n Miter = 3,\r\n}\r\n\r\n/** End types for open path endings */\r\nexport enum EndType {\r\n Polygon = 0,\r\n Joined = 1,\r\n Butt = 2,\r\n Square = 3,\r\n Round = 4,\r\n}\r\n\r\n/** Options for the offsetPath GSAP property */\r\nexport interface OffsetPathOptions {\r\n /** Offset amount in SVG units. Positive = expand outward, negative = shrink inward. */\r\n offset: number;\r\n /** How to join offset segments at corners. Default: Round */\r\n joinType?: JoinType;\r\n /** How to end open paths. Default: Polygon */\r\n endType?: EndType;\r\n /** Limit on miter joins. Default: 2.0 */\r\n miterLimit?: number;\r\n /** Curve approximation tolerance. Default: 0.25 */\r\n arcTolerance?: number;\r\n /** Anchor X position (0.0 = left, 1.0 = right). Keeps this point fixed during offset. */\r\n originX?: number;\r\n /** Anchor Y position (0.0 = top, 1.0 = bottom). Keeps this point fixed during offset. */\r\n originY?: number;\r\n}\r\n\r\n/** Configuration for WASM initialization */\r\nexport interface InitOptions {\r\n /** URL or path to the .wasm binary (e.g. \"/wasm/clipper_offset_bg.wasm\") */\r\n wasmUrl: string;\r\n /** URL or path to the WASM glue JS (e.g. \"/wasm/clipper_offset.js\") */\r\n glueUrl: string;\r\n}\r\n\r\n/** WASM module interface (matches wasm-pack output) */\r\nexport interface ClipperOffsetWasm {\r\n default: (urlOrBuffer: string | BufferSource) => Promise<void>;\r\n offset_svg_path: (\r\n pathData: string,\r\n offsetAmount: number,\r\n joinType: number,\r\n endType: number,\r\n miterLimit: number,\r\n arcTolerance: number,\r\n originX: number | undefined | null,\r\n originY: number | undefined | null,\r\n ) => string;\r\n offset_svg_path_simple: (pathData: string, offsetAmount: number) => string;\r\n validate_svg_path: (pathData: string) => boolean;\r\n}\r\n\r\n// Extend GSAP's TweenVars interface\r\ndeclare module 'gsap' {\r\n interface TweenVars {\r\n offsetPath?: OffsetPathOptions | number;\r\n }\r\n}\r\n"],"mappings":"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","names":["JoinType","EndType"]}
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "gsap-offset-path",
3
+ "version": "1.0.0",
4
+ "description": "GSAP plugin for animating SVG path offsets using Clipper2 WASM",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.mjs",
12
+ "require": "./dist/index.js"
13
+ }
14
+ },
15
+ "files": [
16
+ "dist/"
17
+ ],
18
+ "scripts": {
19
+ "build": "tsup",
20
+ "prepublishOnly": "pnpm build"
21
+ },
22
+ "keywords": [
23
+ "gsap",
24
+ "svg",
25
+ "path",
26
+ "offset",
27
+ "clipper2",
28
+ "wasm",
29
+ "animation"
30
+ ],
31
+ "author": "Faith Branch Software LLC",
32
+ "license": "MIT",
33
+ "peerDependencies": {
34
+ "gsap": "^3.12.0"
35
+ },
36
+ "devDependencies": {
37
+ "gsap": "^3.12.0",
38
+ "tsup": "^8.0.0",
39
+ "typescript": "^5.7.0"
40
+ },
41
+ "pnpm": {
42
+ "onlyBuiltDependencies": [
43
+ "esbuild"
44
+ ]
45
+ }
46
+ }