@emasoft/svg-matrix 1.0.7 → 1.0.8

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 (3) hide show
  1. package/README.md +146 -2
  2. package/package.json +1 -1
  3. package/src/index.js +1 -1
package/README.md CHANGED
@@ -62,14 +62,158 @@ npm install @emasoft/svg-matrix
62
62
  import { Matrix, Vector, Transforms2D, Transforms3D, SVGFlatten } from '@emasoft/svg-matrix';
63
63
  ```
64
64
 
65
- ### CDN
65
+ ### Browser Usage (CDN)
66
+
67
+ You can use this library directly in a web browser without installing anything. Just add a `<script>` tag to your HTML file.
68
+
69
+ **What is a CDN?** A CDN (Content Delivery Network) hosts the library files so you can load them directly in your browser. No `npm install` needed!
70
+
71
+ #### Option 1: esm.sh (Recommended)
72
+
73
+ Best for modern browsers. Automatically handles dependencies.
74
+
75
+ ```html
76
+ <!DOCTYPE html>
77
+ <html>
78
+ <head>
79
+ <title>SVG Matrix Example</title>
80
+ </head>
81
+ <body>
82
+ <script type="module">
83
+ // Import the modules you need
84
+ import { Matrix, Vector, Transforms2D } from 'https://esm.sh/@emasoft/svg-matrix';
85
+
86
+ // Now you can use them!
87
+ const rotation = Transforms2D.rotate(Math.PI / 4); // 45 degrees
88
+ const [x, y] = Transforms2D.applyTransform(rotation, 10, 0);
89
+
90
+ console.log(`Point (10, 0) rotated 45 degrees = (${x}, ${y})`);
91
+ </script>
92
+ </body>
93
+ </html>
94
+ ```
95
+
96
+ #### Option 2: unpkg
97
+
98
+ Another reliable CDN option.
99
+
100
+ ```html
101
+ <script type="module">
102
+ import { SVGFlatten, GeometryToPath } from 'https://unpkg.com/@emasoft/svg-matrix/src/index.js';
103
+
104
+ // Convert a circle to a path
105
+ const pathData = GeometryToPath.circleToPathData(100, 100, 50);
106
+ console.log(pathData);
107
+ </script>
108
+ ```
109
+
110
+ #### Option 3: jsDelivr
111
+
112
+ Popular CDN with good caching.
113
+
114
+ ```html
115
+ <script type="module">
116
+ import { Matrix, Vector } from 'https://cdn.jsdelivr.net/npm/@emasoft/svg-matrix/src/index.js';
117
+
118
+ const v = Vector.from([1, 2, 3]);
119
+ const w = Vector.from([4, 5, 6]);
120
+ console.log('Dot product:', v.dot(w).toString());
121
+ </script>
122
+ ```
123
+
124
+ #### Pin to a Specific Version
125
+
126
+ To avoid breaking changes, pin to a specific version:
66
127
 
67
128
  ```html
129
+ <!-- esm.sh with version -->
68
130
  <script type="module">
69
- import { Matrix, Vector, Transforms2D } from 'https://esm.sh/@emasoft/svg-matrix';
131
+ import { Transforms2D } from 'https://esm.sh/@emasoft/svg-matrix@1.0.7';
132
+ </script>
133
+
134
+ <!-- unpkg with version -->
135
+ <script type="module">
136
+ import { Matrix } from 'https://unpkg.com/@emasoft/svg-matrix@1.0.7/src/index.js';
137
+ </script>
138
+
139
+ <!-- jsDelivr with version -->
140
+ <script type="module">
141
+ import { Vector } from 'https://cdn.jsdelivr.net/npm/@emasoft/svg-matrix@1.0.7/src/index.js';
70
142
  </script>
71
143
  ```
72
144
 
145
+ #### Complete Working Example
146
+
147
+ Save this as `example.html` and open it in your browser:
148
+
149
+ ```html
150
+ <!DOCTYPE html>
151
+ <html>
152
+ <head>
153
+ <title>SVG Matrix - Complete Example</title>
154
+ <style>
155
+ body { font-family: sans-serif; padding: 20px; }
156
+ svg { border: 1px solid #ccc; }
157
+ pre { background: #f5f5f5; padding: 10px; }
158
+ </style>
159
+ </head>
160
+ <body>
161
+ <h1>SVG Matrix Demo</h1>
162
+
163
+ <h2>Original Circle</h2>
164
+ <svg width="200" height="200">
165
+ <circle id="original" cx="100" cy="100" r="40" fill="blue" opacity="0.5"/>
166
+ </svg>
167
+
168
+ <h2>Transformed (rotate 45 + scale 1.5)</h2>
169
+ <svg width="200" height="200">
170
+ <path id="transformed" fill="red" opacity="0.5"/>
171
+ </svg>
172
+
173
+ <h2>Generated Path Data</h2>
174
+ <pre id="output"></pre>
175
+
176
+ <script type="module">
177
+ import {
178
+ Transforms2D,
179
+ GeometryToPath,
180
+ SVGFlatten
181
+ } from 'https://esm.sh/@emasoft/svg-matrix';
182
+
183
+ // Step 1: Convert circle to path
184
+ const circlePath = GeometryToPath.circleToPathData(100, 100, 40);
185
+
186
+ // Step 2: Create a combined transform (rotate 45 degrees, then scale 1.5x)
187
+ const transform = Transforms2D.scale(1.5)
188
+ .mul(Transforms2D.rotate(Math.PI / 4));
189
+
190
+ // Step 3: Apply transform to the path
191
+ const transformedPath = SVGFlatten.transformPathData(circlePath, transform);
192
+
193
+ // Step 4: Display the result
194
+ document.getElementById('transformed').setAttribute('d', transformedPath);
195
+ document.getElementById('output').textContent = transformedPath;
196
+ </script>
197
+ </body>
198
+ </html>
199
+ ```
200
+
201
+ #### Troubleshooting
202
+
203
+ **"Cannot use import statement outside a module"**
204
+ Make sure you have `type="module"` in your script tag:
205
+ ```html
206
+ <script type="module"> <!-- This is required! -->
207
+ ```
208
+
209
+ **CORS errors when opening HTML file directly**
210
+ Some browsers block CDN imports when opening files with `file://`. Solutions:
211
+ 1. Use a local server: `npx serve .` or `python -m http.server`
212
+ 2. Or use a code playground like CodePen, JSFiddle, or StackBlitz
213
+
214
+ **Want to use with older browsers?**
215
+ This library requires ES modules (modern browsers). For IE11 or very old browsers, you'll need a bundler like Webpack or Rollup.
216
+
73
217
  ## CLI
74
218
 
75
219
  The library includes a command-line interface for batch processing SVG files.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emasoft/svg-matrix",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "description": "Arbitrary-precision matrix, vector and affine transformation library for JavaScript using decimal.js",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
package/src/index.js CHANGED
@@ -49,7 +49,7 @@ import { Logger, LogLevel, setLogLevel, getLogLevel as getLoggerLevel, enableFil
49
49
  * Library version
50
50
  * @constant {string}
51
51
  */
52
- export const VERSION = '1.0.7';
52
+ export const VERSION = '1.0.8';
53
53
 
54
54
  /**
55
55
  * Default precision for path output (decimal places)