@shumoku/renderer 0.2.0 → 0.2.3

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 (26) hide show
  1. package/dist/html/index.js +265 -157
  2. package/dist/html/index.js.map +1 -1
  3. package/dist/html/runtime.d.ts +2 -1
  4. package/dist/html/runtime.d.ts.map +1 -1
  5. package/dist/html/runtime.js +212 -486
  6. package/dist/html/runtime.js.map +1 -1
  7. package/dist/html/spotlight.d.ts +9 -0
  8. package/dist/html/spotlight.d.ts.map +1 -0
  9. package/dist/html/spotlight.js +119 -0
  10. package/dist/html/spotlight.js.map +1 -0
  11. package/dist/html/tooltip.d.ts +14 -0
  12. package/dist/html/tooltip.d.ts.map +1 -0
  13. package/dist/html/tooltip.js +105 -0
  14. package/dist/html/tooltip.js.map +1 -0
  15. package/dist/html/viewbox.d.ts +14 -0
  16. package/dist/html/viewbox.d.ts.map +1 -0
  17. package/dist/html/viewbox.js +21 -0
  18. package/dist/html/viewbox.js.map +1 -0
  19. package/dist/iife-string.js +1 -1
  20. package/dist/shumoku-interactive.iife.js +23 -20
  21. package/package.json +1 -1
  22. package/src/html/index.ts +334 -226
  23. package/src/html/runtime.ts +370 -654
  24. package/src/html/spotlight.ts +135 -0
  25. package/src/html/tooltip.ts +115 -0
  26. package/src/html/viewbox.ts +28 -0
package/dist/html/index.js CHANGED
@@ -35,168 +35,276 @@ export function render(graph, layout, options) {
35
35
  }
36
36
  function generateHtml(svg, title, options) {
37
37
  const brandingHtml = options.branding
38
- ? `<a class="branding" href="https://shumoku.packof.me" target="_blank" rel="noopener">
39
- <svg class="branding-icon" viewBox="0 0 1024 1024" fill="none"><rect x="64" y="64" width="896" height="896" rx="200" fill="#7FE4C1"/><g transform="translate(90,40) scale(1.25)"><path fill="#1F2328" d="M380 340H450V505H700V555H510V645H450V645H380Z"/></g></svg>
40
- <span>Made with Shumoku</span>
38
+ ? `<a class="branding" href="https://shumoku.packof.me" target="_blank" rel="noopener">
39
+ <svg class="branding-icon" viewBox="0 0 1024 1024" fill="none"><rect x="64" y="64" width="896" height="896" rx="200" fill="#7FE4C1"/><g transform="translate(90,40) scale(1.25)"><path fill="#1F2328" d="M380 340H450V505H700V555H510V645H450V645H380Z"/></g></svg>
40
+ <span>Made with Shumoku</span>
41
41
  </a>`
42
42
  : '';
43
43
  const toolbarHtml = options.toolbar
44
- ? `<div class="toolbar">
45
- <span class="toolbar-title">${escapeHtml(title)}</span>
46
- <div class="toolbar-buttons">
47
- <button id="btn-out" title="Zoom Out"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M20 12H4"/></svg></button>
48
- <span class="zoom-text" id="zoom">100%</span>
49
- <button id="btn-in" title="Zoom In"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button>
50
- <button id="btn-fit" title="Fit"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg></button>
51
- <button id="btn-reset" title="Reset"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button>
52
- </div>
44
+ ? `<div class="toolbar">
45
+ <span class="toolbar-title">${escapeHtml(title)}</span>
46
+ <div class="toolbar-buttons">
47
+ <button id="btn-out" title="Zoom Out"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M20 12H4"/></svg></button>
48
+ <span class="zoom-text" id="zoom">100%</span>
49
+ <button id="btn-in" title="Zoom In"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button>
50
+ <button id="btn-fit" title="Fit"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg></button>
51
+ <button id="btn-reset" title="Reset"><svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button>
52
+ </div>
53
53
  </div>`
54
54
  : '';
55
- return `<!DOCTYPE html>
56
- <html>
57
- <head>
58
- <meta charset="UTF-8">
59
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
60
- <title>${escapeHtml(title)}</title>
61
- <style>
62
- * { margin: 0; padding: 0; box-sizing: border-box; }
63
- body { background: #f5f5f5; min-height: 100vh; }
64
- .toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: white; border-bottom: 1px solid #e5e5e5; }
65
- .toolbar-title { font-size: 14px; color: #666; }
66
- .toolbar-buttons { display: flex; gap: 4px; align-items: center; }
67
- .toolbar button { padding: 6px; border: none; background: none; cursor: pointer; border-radius: 4px; color: #666; }
68
- .toolbar button:hover { background: #f0f0f0; }
69
- .zoom-text { min-width: 50px; text-align: center; font-size: 13px; color: #666; }
70
- .container { position: relative; width: 100%; height: ${options.toolbar ? 'calc(100vh - 45px)' : '100vh'}; overflow: hidden; cursor: grab; background: repeating-conic-gradient(#f8f8f8 0% 25%, transparent 0% 50%) 50% / 20px 20px; }
71
- .container.dragging { cursor: grabbing; }
72
- .container > svg { width: 100%; height: 100%; }
73
- .branding { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 13px; font-family: system-ui, sans-serif; color: #555; text-decoration: none; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 100; }
74
- .branding:hover { color: #222; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
75
- .branding-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
76
- /* SVG interactive styles */
77
- .node { cursor: pointer; }
78
- .node:hover rect, .node:hover circle, .node:hover polygon { filter: brightness(0.95); }
79
- .port { cursor: pointer; }
80
- .link-hit-area { cursor: pointer; }
81
- </style>
82
- </head>
83
- <body>
84
- ${toolbarHtml}
85
- <div class="container" id="container">
86
- ${svg}
87
- ${brandingHtml}
88
- </div>
89
- <script>${INTERACTIVE_IIFE}</script>
90
- <script>
91
- (function() {
92
- var svg = document.querySelector('#container > svg');
93
- var container = document.getElementById('container');
94
- if (!svg || !container) { console.error('SVG or container not found'); return; }
95
-
96
- var vb = { x: 0, y: 0, w: 0, h: 0 };
97
- var origVb = { x: 0, y: 0, w: 0, h: 0 };
98
- var drag = { active: false, x: 0, y: 0, vx: 0, vy: 0 };
99
-
100
- function init() {
101
- var w = parseFloat(svg.getAttribute('width')) || 800;
102
- var h = parseFloat(svg.getAttribute('height')) || 600;
103
- var existing = svg.getAttribute('viewBox');
104
- if (existing) {
105
- var p = existing.split(/\\s+|,/).map(Number);
106
- origVb = { x: p[0] || 0, y: p[1] || 0, w: p[2] || w, h: p[3] || h };
107
- } else {
108
- origVb = { x: 0, y: 0, w: w, h: h };
109
- }
110
- svg.removeAttribute('width');
111
- svg.removeAttribute('height');
112
- svg.style.width = '100%';
113
- svg.style.height = '100%';
114
- fitView();
115
-
116
- if (window.ShumokuInteractive) {
117
- window.ShumokuInteractive.initInteractive({ target: svg, modal: { enabled: true }, tooltip: { enabled: true }, panZoom: { enabled: false } });
118
- }
119
- }
120
-
121
- function updateViewBox() {
122
- svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h);
123
- var zoomEl = document.getElementById('zoom');
124
- if (zoomEl) zoomEl.textContent = Math.round(origVb.w / vb.w * 100) + '%';
125
- }
126
-
127
- function fitView() {
128
- var cw = container.clientWidth || 800;
129
- var ch = container.clientHeight || 600;
130
- var scale = Math.min(cw / origVb.w, ch / origVb.h) * 0.9;
131
- vb.w = cw / scale;
132
- vb.h = ch / scale;
133
- vb.x = origVb.x + (origVb.w - vb.w) / 2;
134
- vb.y = origVb.y + (origVb.h - vb.h) / 2;
135
- updateViewBox();
136
- }
137
-
138
- function resetView() {
139
- vb.x = origVb.x; vb.y = origVb.y; vb.w = origVb.w; vb.h = origVb.h;
140
- updateViewBox();
141
- }
142
-
143
- function zoom(f) {
144
- var cx = vb.x + vb.w / 2, cy = vb.y + vb.h / 2;
145
- var nw = vb.w / f, nh = vb.h / f;
146
- var scale = origVb.w / nw;
147
- if (scale < 0.1 || scale > 10) return;
148
- vb.w = nw; vb.h = nh; vb.x = cx - nw / 2; vb.y = cy - nh / 2;
149
- updateViewBox();
150
- }
151
-
152
- var btnIn = document.getElementById('btn-in');
153
- var btnOut = document.getElementById('btn-out');
154
- var btnFit = document.getElementById('btn-fit');
155
- var btnReset = document.getElementById('btn-reset');
156
- if (btnIn) btnIn.addEventListener('click', function() { zoom(1.2); });
157
- if (btnOut) btnOut.addEventListener('click', function() { zoom(1/1.2); });
158
- if (btnFit) btnFit.addEventListener('click', fitView);
159
- if (btnReset) btnReset.addEventListener('click', resetView);
160
-
161
- container.addEventListener('wheel', function(e) {
162
- e.preventDefault();
163
- var rect = container.getBoundingClientRect();
164
- var mx = (e.clientX - rect.left) / rect.width;
165
- var my = (e.clientY - rect.top) / rect.height;
166
- var px = vb.x + vb.w * mx, py = vb.y + vb.h * my;
167
- var f = e.deltaY > 0 ? 1/1.2 : 1.2;
168
- var nw = vb.w / f, nh = vb.h / f;
169
- var scale = origVb.w / nw;
170
- if (scale < 0.1 || scale > 10) return;
171
- vb.w = nw; vb.h = nh; vb.x = px - nw * mx; vb.y = py - nh * my;
172
- updateViewBox();
173
- }, { passive: false });
174
-
175
- container.addEventListener('mousedown', function(e) {
176
- if (e.button === 0) {
177
- drag = { active: true, x: e.clientX, y: e.clientY, vx: vb.x, vy: vb.y };
178
- container.classList.add('dragging');
179
- }
180
- });
181
-
182
- document.addEventListener('mousemove', function(e) {
183
- if (!drag.active) return;
184
- var sx = vb.w / container.clientWidth;
185
- var sy = vb.h / container.clientHeight;
186
- vb.x = drag.vx - (e.clientX - drag.x) * sx;
187
- vb.y = drag.vy - (e.clientY - drag.y) * sy;
188
- updateViewBox();
189
- });
190
-
191
- document.addEventListener('mouseup', function() {
192
- drag.active = false;
193
- container.classList.remove('dragging');
194
- });
195
-
196
- init();
197
- })();
198
- </script>
199
- </body>
55
+ return `<!DOCTYPE html>
56
+ <html>
57
+ <head>
58
+ <meta charset="UTF-8">
59
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
60
+ <title>${escapeHtml(title)}</title>
61
+ <style>
62
+ * { margin: 0; padding: 0; box-sizing: border-box; }
63
+ body { background: #f5f5f5; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; }
64
+ .toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: white; border-bottom: 1px solid #e5e5e5; }
65
+ .toolbar-title { font-size: 14px; color: #666; }
66
+ .toolbar-buttons { display: flex; gap: 4px; align-items: center; }
67
+ .toolbar button { padding: 6px; border: none; background: none; cursor: pointer; border-radius: 4px; color: #666; }
68
+ .toolbar button:hover { background: #f0f0f0; }
69
+ .zoom-text { min-width: 50px; text-align: center; font-size: 13px; color: #666; }
70
+ .container { position: relative; width: 100%; height: ${options.toolbar ? 'calc(100vh - 45px)' : '100vh'}; overflow: hidden; cursor: grab; background: repeating-conic-gradient(#f8f8f8 0% 25%, transparent 0% 50%) 50% / 20px 20px; }
71
+ .container.dragging { cursor: grabbing; }
72
+ .container > svg { width: 100%; height: 100%; }
73
+ .branding { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 13px; font-family: system-ui, sans-serif; color: #555; text-decoration: none; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 100; }
74
+ .branding:hover { color: #222; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
75
+ .branding-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
76
+ /* SVG interactive styles */
77
+ .node { cursor: pointer; }
78
+ .node:hover rect, .node:hover circle, .node:hover polygon { filter: brightness(0.95); }
79
+ .port { cursor: pointer; }
80
+ .link-hit-area { cursor: pointer; }
81
+ </style>
82
+ </head>
83
+ <body>
84
+ ${toolbarHtml}
85
+ <div class="container" id="container">
86
+ ${svg}
87
+ ${brandingHtml}
88
+ </div>
89
+ <script>${INTERACTIVE_IIFE}</script>
90
+ <script>
91
+ (function() {
92
+ var svg = document.querySelector('#container > svg');
93
+ var container = document.getElementById('container');
94
+ if (!svg || !container) { console.error('SVG or container not found'); return; }
95
+
96
+ var vb = { x: 0, y: 0, w: 0, h: 0 };
97
+ var origVb = { x: 0, y: 0, w: 0, h: 0 };
98
+ var drag = { active: false, x: 0, y: 0, vx: 0, vy: 0 };
99
+
100
+ function init() {
101
+ var w = parseFloat(svg.getAttribute('width')) || 800;
102
+ var h = parseFloat(svg.getAttribute('height')) || 600;
103
+ var existing = svg.getAttribute('viewBox');
104
+ if (existing) {
105
+ var p = existing.split(/\\s+|,/).map(Number);
106
+ origVb = { x: p[0] || 0, y: p[1] || 0, w: p[2] || w, h: p[3] || h };
107
+ } else {
108
+ origVb = { x: 0, y: 0, w: w, h: h };
109
+ }
110
+ svg.removeAttribute('width');
111
+ svg.removeAttribute('height');
112
+ svg.style.width = '100%';
113
+ svg.style.height = '100%';
114
+ fitView();
115
+
116
+ if (window.ShumokuInteractive) {
117
+ window.ShumokuInteractive.initInteractive({ target: svg, modal: { enabled: true }, tooltip: { enabled: true }, panZoom: { enabled: false } });
118
+ }
119
+ }
120
+
121
+ function updateViewBox() {
122
+ svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h);
123
+ var zoomEl = document.getElementById('zoom');
124
+ if (zoomEl) zoomEl.textContent = Math.round(origVb.w / vb.w * 100) + '%';
125
+ }
126
+
127
+ function fitView() {
128
+ var cw = container.clientWidth || 800;
129
+ var ch = container.clientHeight || 600;
130
+ var scale = Math.min(cw / origVb.w, ch / origVb.h) * 0.9;
131
+ vb.w = cw / scale;
132
+ vb.h = ch / scale;
133
+ vb.x = origVb.x + (origVb.w - vb.w) / 2;
134
+ vb.y = origVb.y + (origVb.h - vb.h) / 2;
135
+ updateViewBox();
136
+ }
137
+
138
+ function resetView() {
139
+ vb.x = origVb.x; vb.y = origVb.y; vb.w = origVb.w; vb.h = origVb.h;
140
+ updateViewBox();
141
+ }
142
+
143
+ function zoom(f) {
144
+ var cx = vb.x + vb.w / 2, cy = vb.y + vb.h / 2;
145
+ var nw = vb.w / f, nh = vb.h / f;
146
+ var scale = origVb.w / nw;
147
+ if (scale < 0.1 || scale > 10) return;
148
+ vb.w = nw; vb.h = nh; vb.x = cx - nw / 2; vb.y = cy - nh / 2;
149
+ updateViewBox();
150
+ }
151
+
152
+ var btnIn = document.getElementById('btn-in');
153
+ var btnOut = document.getElementById('btn-out');
154
+ var btnFit = document.getElementById('btn-fit');
155
+ var btnReset = document.getElementById('btn-reset');
156
+ if (btnIn) btnIn.addEventListener('click', function() { zoom(1.2); });
157
+ if (btnOut) btnOut.addEventListener('click', function() { zoom(1/1.2); });
158
+ if (btnFit) btnFit.addEventListener('click', fitView);
159
+ if (btnReset) btnReset.addEventListener('click', resetView);
160
+
161
+ container.addEventListener('wheel', function(e) {
162
+ e.preventDefault();
163
+ var rect = container.getBoundingClientRect();
164
+ var mx = (e.clientX - rect.left) / rect.width;
165
+ var my = (e.clientY - rect.top) / rect.height;
166
+ var px = vb.x + vb.w * mx, py = vb.y + vb.h * my;
167
+ var f = e.deltaY > 0 ? 1/1.2 : 1.2;
168
+ var nw = vb.w / f, nh = vb.h / f;
169
+ var scale = origVb.w / nw;
170
+ if (scale < 0.1 || scale > 10) return;
171
+ vb.w = nw; vb.h = nh; vb.x = px - nw * mx; vb.y = py - nh * my;
172
+ updateViewBox();
173
+ }, { passive: false });
174
+
175
+ container.addEventListener('mousedown', function(e) {
176
+ if (e.button === 0) {
177
+ drag = { active: true, x: e.clientX, y: e.clientY, vx: vb.x, vy: vb.y };
178
+ container.classList.add('dragging');
179
+ }
180
+ });
181
+
182
+ document.addEventListener('mousemove', function(e) {
183
+ if (!drag.active) return;
184
+ var sx = vb.w / container.clientWidth;
185
+ var sy = vb.h / container.clientHeight;
186
+ vb.x = drag.vx - (e.clientX - drag.x) * sx;
187
+ vb.y = drag.vy - (e.clientY - drag.y) * sy;
188
+ updateViewBox();
189
+ });
190
+
191
+ document.addEventListener('mouseup', function() {
192
+ drag.active = false;
193
+ container.classList.remove('dragging');
194
+ });
195
+
196
+ // Touch events for pan/zoom
197
+ var pinch = null;
198
+ var touch1 = null;
199
+ var hasMoved = false;
200
+ var DRAG_THRESHOLD = 8;
201
+
202
+ function getTouchDist(t) {
203
+ if (t.length < 2) return 0;
204
+ return Math.hypot(t[1].clientX - t[0].clientX, t[1].clientY - t[0].clientY);
205
+ }
206
+
207
+ function getTouchCenter(t) {
208
+ return { x: (t[0].clientX + t[1].clientX) / 2, y: (t[0].clientY + t[1].clientY) / 2 };
209
+ }
210
+
211
+ container.addEventListener('touchstart', function(e) {
212
+ // Skip if touching branding link
213
+ if (e.target.closest && e.target.closest('.branding')) return;
214
+
215
+ if (e.touches.length === 1) {
216
+ // Single finger - potential pan or tap
217
+ touch1 = { x: e.touches[0].clientX, y: e.touches[0].clientY, vx: vb.x, vy: vb.y };
218
+ hasMoved = false;
219
+ } else if (e.touches.length >= 2) {
220
+ // Two fingers - pinch zoom
221
+ e.preventDefault();
222
+ touch1 = null;
223
+ hasMoved = true;
224
+ var dist = getTouchDist(e.touches);
225
+ var center = getTouchCenter(e.touches);
226
+ var rect = container.getBoundingClientRect();
227
+ pinch = {
228
+ dist: dist,
229
+ vb: { x: vb.x, y: vb.y, w: vb.w, h: vb.h },
230
+ cx: vb.x + vb.w * ((center.x - rect.left) / rect.width),
231
+ cy: vb.y + vb.h * ((center.y - rect.top) / rect.height),
232
+ lastCenter: center
233
+ };
234
+ }
235
+ }, { passive: false });
236
+
237
+ container.addEventListener('touchmove', function(e) {
238
+ // Skip if touching branding link
239
+ if (e.target.closest && e.target.closest('.branding')) return;
240
+
241
+ if (e.touches.length === 1 && touch1) {
242
+ var dx = e.touches[0].clientX - touch1.x;
243
+ var dy = e.touches[0].clientY - touch1.y;
244
+
245
+ // Check if moved beyond threshold
246
+ if (!hasMoved && Math.hypot(dx, dy) > DRAG_THRESHOLD) {
247
+ hasMoved = true;
248
+ }
249
+
250
+ if (hasMoved) {
251
+ e.preventDefault();
252
+ var sx = vb.w / container.clientWidth;
253
+ var sy = vb.h / container.clientHeight;
254
+ vb.x = touch1.vx - dx * sx;
255
+ vb.y = touch1.vy - dy * sy;
256
+ updateViewBox();
257
+ }
258
+ } else if (e.touches.length >= 2 && pinch) {
259
+ e.preventDefault();
260
+ var dist = getTouchDist(e.touches);
261
+ var center = getTouchCenter(e.touches);
262
+ if (dist === 0 || pinch.dist === 0) return;
263
+
264
+ var scale = dist / pinch.dist;
265
+ var nw = pinch.vb.w / scale;
266
+ var nh = pinch.vb.h / scale;
267
+ var newScale = origVb.w / nw;
268
+ if (newScale < 0.1 || newScale > 10) return;
269
+
270
+ var rect = container.getBoundingClientRect();
271
+ var sx = nw / rect.width;
272
+ var sy = nh / rect.height;
273
+ var panX = (center.x - pinch.lastCenter.x) * sx;
274
+ var panY = (center.y - pinch.lastCenter.y) * sy;
275
+
276
+ var mx = (center.x - rect.left) / rect.width;
277
+ var my = (center.y - rect.top) / rect.height;
278
+ vb.x = pinch.cx - nw * mx - panX;
279
+ vb.y = pinch.cy - nh * my - panY;
280
+ vb.w = nw;
281
+ vb.h = nh;
282
+ updateViewBox();
283
+ }
284
+ }, { passive: false });
285
+
286
+ container.addEventListener('touchend', function(e) {
287
+ if (e.touches.length === 0) {
288
+ touch1 = null;
289
+ pinch = null;
290
+ hasMoved = false;
291
+ } else if (e.touches.length === 1) {
292
+ pinch = null;
293
+ touch1 = { x: e.touches[0].clientX, y: e.touches[0].clientY, vx: vb.x, vy: vb.y };
294
+ hasMoved = true; // Already moving
295
+ }
296
+ });
297
+
298
+ container.addEventListener('touchcancel', function() {
299
+ touch1 = null;
300
+ pinch = null;
301
+ hasMoved = false;
302
+ });
303
+
304
+ init();
305
+ })();
306
+ </script>
307
+ </body>
200
308
  </html>`;
201
309
  }
202
310
  function escapeHtml(str) {
package/dist/html/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/html/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIvC,qCAAqC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,yCAAyC;AACzC,IAAI,gBAAgB,GAAG,EAAE,CAAA;AAEzB;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,gBAAgB,GAAG,IAAI,CAAA;AACzB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,OAAO;IACrB,OAAO,gBAAgB,CAAA;AACzB,CAAC;AAID,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,IAAI;CACd,CAAA;AAED;;GAEG;AACH,MAAM,UAAU,MAAM,CAAC,KAAmB,EAAE,MAAoB,EAAE,OAAuB;IACvF,MAAM,IAAI,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,EAAE,CAAA;IAC/C,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAA;IAClE,MAAM,GAAG,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC7C,MAAM,KAAK,GAAG,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,iBAAiB,CAAA;IAE/D,OAAO,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,IAA+B,CAAC,CAAA;AAClE,CAAC;AAED,SAAS,YAAY,CAAC,GAAW,EAAE,KAAa,EAAE,OAAgC;IAChF,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ;QACnC,CAAC,CAAC;;;SAGG;QACL,CAAC,CAAC,EAAE,CAAA;IAEN,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO;QACjC,CAAC,CAAC;kCAC4B,UAAU,CAAC,KAAK,CAAC;;;;;;;;SAQ1C;QACL,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO;;;;;WAKE,UAAU,CAAC,KAAK,CAAC;;;;;;;;;;4DAUgC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;IAcxG,WAAW;;MAET,GAAG;MACH,YAAY;;YAEN,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA+GpB,CAAA;AACR,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC3B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/html/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIvC,qCAAqC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,yCAAyC;AACzC,IAAI,gBAAgB,GAAG,EAAE,CAAA;AAEzB;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,gBAAgB,GAAG,IAAI,CAAA;AACzB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,OAAO;IACrB,OAAO,gBAAgB,CAAA;AACzB,CAAC;AAID,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,IAAI;CACd,CAAA;AAED;;GAEG;AACH,MAAM,UAAU,MAAM,CAAC,KAAmB,EAAE,MAAoB,EAAE,OAAuB;IACvF,MAAM,IAAI,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,EAAE,CAAA;IAC/C,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAA;IAClE,MAAM,GAAG,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC7C,MAAM,KAAK,GAAG,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,iBAAiB,CAAA;IAE/D,OAAO,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,IAA+B,CAAC,CAAA;AAClE,CAAC;AAED,SAAS,YAAY,CAAC,GAAW,EAAE,KAAa,EAAE,OAAgC;IAChF,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ;QACnC,CAAC,CAAC;;;SAGG;QACL,CAAC,CAAC,EAAE,CAAA;IAEN,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO;QACjC,CAAC,CAAC;kCAC4B,UAAU,CAAC,KAAK,CAAC;;;;;;;;SAQ1C;QACL,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO;;;;;WAKE,UAAU,CAAC,KAAK,CAAC;;;;;;;;;;4DAUgC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;;;IAcxG,WAAW;;MAET,GAAG;MACH,YAAY;;YAEN,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2NpB,CAAA;AACR,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC3B,CAAC"}
package/dist/html/runtime.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /**
2
- * Interactive Runtime - Hover tooltip with touch support and pan/zoom
2
+ * Interactive Runtime - Mobile-first pan/zoom with tap tooltips and spotlight effect
3
+ * Google Maps style touch: 1 finger = page scroll (in HTML) / pan (here), 2 fingers = pinch zoom
3
4
  */
4
5
  import type { InteractiveInstance, InteractiveOptions } from '../types.js';
5
6
  export declare function initInteractive(options: InteractiveOptions): InteractiveInstance;
package/dist/html/runtime.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/html/runtime.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAsQ1E,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,mBAAmB,CAmYhF"}
1
+ {"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/html/runtime.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAY1E,wBAAgB,eAAe,CAAC,OAAO,EAAE,kBAAkB,GAAG,mBAAmB,CAgWhF"}