@operato/image-marker 8.0.0-alpha.37 → 8.0.0-alpha.39

package/src/base-image-marker.ts

@@ -32,6 +32,10 @@ export class BaseImageMarker extends LitElement {
         height: 100%;
         touch-action: none;
       }
+
+      .link:hover {
+        cursor: pointer;
+      }
     `
   ]
 
@@ -50,6 +54,7 @@ export class BaseImageMarker extends LitElement {
   protected initialViewBox: string | null = null
 
   @query('svg') protected svg!: SVGSVGElement
+  @query('image') protected image!: SVGImageElement
 
   private gestureHelper: GestureHelper | null = null
 
@@ -69,6 +74,7 @@ export class BaseImageMarker extends LitElement {
 
   protected updated(changes: PropertyValues): void {
     if (changes.has('imageUrl') || changes.has('imageProvider')) {
+      this.zoomLevel = 1
       this.initialViewBox = null
       this.updateImage()
     }
@@ -79,19 +85,26 @@ export class BaseImageMarker extends LitElement {
   }
 
   protected onImageLoad(event: Event) {
+    const element = event.target as SVGImageElement
     const img = new Image()
 
     img.onload = () => {
-      const [vbX, vbY, vbWidth, vbHeight] = this.viewBox.split(' ').map(Number)
+      const width = img.naturalWidth
+      const height = img.naturalHeight
 
       if (!this.initialViewBox) {
-        const width = img.naturalWidth
-        const height = img.naturalHeight
-
         this.initialViewBox = `0 0 ${width} ${height}`
         this.viewBox = this.initialViewBox
+
+        element.setAttribute('width', width.toString())
+        element.setAttribute('height', height.toString())
+        element.setAttribute('preserveAspectRatio', 'xMidYMid meet')
       } else {
-        this.viewBox = `${vbX} ${vbY} ${vbWidth} ${vbHeight}`
+        const [initialX, initialY, initialWidth, initialHeight] = this.initialViewBox.split(' ').map(Number)
+        const scale = initialWidth / width
+
+        element.setAttribute('width', (width * scale).toString())
+        element.setAttribute('height', (height * scale).toString())
       }
     }
 
@@ -103,6 +116,10 @@ export class BaseImageMarker extends LitElement {
       throw new Error('ImageProvider is not set')
     }
 
+    if (!this.imageUrl) {
+      return
+    }
+
     const options = {
       id: this.imageUrl, // 이미지 ID는 imageUrl 속성을 사용
       scale: this.zoomLevel, // scale은 zoomLevel 속성을 사용
@@ -177,13 +194,28 @@ export class BaseImageMarker extends LitElement {
     }
   }
 
-  protected reset() {
+  public reset() {
+    if (!this.initialViewBox) {
+      this.zoomLevel = 1
+      return
+    }
+
     this.viewBox = this.initialViewBox!
     this.zoomLevel = 1
 
     this.debouncedUpdateImage()
   }
 
+  protected handleLinkClick(shape: Shape) {
+    this.dispatchEvent(
+      new CustomEvent('link-clicked', {
+        detail: { id: shape.id, link: shape.link },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   protected renderShape(shape: Shape) {
     const commonAttrs = {
       stroke: 'red',
@@ -208,6 +240,12 @@ export class BaseImageMarker extends LitElement {
             </marker>
           </defs>
           <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>`
+      case 'link':
+        return svg`
+          <rect class="link" x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}" 
+            stroke="${commonAttrs.stroke}" stroke-width="0" 
+            fill="${commonAttrs.stroke}" fill-opacity="0.3" @click="${() => this.handleLinkClick(shape)}">
+          </rect>`
       default:
         return nothing
     }

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './types.js'
+export * from './base-image-marker.js'
+
+export * from './ox-image-marker.js'
+export * from './ox-image-marker-view.js'
+export * from './ox-image-marker-mode.js'

package/src/ox-image-marker.ts

@@ -432,6 +432,13 @@ export class OxImageMarker extends BaseImageMarker {
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
 
+      case 'link':
+        return svg`
+          <rect class="link" x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}" 
+            stroke="${commonAttrs.stroke}" stroke-width="0" 
+            fill="${commonAttrs.stroke}" fill-opacity="0.3" @click="${() => this.handleLinkClick(shape)}">
+          </rect>
+        `
       default:
         return nothing
     }

package/src/types.ts

@@ -1,4 +1,4 @@
-export type ShapeType = 'text' | 'rectangle' | 'circle' | 'triangle' | 'line' | 'arrow'
+export type ShapeType = 'text' | 'rectangle' | 'circle' | 'triangle' | 'line' | 'arrow' | 'link'
 export type ImageMarkerMode = 'edit' | 'view' | 'shape'
 export interface Shape {
   id: string
@@ -17,6 +17,8 @@ export interface Shape {
   y2?: number
   selected?: boolean
   text?: string
+  link?: string
+  opacity?: number
 }
 
 export interface ImageOptions {

package/stories/test-image-provider.stories.ts

@@ -94,7 +94,7 @@ const Template: Story<ArgTypes> = ({ imageUrl, shapes = [] }: ArgTypes) => html`
 
     imageMarker.setImageProvider(new TestImageProvider(1080, 720))
     document.body.querySelector('[button1]').addEventListener('click', e => {
-      imageMarker.setImageProvider(new TestImageProvider(1600, 1200))
+      imageMarker.setImageProvider(new TestImageProvider(1600, 400))
     })
     document.body.querySelector('[button2]').addEventListener('click', e => {
       imageMarker.setImageProvider(new TestImageProvider(800, 600))
@@ -103,7 +103,7 @@ const Template: Story<ArgTypes> = ({ imageUrl, shapes = [] }: ArgTypes) => html`
 
   <ox-image-marker .imageUrl=${imageUrl} .shapes=${shapes}></ox-image-marker>
   <div buttons>
-    <button button1>1200 x 800</button>
+    <button button1>1600 x 400</button>
     <button button2>800 x 600</button>
   </div>
 `

package/stories/test-image-provider.ts

@@ -27,8 +27,10 @@ export class TestImageProvider implements ImageProvider {
       throw new Error('Failed to get canvas context')
     }
 
-    const width = this.width
-    const height = this.height
+    const { scale } = options
+
+    const width = this.width * scale
+    const height = this.height * scale
     canvas.width = width
     canvas.height = height