@operato/image-marker 9.0.0-beta.6 → 9.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 (21) hide show
  1. package/CHANGELOG.md +134 -0
  2. package/dist/src/base-image-marker.d.ts +1 -1
  3. package/dist/src/base-image-marker.js +4 -6
  4. package/dist/src/base-image-marker.js.map +1 -1
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +6 -6
  7. package/dist/stories/ox-image-marker-mode.stories.d.ts +0 -16
  8. package/dist/stories/ox-image-marker-mode.stories.js +0 -31
  9. package/dist/stories/ox-image-marker-mode.stories.js.map +0 -1
  10. package/dist/stories/ox-image-marker-view.stories.d.ts +0 -41
  11. package/dist/stories/ox-image-marker-view.stories.js +0 -103
  12. package/dist/stories/ox-image-marker-view.stories.js.map +0 -1
  13. package/dist/stories/ox-image-marker.stories.d.ts +0 -33
  14. package/dist/stories/ox-image-marker.stories.js +0 -102
  15. package/dist/stories/ox-image-marker.stories.js.map +0 -1
  16. package/dist/stories/test-image-provider.d.ts +0 -7
  17. package/dist/stories/test-image-provider.js +0 -42
  18. package/dist/stories/test-image-provider.js.map +0 -1
  19. package/dist/stories/test-image-provider.stories.d.ts +0 -33
  20. package/dist/stories/test-image-provider.stories.js +0 -119
  21. package/dist/stories/test-image-provider.stories.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,140 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [9.0.0](https://github.com/hatiolab/operato/compare/v9.0.0-beta.92...v9.0.0) (2025-06-30)
7
+
8
+ **Note:** Version bump only for package @operato/image-marker
9
+
10
+
11
+
12
+
13
+
14
+ ## [9.0.0-beta.68](https://github.com/hatiolab/operato/compare/v9.0.0-beta.67...v9.0.0-beta.68) (2025-04-15)
15
+
16
+
17
+ ### :bug: Bug Fix
18
+
19
+ * image-marker property ([fbc109c](https://github.com/hatiolab/operato/commit/fbc109c4cffcf15c3a7071fc05e2627075f7fc65))
20
+
21
+
22
+
23
+ ## [9.0.0-beta.47](https://github.com/hatiolab/operato/compare/v9.0.0-beta.46...v9.0.0-beta.47) (2025-02-14)
24
+
25
+ **Note:** Version bump only for package @operato/image-marker
26
+
27
+
28
+
29
+
30
+
31
+ ## [9.0.0-beta.38](https://github.com/hatiolab/operato/compare/v9.0.0-beta.37...v9.0.0-beta.38) (2025-02-02)
32
+
33
+ **Note:** Version bump only for package @operato/image-marker
34
+
35
+
36
+
37
+
38
+
39
+ ## [9.0.0-beta.37](https://github.com/hatiolab/operato/compare/v9.0.0-beta.36...v9.0.0-beta.37) (2025-02-01)
40
+
41
+ **Note:** Version bump only for package @operato/image-marker
42
+
43
+
44
+
45
+
46
+
47
+ ## [9.0.0-beta.34](https://github.com/hatiolab/operato/compare/v9.0.0-beta.33...v9.0.0-beta.34) (2025-01-31)
48
+
49
+ **Note:** Version bump only for package @operato/image-marker
50
+
51
+
52
+
53
+
54
+
55
+ ## [9.0.0-beta.33](https://github.com/hatiolab/operato/compare/v9.0.0-beta.32...v9.0.0-beta.33) (2025-01-31)
56
+
57
+ **Note:** Version bump only for package @operato/image-marker
58
+
59
+
60
+
61
+
62
+
63
+ ## [9.0.0-beta.32](https://github.com/hatiolab/operato/compare/v9.0.0-beta.31...v9.0.0-beta.32) (2025-01-31)
64
+
65
+ **Note:** Version bump only for package @operato/image-marker
66
+
67
+
68
+
69
+
70
+
71
+ ## [9.0.0-beta.28](https://github.com/hatiolab/operato/compare/v9.0.0-beta.27...v9.0.0-beta.28) (2025-01-28)
72
+
73
+ **Note:** Version bump only for package @operato/image-marker
74
+
75
+
76
+
77
+
78
+
79
+ ## [9.0.0-beta.21](https://github.com/hatiolab/operato/compare/v9.0.0-beta.20...v9.0.0-beta.21) (2025-01-28)
80
+
81
+ **Note:** Version bump only for package @operato/image-marker
82
+
83
+
84
+
85
+
86
+
87
+ ## [9.0.0-beta.20](https://github.com/hatiolab/operato/compare/v9.0.0-beta.19...v9.0.0-beta.20) (2025-01-27)
88
+
89
+
90
+ ### :rocket: New Features
91
+
92
+ * module property-panel ([03fb303](https://github.com/hatiolab/operato/commit/03fb303816c1629adca2a0ad843a8696ffaa4bef))
93
+
94
+
95
+
96
+ ## [9.0.0-beta.18](https://github.com/hatiolab/operato/compare/v9.0.0-beta.17...v9.0.0-beta.18) (2025-01-27)
97
+
98
+ **Note:** Version bump only for package @operato/image-marker
99
+
100
+
101
+
102
+
103
+
104
+ ## [9.0.0-beta.15](https://github.com/hatiolab/operato/compare/v9.0.0-beta.14...v9.0.0-beta.15) (2025-01-27)
105
+
106
+ **Note:** Version bump only for package @operato/image-marker
107
+
108
+
109
+
110
+
111
+
112
+ ## [9.0.0-beta.14](https://github.com/hatiolab/operato/compare/v9.0.0-beta.13...v9.0.0-beta.14) (2025-01-27)
113
+
114
+
115
+ ### :rocket: New Features
116
+
117
+ * module property-panel ([d78e4cf](https://github.com/hatiolab/operato/commit/d78e4cf7080b95fa74e61b42094b9f3f59f1409b))
118
+
119
+
120
+
121
+ ## [9.0.0-beta.11](https://github.com/hatiolab/operato/compare/v9.0.0-beta.10...v9.0.0-beta.11) (2025-01-25)
122
+
123
+
124
+ ### :bug: Bug Fix
125
+
126
+ * tsconfig option useDefineForClassFields=false ([0d77c0a](https://github.com/hatiolab/operato/commit/0d77c0aa620282c65b3c05f8e0b559e82836b6ab))
127
+
128
+
129
+
130
+ ## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
131
+
132
+
133
+ ### :bug: Bug Fix
134
+
135
+ * i18next@24.2.1 ([1c5920c](https://github.com/hatiolab/operato/commit/1c5920c6f77d28f07051a0a49997b9fb1dbf08bf))
136
+ * tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
137
+
138
+
139
+
6
140
  ## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
7
141
 
8
142
 
package/dist/src/base-image-marker.d.ts CHANGED
@@ -5,10 +5,10 @@ export declare class BaseImageMarker extends LitElement {
5
5
  static styles: import("lit").CSSResult[];
6
6
  imageUrl: string;
7
7
  shapes: Shape[];
8
+ imageProvider?: ImageProvider;
8
9
  protected currentImage?: string;
9
10
  protected viewBox: string;
10
11
  protected zoomLevel: number;
11
- private imageProvider?;
12
12
  protected debouncedUpdateImage: import("lodash").DebouncedFunc<() => Promise<void>>;
13
13
  protected zoomFactor: number;
14
14
  protected zoomThreshold: number;
package/dist/src/base-image-marker.js CHANGED
@@ -9,9 +9,9 @@ export class BaseImageMarker extends LitElement {
9
9
  super(...arguments);
10
10
  this.imageUrl = '';
11
11
  this.shapes = [];
12
+ this.imageProvider = new DefaultImageProvider();
12
13
  this.viewBox = '0 0 800 600';
13
14
  this.zoomLevel = 1;
14
- this.imageProvider = new DefaultImageProvider();
15
15
  this.debouncedUpdateImage = debounce(this.updateImage.bind(this), 300);
16
16
  this.zoomFactor = 0.1;
17
17
  this.zoomThreshold = 0.05;
@@ -112,7 +112,6 @@ export class BaseImageMarker extends LitElement {
112
112
  onSvgPinch(e) {
113
113
  e.stopPropagation();
114
114
  const { scale, centerX, centerY } = e.detail;
115
- console.log('pinch', e.detail);
116
115
  this.zoom(scale, centerX, centerY);
117
116
  }
118
117
  onSvgDoubleTap(e) {
@@ -121,7 +120,6 @@ export class BaseImageMarker extends LitElement {
121
120
  }
122
121
  onSvgDrag(e) {
123
122
  const { deltaX, deltaY } = e.detail;
124
- console.log('drag', e.detail);
125
123
  const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number);
126
124
  const scaleX = vbWidth / this.svg.clientWidth;
127
125
  const scaleY = vbHeight / this.svg.clientHeight;
@@ -216,6 +214,9 @@ __decorate([
216
214
  __decorate([
217
215
  property({ type: Array })
218
216
  ], BaseImageMarker.prototype, "shapes", void 0);
217
+ __decorate([
218
+ property({ type: Object })
219
+ ], BaseImageMarker.prototype, "imageProvider", void 0);
219
220
  __decorate([
220
221
  state()
221
222
  ], BaseImageMarker.prototype, "currentImage", void 0);
@@ -225,9 +226,6 @@ __decorate([
225
226
  __decorate([
226
227
  state()
227
228
  ], BaseImageMarker.prototype, "zoomLevel", void 0);
228
- __decorate([
229
- state()
230
- ], BaseImageMarker.prototype, "imageProvider", void 0);
231
229
  __decorate([
232
230
  query('svg')
233
231
  ], BaseImageMarker.prototype, "svg", void 0);
package/dist/src/base-image-marker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-image-marker.js","sourceRoot":"","sources":["../../src/base-image-marker.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg, nothing, PropertyValues } from 'lit'\nimport { property, state, query } from 'lit/decorators.js'\nimport { debounce } from 'lodash-es'\n\nimport {\n GestureEventDoubleTap,\n GestureEventDrag,\n GestureEventPinch,\n GestureHelper\n} from '@operato/utils/gesture-helper.js'\nimport { ImageProvider, Shape } from './types.js'\nimport { DefaultImageProvider } from './default-image-provider.js'\n\nexport class BaseImageMarker extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n }\n\n .container {\n flex: 1;\n position: relative;\n }\n\n svg {\n position: absolute;\n top: 0;\n left: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n touch-action: none;\n }\n\n .link:hover {\n cursor: pointer;\n }\n `\n ]\n\n @property({ type: String }) imageUrl: string = ''\n @property({ type: Array }) shapes: Shape[] = []\n\n @state() protected currentImage?: string\n @state() protected viewBox = '0 0 800 600'\n @state() protected zoomLevel = 1\n @state() private imageProvider?: ImageProvider = new DefaultImageProvider()\n\n protected debouncedUpdateImage = debounce(this.updateImage.bind(this), 300)\n protected zoomFactor = 0.1\n protected zoomThreshold = 0.05\n\n protected initialViewBox: string | null = null\n\n @query('svg') protected svg!: SVGSVGElement\n @query('image') protected image!: SVGImageElement\n\n private gestureHelper: GestureHelper | null = null\n\n connectedCallback(): void {\n super.connectedCallback()\n requestAnimationFrame(() => {\n this.gestureHelper = new GestureHelper(this.svg)\n })\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n this.gestureHelper?.dispose()\n this.gestureHelper = null\n }\n\n protected updated(changes: PropertyValues): void {\n if (changes.has('imageUrl') || changes.has('imageProvider')) {\n this.zoomLevel = 1\n this.initialViewBox = null\n this.updateImage()\n }\n }\n\n public setImageProvider(provider: ImageProvider) {\n this.imageProvider = provider\n }\n\n protected onImageLoad(event: Event) {\n const element = event.target as SVGImageElement\n const img = new Image()\n\n img.onload = () => {\n const width = img.naturalWidth\n const height = img.naturalHeight\n\n if (!this.initialViewBox) {\n this.initialViewBox = `0 0 ${width} ${height}`\n this.viewBox = this.initialViewBox\n\n element.setAttribute('width', width.toString())\n element.setAttribute('height', height.toString())\n element.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n } else {\n const [initialX, initialY, initialWidth, initialHeight] = this.initialViewBox.split(' ').map(Number)\n const scale = initialWidth / width\n\n element.setAttribute('width', (width * scale).toString())\n element.setAttribute('height', (height * scale).toString())\n }\n }\n\n img.src = this.currentImage!\n }\n\n protected async updateImage() {\n if (!this.imageProvider) {\n throw new Error('ImageProvider is not set')\n }\n\n if (!this.imageUrl) {\n return\n }\n\n const options = {\n id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용\n scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용\n offsetX: 0, // offsetX는 0으로 설정\n offsetY: 0, // offsetY는 0으로 설정\n currentImage: this.currentImage // 기존 이미지 객체 전달\n }\n\n this.currentImage = await this.imageProvider.getImage(options)\n }\n\n protected onSvgWheel(event: WheelEvent) {\n event.preventDefault()\n\n const { offsetX, offsetY, deltaY } = event\n const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor\n\n this.zoom(scale, offsetX, offsetY)\n }\n\n protected onSvgPinch(e: GestureEventPinch) {\n e.stopPropagation()\n\n const { scale, centerX, centerY } = e.detail\n\n console.log('pinch', e.detail)\n\n this.zoom(scale, centerX, centerY)\n }\n\n protected onSvgDoubleTap(e: GestureEventDoubleTap) {\n e.stopPropagation()\n\n this.reset()\n }\n\n protected onSvgDrag(e: GestureEventDrag) {\n const { deltaX, deltaY } = e.detail\n console.log('drag', e.detail)\n\n const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n\n const scaleX = vbWidth / this.svg.clientWidth\n const scaleY = vbHeight / this.svg.clientHeight\n const scale = Math.max(scaleX, scaleY)\n\n const newVbX = vbX - deltaX * scale\n const newVbY = vbY - deltaY * scale\n\n this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`\n\n this.debouncedUpdateImage()\n }\n\n zoom(scale: number, offsetX: number, offsetY: number) {\n if (Math.abs(scale) > this.zoomThreshold) {\n this.zoomLevel *= scale\n\n const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n const mouseX = vbX + (offsetX / this.svg.clientWidth) * vbWidth\n const mouseY = vbY + (offsetY / this.svg.clientHeight) * vbHeight\n\n const newVbWidth = vbWidth / scale\n const newVbHeight = vbHeight / scale\n\n const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth\n const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight\n\n this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`\n\n this.debouncedUpdateImage()\n }\n }\n\n public reset() {\n if (!this.initialViewBox) {\n this.zoomLevel = 1\n return\n }\n\n this.viewBox = this.initialViewBox!\n this.zoomLevel = 1\n\n this.debouncedUpdateImage()\n }\n\n protected handleLinkClick(shape: Shape) {\n this.dispatchEvent(\n new CustomEvent('link-clicked', {\n detail: { id: shape.id, link: shape.link },\n bubbles: true,\n composed: true\n })\n )\n }\n\n protected renderShape(shape: Shape) {\n const commonAttrs = {\n stroke: 'red',\n 'stroke-width': 1,\n fill: 'transparent'\n }\n\n switch (shape.type) {\n case 'text':\n return svg`<text x=\"${shape.x}\" y=\"${shape.y}\" text-anchor=\"middle\" alignment-baseline=\"middle\" fill=\"black\">${shape.text}</text>`\n case 'rectangle':\n return svg`<rect x=\"${shape.x}\" y=\"${shape.y}\" width=\"${shape.width}\" height=\"${shape.height}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" fill=\"${commonAttrs.fill}\"></rect>`\n case 'circle':\n return svg`<circle cx=\"${shape.cx}\" cy=\"${shape.cy}\" r=\"${shape.r}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" fill=\"${commonAttrs.fill}\"></circle>`\n case 'line':\n return svg`<line x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\"></line>`\n case 'arrow':\n return svg`\n <defs>\n <marker id=\"arrowhead-${shape.id}\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\">\n <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"${commonAttrs.stroke}\"></polygon>\n </marker>\n </defs>\n <line x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" marker-end=\"url(#arrowhead-${shape.id})\"></line>`\n case 'link':\n return svg`\n <rect class=\"link\" x=\"${shape.x}\" y=\"${shape.y}\" width=\"${shape.width}\" height=\"${shape.height}\" \n stroke=\"${commonAttrs.stroke}\" stroke-width=\"0\" \n fill=\"${commonAttrs.stroke}\" fill-opacity=\"0.3\" @click=\"${() => this.handleLinkClick(shape)}\">\n </rect>`\n default:\n return nothing\n }\n }\n\n protected getPointFromEvent(event: MouseEvent | PointerEvent | GestureEventDrag) {\n if ('clientX' in event) {\n return {\n x: event.clientX,\n y: event.clientY\n }\n } else {\n const { clientX, clientY } = event.detail\n return {\n x: clientX,\n y: clientY\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"base-image-marker.js","sourceRoot":"","sources":["../../src/base-image-marker.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg, nothing, PropertyValues } from 'lit'\nimport { property, state, query } from 'lit/decorators.js'\nimport { debounce } from 'lodash-es'\n\nimport {\n GestureEventDoubleTap,\n GestureEventDrag,\n GestureEventPinch,\n GestureHelper\n} from '@operato/utils/gesture-helper.js'\nimport { ImageProvider, Shape } from './types.js'\nimport { DefaultImageProvider } from './default-image-provider.js'\n\nexport class BaseImageMarker extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n }\n\n .container {\n flex: 1;\n position: relative;\n }\n\n svg {\n position: absolute;\n top: 0;\n left: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n touch-action: none;\n }\n\n .link:hover {\n cursor: pointer;\n }\n `\n ]\n\n @property({ type: String }) imageUrl: string = ''\n @property({ type: Array }) shapes: Shape[] = []\n @property({ type: Object }) imageProvider?: ImageProvider = new DefaultImageProvider()\n\n @state() protected currentImage?: string\n @state() protected viewBox = '0 0 800 600'\n @state() protected zoomLevel = 1\n\n protected debouncedUpdateImage = debounce(this.updateImage.bind(this), 300)\n protected zoomFactor = 0.1\n protected zoomThreshold = 0.05\n\n protected initialViewBox: string | null = null\n\n @query('svg') protected svg!: SVGSVGElement\n @query('image') protected image!: SVGImageElement\n\n private gestureHelper: GestureHelper | null = null\n\n connectedCallback(): void {\n super.connectedCallback()\n requestAnimationFrame(() => {\n this.gestureHelper = new GestureHelper(this.svg)\n })\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n this.gestureHelper?.dispose()\n this.gestureHelper = null\n }\n\n protected updated(changes: PropertyValues): void {\n if (changes.has('imageUrl') || changes.has('imageProvider')) {\n this.zoomLevel = 1\n this.initialViewBox = null\n this.updateImage()\n }\n }\n\n public setImageProvider(provider: ImageProvider) {\n this.imageProvider = provider\n }\n\n protected onImageLoad(event: Event) {\n const element = event.target as SVGImageElement\n const img = new Image()\n\n img.onload = () => {\n const width = img.naturalWidth\n const height = img.naturalHeight\n\n if (!this.initialViewBox) {\n this.initialViewBox = `0 0 ${width} ${height}`\n this.viewBox = this.initialViewBox\n\n element.setAttribute('width', width.toString())\n element.setAttribute('height', height.toString())\n element.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n } else {\n const [initialX, initialY, initialWidth, initialHeight] = this.initialViewBox.split(' ').map(Number)\n const scale = initialWidth / width\n\n element.setAttribute('width', (width * scale).toString())\n element.setAttribute('height', (height * scale).toString())\n }\n }\n\n img.src = this.currentImage!\n }\n\n protected async updateImage() {\n if (!this.imageProvider) {\n throw new Error('ImageProvider is not set')\n }\n\n if (!this.imageUrl) {\n return\n }\n\n const options = {\n id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용\n scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용\n offsetX: 0, // offsetX는 0으로 설정\n offsetY: 0, // offsetY는 0으로 설정\n currentImage: this.currentImage // 기존 이미지 객체 전달\n }\n\n this.currentImage = await this.imageProvider.getImage(options)\n }\n\n protected onSvgWheel(event: WheelEvent) {\n event.preventDefault()\n\n const { offsetX, offsetY, deltaY } = event\n const scale = deltaY > 0 ? 1 - this.zoomFactor : 1 + this.zoomFactor\n\n this.zoom(scale, offsetX, offsetY)\n }\n\n protected onSvgPinch(e: GestureEventPinch) {\n e.stopPropagation()\n\n const { scale, centerX, centerY } = e.detail\n\n this.zoom(scale, centerX, centerY)\n }\n\n protected onSvgDoubleTap(e: GestureEventDoubleTap) {\n e.stopPropagation()\n\n this.reset()\n }\n\n protected onSvgDrag(e: GestureEventDrag) {\n const { deltaX, deltaY } = e.detail\n\n const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n\n const scaleX = vbWidth / this.svg.clientWidth\n const scaleY = vbHeight / this.svg.clientHeight\n const scale = Math.max(scaleX, scaleY)\n\n const newVbX = vbX - deltaX * scale\n const newVbY = vbY - deltaY * scale\n\n this.viewBox = `${newVbX} ${newVbY} ${vbWidth} ${vbHeight}`\n\n this.debouncedUpdateImage()\n }\n\n zoom(scale: number, offsetX: number, offsetY: number) {\n if (Math.abs(scale) > this.zoomThreshold) {\n this.zoomLevel *= scale\n\n const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)\n const mouseX = vbX + (offsetX / this.svg.clientWidth) * vbWidth\n const mouseY = vbY + (offsetY / this.svg.clientHeight) * vbHeight\n\n const newVbWidth = vbWidth / scale\n const newVbHeight = vbHeight / scale\n\n const newVbX = mouseX - (offsetX / this.svg.clientWidth) * newVbWidth\n const newVbY = mouseY - (offsetY / this.svg.clientHeight) * newVbHeight\n\n this.viewBox = `${newVbX} ${newVbY} ${newVbWidth} ${newVbHeight}`\n\n this.debouncedUpdateImage()\n }\n }\n\n public reset() {\n if (!this.initialViewBox) {\n this.zoomLevel = 1\n return\n }\n\n this.viewBox = this.initialViewBox!\n this.zoomLevel = 1\n\n this.debouncedUpdateImage()\n }\n\n protected handleLinkClick(shape: Shape) {\n this.dispatchEvent(\n new CustomEvent('link-clicked', {\n detail: { id: shape.id, link: shape.link },\n bubbles: true,\n composed: true\n })\n )\n }\n\n protected renderShape(shape: Shape) {\n const commonAttrs = {\n stroke: 'red',\n 'stroke-width': 1,\n fill: 'transparent'\n }\n\n switch (shape.type) {\n case 'text':\n return svg`<text x=\"${shape.x}\" y=\"${shape.y}\" text-anchor=\"middle\" alignment-baseline=\"middle\" fill=\"black\">${shape.text}</text>`\n case 'rectangle':\n return svg`<rect x=\"${shape.x}\" y=\"${shape.y}\" width=\"${shape.width}\" height=\"${shape.height}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" fill=\"${commonAttrs.fill}\"></rect>`\n case 'circle':\n return svg`<circle cx=\"${shape.cx}\" cy=\"${shape.cy}\" r=\"${shape.r}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" fill=\"${commonAttrs.fill}\"></circle>`\n case 'line':\n return svg`<line x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\"></line>`\n case 'arrow':\n return svg`\n <defs>\n <marker id=\"arrowhead-${shape.id}\" markerWidth=\"10\" markerHeight=\"7\" refX=\"10\" refY=\"3.5\" orient=\"auto\">\n <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"${commonAttrs.stroke}\"></polygon>\n </marker>\n </defs>\n <line x1=\"${shape.x1}\" y1=\"${shape.y1}\" x2=\"${shape.x2}\" y2=\"${shape.y2}\" stroke=\"${commonAttrs.stroke}\" stroke-width=\"${commonAttrs['stroke-width']}\" marker-end=\"url(#arrowhead-${shape.id})\"></line>`\n case 'link':\n return svg`\n <rect class=\"link\" x=\"${shape.x}\" y=\"${shape.y}\" width=\"${shape.width}\" height=\"${shape.height}\" \n stroke=\"${commonAttrs.stroke}\" stroke-width=\"0\" \n fill=\"${commonAttrs.stroke}\" fill-opacity=\"0.3\" @click=\"${() => this.handleLinkClick(shape)}\">\n </rect>`\n default:\n return nothing\n }\n }\n\n protected getPointFromEvent(event: MouseEvent | PointerEvent | GestureEventDrag) {\n if ('clientX' in event) {\n return {\n x: event.clientX,\n y: event.clientY\n }\n } else {\n const { clientX, clientY } = event.detail\n return {\n x: clientX,\n y: clientY\n }\n }\n }\n}\n"]}