@operato/image-marker 8.0.0-beta.2 → 9.0.0-beta.10

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 (23) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/src/base-image-marker.d.ts +1 -1
  3. package/dist/src/base-image-marker.js +16 -16
  4. package/dist/src/base-image-marker.js.map +1 -1
  5. package/dist/src/default-image-provider.d.ts +1 -1
  6. package/dist/src/default-image-provider.js.map +1 -1
  7. package/dist/src/ox-image-marker-mode.d.ts +1 -1
  8. package/dist/src/ox-image-marker-mode.js +4 -6
  9. package/dist/src/ox-image-marker-mode.js.map +1 -1
  10. package/dist/src/ox-image-marker.d.ts +4 -4
  11. package/dist/src/ox-image-marker.js +163 -164
  12. package/dist/src/ox-image-marker.js.map +1 -1
  13. package/dist/stories/ox-image-marker-view.stories.js +1 -1
  14. package/dist/stories/ox-image-marker-view.stories.js.map +1 -1
  15. package/dist/stories/ox-image-marker.stories.js +1 -1
  16. package/dist/stories/ox-image-marker.stories.js.map +1 -1
  17. package/dist/stories/test-image-provider.d.ts +1 -1
  18. package/dist/stories/test-image-provider.js +2 -2
  19. package/dist/stories/test-image-provider.js.map +1 -1
  20. package/dist/stories/test-image-provider.stories.js +1 -1
  21. package/dist/stories/test-image-provider.stories.js.map +1 -1
  22. package/dist/tsconfig.tsbuildinfo +1 -1
  23. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,51 @@
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-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * i18next@24.2.1 ([1c5920c](https://github.com/hatiolab/operato/commit/1c5920c6f77d28f07051a0a49997b9fb1dbf08bf))
12
+ * tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
13
+
14
+
15
+
16
+ ## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
17
+
18
+
19
+ ### :bug: Bug Fix
20
+
21
+ * esm module ([9642b97](https://github.com/hatiolab/operato/commit/9642b97650623d9ce71f6db0fd1995a2379205b5))
22
+
23
+
24
+
25
+ ## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
26
+
27
+
28
+ ### :bug: Bug Fix
29
+
30
+ * esm module ([1319b00](https://github.com/hatiolab/operato/commit/1319b00d6955a514f63b3469fb514a28f84168a2))
31
+
32
+
33
+
34
+ ## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
35
+
36
+
37
+ ### :bug: Bug Fix
38
+
39
+ * esm module ([0402232](https://github.com/hatiolab/operato/commit/04022327fa47eac64eaf3c56eeec55b9ace13e0e))
40
+
41
+
42
+
43
+ ## [9.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-beta.11...v9.0.0-beta.0) (2025-01-13)
44
+
45
+ **Note:** Version bump only for package @operato/image-marker
46
+
47
+
48
+
49
+
50
+
6
51
  ## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
7
52
 
8
53
 
package/dist/src/base-image-marker.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { LitElement, nothing, PropertyValues } from 'lit';
2
2
  import { GestureEventDoubleTap, GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-helper.js';
3
- import { ImageProvider, Shape } from './types';
3
+ import { ImageProvider, Shape } from './types.js';
4
4
  export declare class BaseImageMarker extends LitElement {
5
5
  static styles: import("lit").CSSResult[];
6
6
  imageUrl: string;
package/dist/src/base-image-marker.js CHANGED
@@ -3,22 +3,9 @@ import { LitElement, css, svg, nothing } from 'lit';
3
3
  import { property, state, query } from 'lit/decorators.js';
4
4
  import { debounce } from 'lodash-es';
5
5
  import { GestureHelper } from '@operato/utils/gesture-helper.js';
6
- import { DefaultImageProvider } from './default-image-provider';
6
+ import { DefaultImageProvider } from './default-image-provider.js';
7
7
  export class BaseImageMarker extends LitElement {
8
- constructor() {
9
- super(...arguments);
10
- this.imageUrl = '';
11
- this.shapes = [];
12
- this.viewBox = '0 0 800 600';
13
- this.zoomLevel = 1;
14
- this.imageProvider = new DefaultImageProvider();
15
- this.debouncedUpdateImage = debounce(this.updateImage.bind(this), 300);
16
- this.zoomFactor = 0.1;
17
- this.zoomThreshold = 0.05;
18
- this.initialViewBox = null;
19
- this.gestureHelper = null;
20
- }
21
- static { this.styles = [
8
+ static styles = [
22
9
  css `
23
10
  :host {
24
11
  display: flex;
@@ -43,7 +30,20 @@ export class BaseImageMarker extends LitElement {
43
30
  cursor: pointer;
44
31
  }
45
32
  `
46
- ]; }
33
+ ];
34
+ imageUrl = '';
35
+ shapes = [];
36
+ currentImage;
37
+ viewBox = '0 0 800 600';
38
+ zoomLevel = 1;
39
+ imageProvider = new DefaultImageProvider();
40
+ debouncedUpdateImage = debounce(this.updateImage.bind(this), 300);
41
+ zoomFactor = 0.1;
42
+ zoomThreshold = 0.05;
43
+ initialViewBox = null;
44
+ svg;
45
+ image;
46
+ gestureHelper = null;
47
47
  connectedCallback() {
48
48
  super.connectedCallback();
49
49
  requestAnimationFrame(() => {
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'\nimport { DefaultImageProvider } from './default-image-provider'\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\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"]}
package/dist/src/default-image-provider.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ImageOptions, ImageProvider } from './types';
1
+ import { ImageOptions, ImageProvider } from './types.js';
2
2
  export declare class DefaultImageProvider implements ImageProvider {
3
3
  getImage(options: ImageOptions): Promise<string>;
4
4
  }
package/dist/src/default-image-provider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"default-image-provider.js","sourceRoot":"","sources":["../../src/default-image-provider.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,oBAAoB;IAC/B,KAAK,CAAC,QAAQ,CAAC,OAAqB;QAClC,OAAO,OAAO,CAAC,EAAE,CAAA;IACnB,CAAC;CACF","sourcesContent":["import { ImageOptions, ImageProvider } from './types'\n\nexport class DefaultImageProvider implements ImageProvider {\n async getImage(options: ImageOptions): Promise<string> {\n return options.id\n }\n}\n"]}
1
+ {"version":3,"file":"default-image-provider.js","sourceRoot":"","sources":["../../src/default-image-provider.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,oBAAoB;IAC/B,KAAK,CAAC,QAAQ,CAAC,OAAqB;QAClC,OAAO,OAAO,CAAC,EAAE,CAAA;IACnB,CAAC;CACF","sourcesContent":["import { ImageOptions, ImageProvider } from './types.js'\n\nexport class DefaultImageProvider implements ImageProvider {\n async getImage(options: ImageOptions): Promise<string> {\n return options.id\n }\n}\n"]}
package/dist/src/ox-image-marker-mode.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import '@material/web/icon/icon.js';
2
2
  import { LitElement } from 'lit';
3
- import { ImageMarkerMode, ShapeType } from './types';
3
+ import { ImageMarkerMode, ShapeType } from './types.js';
4
4
  export declare class OxImageMarkerMode extends LitElement {
5
5
  static styles: import("lit").CSSResult;
6
6
  currentMode: ImageMarkerMode;
package/dist/src/ox-image-marker-mode.js CHANGED
@@ -3,11 +3,7 @@ import '@material/web/icon/icon.js';
3
3
  import { LitElement, html, css } from 'lit';
4
4
  import { customElement, property } from 'lit/decorators.js';
5
5
  let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
6
- constructor() {
7
- super(...arguments);
8
- this.currentMode = 'edit';
9
- }
10
- static { this.styles = css `
6
+ static styles = css `
11
7
  :host {
12
8
  display: flex;
13
9
  flex-direction: column;
@@ -37,7 +33,9 @@ let OxImageMarkerMode = class OxImageMarkerMode extends LitElement {
37
33
  .palette [selected] {
38
34
  background-color: #d0d0d0;
39
35
  }
40
- `; }
36
+ `;
37
+ currentMode = 'edit';
38
+ currentShapeType;
41
39
  render() {
42
40
  return html `
43
41
  <div class="palette">
package/dist/src/ox-image-marker-mode.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-image-marker-mode.js","sourceRoot":"","sources":["../../src/ox-image-marker-mode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ImageMarkerMode, ShapeType } from './types'\n\n@customElement('ox-image-marker-mode')\nexport class OxImageMarkerMode extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-medium);\n }\n\n .palette {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-small);\n justify-content: center;\n margin: var(--spacing-medium);\n\n --md-icon-size: 16px;\n }\n\n .palette > * {\n padding: var(--spacing-small);\n cursor: pointer;\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 4px;\n width: 12px;\n height: 12px;\n }\n\n .palette [selected] {\n background-color: #d0d0d0;\n }\n `\n\n @property({ type: String }) currentMode: ImageMarkerMode = 'edit'\n @property({ type: String }) currentShapeType?: ShapeType\n\n render() {\n return html`\n <div class=\"palette\">\n <md-icon\n title=\"Edit or View\"\n ?selected=${this.currentMode !== 'shape'}\n @click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}\n >${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon\n >\n\n <md-icon\n title=\"Text\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}\n @click=${() => this.setShape('text')}\n >match_case</md-icon\n >\n\n <md-icon\n title=\"Rectangle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}\n @click=${() => this.setShape('rectangle')}\n >rectangle</md-icon\n >\n\n <md-icon\n title=\"Circle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}\n @click=${() => this.setShape('circle')}\n >circle</md-icon\n >\n\n <md-icon\n title=\"Triangle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}\n @click=${() => this.setShape('triangle')}\n >change_history</md-icon\n >\n\n <md-icon\n title=\"Line\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}\n @click=${() => this.setShape('line')}\n >shape_line</md-icon\n >\n\n <md-icon\n title=\"Arrow\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}\n @click=${() => this.setShape('arrow')}\n >line_end_arrow</md-icon\n >\n </div>\n\n <div class=\"palette\">\n <md-icon title=\"Fit size\" @click=${() => this.onClickFitSize()}>recenter</md-icon>\n </div>\n\n <div class=\"palette\">\n <md-icon title=\"Delete\" @click=${() => this.onClickDelete()}>delete</md-icon>\n <md-icon title=\"Save\" @click=${() => this.onClickSave()}>save</md-icon>\n </div>\n `\n }\n\n public setMode(mode: ImageMarkerMode) {\n this.currentMode = mode\n\n this.dispatchEvent(\n new CustomEvent('mode-changed', {\n detail: { mode: this.currentMode, shapeType: this.currentShapeType },\n bubbles: true,\n composed: true\n })\n )\n }\n\n protected setShape(shapeType: ShapeType) {\n this.currentMode = 'shape'\n this.currentShapeType = shapeType\n this.dispatchEvent(\n new CustomEvent('mode-changed', {\n detail: { mode: 'shape', shapeType: this.currentShapeType },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickDelete() {\n this.dispatchEvent(\n new CustomEvent('tap-delete', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickSave() {\n this.dispatchEvent(\n new CustomEvent('tap-save', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickFitSize() {\n this.dispatchEvent(\n new CustomEvent('tap-fit-size', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
1
+ {"version":3,"file":"ox-image-marker-mode.js","sourceRoot":"","sources":["../../src/ox-image-marker-mode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ImageMarkerMode, ShapeType } from './types.js'\n\n@customElement('ox-image-marker-mode')\nexport class OxImageMarkerMode extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-medium);\n }\n\n .palette {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-small);\n justify-content: center;\n margin: var(--spacing-medium);\n\n --md-icon-size: 16px;\n }\n\n .palette > * {\n padding: var(--spacing-small);\n cursor: pointer;\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 4px;\n width: 12px;\n height: 12px;\n }\n\n .palette [selected] {\n background-color: #d0d0d0;\n }\n `\n\n @property({ type: String }) currentMode: ImageMarkerMode = 'edit'\n @property({ type: String }) currentShapeType?: ShapeType\n\n render() {\n return html`\n <div class=\"palette\">\n <md-icon\n title=\"Edit or View\"\n ?selected=${this.currentMode !== 'shape'}\n @click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}\n >${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon\n >\n\n <md-icon\n title=\"Text\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}\n @click=${() => this.setShape('text')}\n >match_case</md-icon\n >\n\n <md-icon\n title=\"Rectangle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}\n @click=${() => this.setShape('rectangle')}\n >rectangle</md-icon\n >\n\n <md-icon\n title=\"Circle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}\n @click=${() => this.setShape('circle')}\n >circle</md-icon\n >\n\n <md-icon\n title=\"Triangle\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}\n @click=${() => this.setShape('triangle')}\n >change_history</md-icon\n >\n\n <md-icon\n title=\"Line\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}\n @click=${() => this.setShape('line')}\n >shape_line</md-icon\n >\n\n <md-icon\n title=\"Arrow\"\n ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}\n @click=${() => this.setShape('arrow')}\n >line_end_arrow</md-icon\n >\n </div>\n\n <div class=\"palette\">\n <md-icon title=\"Fit size\" @click=${() => this.onClickFitSize()}>recenter</md-icon>\n </div>\n\n <div class=\"palette\">\n <md-icon title=\"Delete\" @click=${() => this.onClickDelete()}>delete</md-icon>\n <md-icon title=\"Save\" @click=${() => this.onClickSave()}>save</md-icon>\n </div>\n `\n }\n\n public setMode(mode: ImageMarkerMode) {\n this.currentMode = mode\n\n this.dispatchEvent(\n new CustomEvent('mode-changed', {\n detail: { mode: this.currentMode, shapeType: this.currentShapeType },\n bubbles: true,\n composed: true\n })\n )\n }\n\n protected setShape(shapeType: ShapeType) {\n this.currentMode = 'shape'\n this.currentShapeType = shapeType\n this.dispatchEvent(\n new CustomEvent('mode-changed', {\n detail: { mode: 'shape', shapeType: this.currentShapeType },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickDelete() {\n this.dispatchEvent(\n new CustomEvent('tap-delete', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickSave() {\n this.dispatchEvent(\n new CustomEvent('tap-save', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n private onClickFitSize() {\n this.dispatchEvent(\n new CustomEvent('tap-fit-size', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
package/dist/src/ox-image-marker.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import './ox-image-marker-mode';
1
+ import './ox-image-marker-mode.js';
2
2
  import { nothing } from 'lit';
3
3
  import { GestureEventDrag, GestureEventPinch } from '@operato/utils/gesture-helper.js';
4
- import { Shape } from './types';
5
- import { BaseImageMarker } from './base-image-marker';
6
- import { OxImageMarkerMode } from './ox-image-marker-mode';
4
+ import { Shape } from './types.js';
5
+ import { BaseImageMarker } from './base-image-marker.js';
6
+ import { OxImageMarkerMode } from './ox-image-marker-mode.js';
7
7
  export declare class OxImageMarker extends BaseImageMarker {
8
8
  static styles: import("lit").CSSResult[];
9
9
  private currentShapeType?;
package/dist/src/ox-image-marker.js CHANGED
@@ -1,172 +1,12 @@
1
1
  import { __decorate } from "tslib";
2
- import './ox-image-marker-mode';
2
+ import './ox-image-marker-mode.js';
3
3
  import { html, css, svg, nothing } from 'lit';
4
4
  import { query, state, customElement } from 'lit/decorators.js';
5
5
  import { ifDefined } from 'lit/directives/if-defined.js';
6
6
  import { keyed } from 'lit/directives/keyed.js';
7
- import { BaseImageMarker } from './base-image-marker';
7
+ import { BaseImageMarker } from './base-image-marker.js';
8
8
  let OxImageMarker = class OxImageMarker extends BaseImageMarker {
9
- constructor() {
10
- super(...arguments);
11
- this.currentMode = 'edit';
12
- this.selectedShape = null;
13
- // private drawingStarted: boolean = false
14
- this.drawing = false;
15
- this.startX = 0;
16
- this.startY = 0;
17
- this.offsetX = 0;
18
- this.offsetY = 0;
19
- this.shapeMoveThreshold = 10;
20
- this.shapeMoveInitiated = false;
21
- this.onPointerMoveOnShape = (event) => {
22
- if (!this.selectedShape) {
23
- return;
24
- }
25
- // TODO check if single touch ... (멀티터치를 제외해야한다).
26
- // if ('touches' in event && event.touches.length > 1) {
27
- // return
28
- // }
29
- event.preventDefault();
30
- const { x, y } = this.getSvgPoint(event);
31
- const dx = x - this.offsetX;
32
- const dy = y - this.offsetY;
33
- if (!this.shapeMoveInitiated) {
34
- const distance = Math.sqrt(dx * dx + dy * dy);
35
- if (distance < this.shapeMoveThreshold) {
36
- return;
37
- }
38
- this.shapeMoveInitiated = true;
39
- }
40
- this.offsetX = x;
41
- this.offsetY = y;
42
- switch (this.selectedShape.type) {
43
- case 'text':
44
- case 'rectangle':
45
- this.selectedShape.x += dx;
46
- this.selectedShape.y += dy;
47
- break;
48
- case 'circle':
49
- this.selectedShape.cx += dx;
50
- this.selectedShape.cy += dy;
51
- break;
52
- case 'triangle':
53
- const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
54
- this.selectedShape.points = points.map(([px, py]) => [px + dx, py + dy].join(',')).join(' ');
55
- break;
56
- case 'line':
57
- case 'arrow':
58
- this.selectedShape.x1 += dx;
59
- this.selectedShape.x2 += dx;
60
- this.selectedShape.y1 += dy;
61
- this.selectedShape.y2 += dy;
62
- break;
63
- }
64
- this.requestUpdate();
65
- };
66
- this.onPointerUpOnShape = (event) => {
67
- if (!this.selectedShape) {
68
- return;
69
- }
70
- // TODO
71
- // if ('touches' in event && event.touches.length > 1) {
72
- // return
73
- // }
74
- event.preventDefault();
75
- document.removeEventListener('pointermove', this.onPointerMoveOnShape);
76
- document.removeEventListener('pointerup', this.onPointerUpOnShape);
77
- };
78
- this.onResizeHandlePointerMove = (event) => {
79
- if (!this.selectedShape) {
80
- return;
81
- }
82
- event.preventDefault();
83
- const { x, y } = this.getSvgPoint(event);
84
- switch (this.selectedShape.type) {
85
- case 'rectangle':
86
- const startX = this.selectedShape.x;
87
- const startY = this.selectedShape.y;
88
- const width = this.selectedShape.width;
89
- const height = this.selectedShape.height;
90
- // 핸들의 좌표에 따라 너비 및 높이 조정
91
- if (this.offsetX === startX && this.offsetY === startY) {
92
- // 상좌 핸들 (왼쪽 위)
93
- this.selectedShape.x = x;
94
- this.selectedShape.y = y;
95
- this.selectedShape.width = width + (startX - x);
96
- this.selectedShape.height = height + (startY - y);
97
- }
98
- else if (this.offsetX === startX + width && this.offsetY === startY) {
99
- // 상우 핸들 (오른쪽 위)
100
- this.selectedShape.y = y;
101
- this.selectedShape.width = Math.abs(x - startX);
102
- this.selectedShape.height = height + (startY - y);
103
- }
104
- else if (this.offsetX === startX && this.offsetY === startY + height) {
105
- // 하좌 핸들 (왼쪽 아래)
106
- this.selectedShape.x = x;
107
- this.selectedShape.width = width + (startX - x);
108
- this.selectedShape.height = Math.abs(y - startY);
109
- }
110
- else if (this.offsetX === startX + width && this.offsetY === startY + height) {
111
- // 하우 핸들 (오른쪽 아래)
112
- this.selectedShape.width = Math.abs(x - startX);
113
- this.selectedShape.height = Math.abs(y - startY);
114
- }
115
- // 최소 너비 및 높이 유지
116
- this.selectedShape.width = Math.max(10, this.selectedShape.width);
117
- this.selectedShape.height = Math.max(10, this.selectedShape.height);
118
- this.offsetX = x;
119
- this.offsetY = y;
120
- break;
121
- case 'circle':
122
- const dx = x - this.selectedShape.cx;
123
- const dy = y - this.selectedShape.cy;
124
- this.selectedShape.r = Math.sqrt(dx * dx + dy * dy);
125
- break;
126
- case 'triangle':
127
- const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
128
- const index = points.findIndex(([px, py]) => px === this.offsetX && py === this.offsetY);
129
- if (index !== -1) {
130
- points[index] = [x, y];
131
- this.selectedShape.points = points.map(p => p.join(',')).join(' ');
132
- this.offsetX = x;
133
- this.offsetY = y;
134
- }
135
- break;
136
- case 'line':
137
- case 'arrow':
138
- if (this.offsetX === this.selectedShape.x1 && this.offsetY === this.selectedShape.y1) {
139
- this.selectedShape.x1 = x;
140
- this.selectedShape.y1 = y;
141
- }
142
- else if (this.offsetX === this.selectedShape.x2 && this.offsetY === this.selectedShape.y2) {
143
- this.selectedShape.x2 = x;
144
- this.selectedShape.y2 = y;
145
- }
146
- this.offsetX = x;
147
- this.offsetY = y;
148
- break;
149
- }
150
- this.requestUpdate();
151
- };
152
- this.onResizeHandlePointerUp = (event) => {
153
- event.preventDefault();
154
- document.removeEventListener('pointermove', this.onResizeHandlePointerMove);
155
- document.removeEventListener('pointerup', this.onResizeHandlePointerUp);
156
- };
157
- this.onFocus = () => {
158
- this.addEventListener('keydown', this.handleKeyDown);
159
- };
160
- this.onBlur = () => {
161
- this.removeEventListener('keydown', this.handleKeyDown);
162
- };
163
- this.handleKeyDown = (event) => {
164
- if ((event.key === 'Delete' || event.key === 'Backspace') && this.selectedShape) {
165
- this.deleteSelectedShape();
166
- }
167
- };
168
- }
169
- static { this.styles = [
9
+ static styles = [
170
10
  ...BaseImageMarker.styles,
171
11
  css `
172
12
  :host {
@@ -194,7 +34,19 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
194
34
  cursor: nwse-resize;
195
35
  }
196
36
  `
197
- ]; }
37
+ ];
38
+ currentShapeType;
39
+ currentMode = 'edit';
40
+ selectedShape = null;
41
+ imageMarkerMode;
42
+ // private drawingStarted: boolean = false
43
+ drawing = false;
44
+ startX = 0;
45
+ startY = 0;
46
+ offsetX = 0;
47
+ offsetY = 0;
48
+ shapeMoveThreshold = 10;
49
+ shapeMoveInitiated = false;
198
50
  connectedCallback() {
199
51
  super.connectedCallback();
200
52
  this.setAttribute('tabindex', '0');
@@ -561,6 +413,63 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
561
413
  document.addEventListener('pointermove', this.onPointerMoveOnShape);
562
414
  document.addEventListener('pointerup', this.onPointerUpOnShape);
563
415
  }
416
+ onPointerMoveOnShape = (event) => {
417
+ if (!this.selectedShape) {
418
+ return;
419
+ }
420
+ // TODO check if single touch ... (멀티터치를 제외해야한다).
421
+ // if ('touches' in event && event.touches.length > 1) {
422
+ // return
423
+ // }
424
+ event.preventDefault();
425
+ const { x, y } = this.getSvgPoint(event);
426
+ const dx = x - this.offsetX;
427
+ const dy = y - this.offsetY;
428
+ if (!this.shapeMoveInitiated) {
429
+ const distance = Math.sqrt(dx * dx + dy * dy);
430
+ if (distance < this.shapeMoveThreshold) {
431
+ return;
432
+ }
433
+ this.shapeMoveInitiated = true;
434
+ }
435
+ this.offsetX = x;
436
+ this.offsetY = y;
437
+ switch (this.selectedShape.type) {
438
+ case 'text':
439
+ case 'rectangle':
440
+ this.selectedShape.x += dx;
441
+ this.selectedShape.y += dy;
442
+ break;
443
+ case 'circle':
444
+ this.selectedShape.cx += dx;
445
+ this.selectedShape.cy += dy;
446
+ break;
447
+ case 'triangle':
448
+ const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
449
+ this.selectedShape.points = points.map(([px, py]) => [px + dx, py + dy].join(',')).join(' ');
450
+ break;
451
+ case 'line':
452
+ case 'arrow':
453
+ this.selectedShape.x1 += dx;
454
+ this.selectedShape.x2 += dx;
455
+ this.selectedShape.y1 += dy;
456
+ this.selectedShape.y2 += dy;
457
+ break;
458
+ }
459
+ this.requestUpdate();
460
+ };
461
+ onPointerUpOnShape = (event) => {
462
+ if (!this.selectedShape) {
463
+ return;
464
+ }
465
+ // TODO
466
+ // if ('touches' in event && event.touches.length > 1) {
467
+ // return
468
+ // }
469
+ event.preventDefault();
470
+ document.removeEventListener('pointermove', this.onPointerMoveOnShape);
471
+ document.removeEventListener('pointerup', this.onPointerUpOnShape);
472
+ };
564
473
  renderResizeHandles(shape) {
565
474
  let handles = [];
566
475
  switch (shape.type) {
@@ -623,6 +532,85 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
623
532
  document.addEventListener('pointermove', this.onResizeHandlePointerMove);
624
533
  document.addEventListener('pointerup', this.onResizeHandlePointerUp);
625
534
  }
535
+ onResizeHandlePointerMove = (event) => {
536
+ if (!this.selectedShape) {
537
+ return;
538
+ }
539
+ event.preventDefault();
540
+ const { x, y } = this.getSvgPoint(event);
541
+ switch (this.selectedShape.type) {
542
+ case 'rectangle':
543
+ const startX = this.selectedShape.x;
544
+ const startY = this.selectedShape.y;
545
+ const width = this.selectedShape.width;
546
+ const height = this.selectedShape.height;
547
+ // 핸들의 좌표에 따라 너비 및 높이 조정
548
+ if (this.offsetX === startX && this.offsetY === startY) {
549
+ // 상좌 핸들 (왼쪽 위)
550
+ this.selectedShape.x = x;
551
+ this.selectedShape.y = y;
552
+ this.selectedShape.width = width + (startX - x);
553
+ this.selectedShape.height = height + (startY - y);
554
+ }
555
+ else if (this.offsetX === startX + width && this.offsetY === startY) {
556
+ // 상우 핸들 (오른쪽 위)
557
+ this.selectedShape.y = y;
558
+ this.selectedShape.width = Math.abs(x - startX);
559
+ this.selectedShape.height = height + (startY - y);
560
+ }
561
+ else if (this.offsetX === startX && this.offsetY === startY + height) {
562
+ // 하좌 핸들 (왼쪽 아래)
563
+ this.selectedShape.x = x;
564
+ this.selectedShape.width = width + (startX - x);
565
+ this.selectedShape.height = Math.abs(y - startY);
566
+ }
567
+ else if (this.offsetX === startX + width && this.offsetY === startY + height) {
568
+ // 하우 핸들 (오른쪽 아래)
569
+ this.selectedShape.width = Math.abs(x - startX);
570
+ this.selectedShape.height = Math.abs(y - startY);
571
+ }
572
+ // 최소 너비 및 높이 유지
573
+ this.selectedShape.width = Math.max(10, this.selectedShape.width);
574
+ this.selectedShape.height = Math.max(10, this.selectedShape.height);
575
+ this.offsetX = x;
576
+ this.offsetY = y;
577
+ break;
578
+ case 'circle':
579
+ const dx = x - this.selectedShape.cx;
580
+ const dy = y - this.selectedShape.cy;
581
+ this.selectedShape.r = Math.sqrt(dx * dx + dy * dy);
582
+ break;
583
+ case 'triangle':
584
+ const points = this.selectedShape.points.split(' ').map(p => p.split(',').map(Number));
585
+ const index = points.findIndex(([px, py]) => px === this.offsetX && py === this.offsetY);
586
+ if (index !== -1) {
587
+ points[index] = [x, y];
588
+ this.selectedShape.points = points.map(p => p.join(',')).join(' ');
589
+ this.offsetX = x;
590
+ this.offsetY = y;
591
+ }
592
+ break;
593
+ case 'line':
594
+ case 'arrow':
595
+ if (this.offsetX === this.selectedShape.x1 && this.offsetY === this.selectedShape.y1) {
596
+ this.selectedShape.x1 = x;
597
+ this.selectedShape.y1 = y;
598
+ }
599
+ else if (this.offsetX === this.selectedShape.x2 && this.offsetY === this.selectedShape.y2) {
600
+ this.selectedShape.x2 = x;
601
+ this.selectedShape.y2 = y;
602
+ }
603
+ this.offsetX = x;
604
+ this.offsetY = y;
605
+ break;
606
+ }
607
+ this.requestUpdate();
608
+ };
609
+ onResizeHandlePointerUp = (event) => {
610
+ event.preventDefault();
611
+ document.removeEventListener('pointermove', this.onResizeHandlePointerMove);
612
+ document.removeEventListener('pointerup', this.onResizeHandlePointerUp);
613
+ };
626
614
  onTextDoubleClick(event, shape) {
627
615
  event.stopPropagation();
628
616
  event.preventDefault();
@@ -730,6 +718,17 @@ let OxImageMarker = class OxImageMarker extends BaseImageMarker {
730
718
  context.font = window.getComputedStyle(input).font;
731
719
  return context.measureText(text).width;
732
720
  }
721
+ onFocus = () => {
722
+ this.addEventListener('keydown', this.handleKeyDown);
723
+ };
724
+ onBlur = () => {
725
+ this.removeEventListener('keydown', this.handleKeyDown);
726
+ };
727
+ handleKeyDown = (event) => {
728
+ if ((event.key === 'Delete' || event.key === 'Backspace') && this.selectedShape) {
729
+ this.deleteSelectedShape();
730
+ }
731
+ };
733
732
  deleteSelectedShape() {
734
733
  if (this.selectedShape) {
735
734
  this.shapes = this.shapes.filter(s => s.id !== this.selectedShape.id);