@operato/image-marker 8.0.0-alpha.23 → 8.0.0-alpha.25

package/src/ox-image-marker-mode.ts

@@ -38,57 +38,57 @@ export class OxImageMarkerMode extends LitElement {
     }
   `
 
-  @property({ type: String }) currentMode: ImageMarkerMode = 'select'
+  @property({ type: String }) currentMode: ImageMarkerMode = 'edit'
   @property({ type: String }) currentShapeType?: ShapeType
 
   render() {
     return html`
       <div class="palette">
         <md-icon
-          title="Move or Select"
-          ?selected=${this.currentMode !== 'draw'}
-          @click=${() => this.setMode(this.currentMode !== 'select' ? 'select' : 'move')}
-          >${this.currentMode !== 'move' ? 'select' : 'drag_pan'}</md-icon
+          title="Edit or View"
+          ?selected=${this.currentMode !== 'shape'}
+          @click=${() => this.setMode(this.currentMode !== 'edit' ? 'edit' : 'view')}
+          >${this.currentMode !== 'view' ? 'brush' : 'drag_pan'}</md-icon
         >
 
         <md-icon
           title="Text"
-          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'text'}
+          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'text'}
           @click=${() => this.setShape('text')}
           >match_case</md-icon
         >
 
         <md-icon
           title="Rectangle"
-          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'rectangle'}
+          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'rectangle'}
           @click=${() => this.setShape('rectangle')}
           >rectangle</md-icon
         >
 
         <md-icon
           title="Circle"
-          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'circle'}
+          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'circle'}
           @click=${() => this.setShape('circle')}
           >circle</md-icon
         >
 
         <md-icon
           title="Triangle"
-          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'triangle'}
+          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'triangle'}
           @click=${() => this.setShape('triangle')}
           >change_history</md-icon
         >
 
         <md-icon
           title="Line"
-          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'line'}
+          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'line'}
           @click=${() => this.setShape('line')}
           >shape_line</md-icon
         >
 
         <md-icon
           title="Arrow"
-          ?selected=${this.currentMode === 'draw' && this.currentShapeType === 'arrow'}
+          ?selected=${this.currentMode === 'shape' && this.currentShapeType === 'arrow'}
           @click=${() => this.setShape('arrow')}
           >line_end_arrow</md-icon
         >
@@ -105,7 +105,7 @@ export class OxImageMarkerMode extends LitElement {
     `
   }
 
-  private setMode(mode: ImageMarkerMode) {
+  public setMode(mode: ImageMarkerMode) {
     this.currentMode = mode
 
     this.dispatchEvent(
@@ -117,12 +117,12 @@ export class OxImageMarkerMode extends LitElement {
     )
   }
 
-  private setShape(shapeType: ShapeType) {
-    this.currentMode = 'draw'
+  protected setShape(shapeType: ShapeType) {
+    this.currentMode = 'shape'
     this.currentShapeType = shapeType
     this.dispatchEvent(
       new CustomEvent('mode-changed', {
-        detail: { mode: 'draw', shapeType: this.currentShapeType },
+        detail: { mode: 'shape', shapeType: this.currentShapeType },
         bubbles: true,
         composed: true
       })

package/src/ox-image-marker.ts

@@ -1,12 +1,13 @@
 import './ox-image-marker-mode'
 
 import { html, css, svg, nothing } from 'lit'
-import { state, customElement } from 'lit/decorators.js'
+import { query, state, customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { keyed } from 'lit/directives/keyed.js'
 
 import { ImageMarkerMode, Shape, ShapeType } from './types'
 import { BaseImageMarker } from './base-image-marker'
+import { OxImageMarkerMode } from './ox-image-marker-mode'
 
 @customElement('ox-image-marker')
 export class OxImageMarker extends BaseImageMarker {
@@ -27,11 +28,11 @@ export class OxImageMarker extends BaseImageMarker {
       }
 
       svg {
-        cursor: crosshair;
+        cursor: default;
       }
 
-      svg.dragging {
-        cursor: move;
+      svg[drawing] {
+        cursor: crosshair;
       }
 
       .resize-handle {
@@ -41,14 +42,18 @@ export class OxImageMarker extends BaseImageMarker {
   ]
 
   @state() private currentShapeType?: ShapeType
-  @state() private currentMode: ImageMarkerMode = 'select'
+  @state() private currentMode: ImageMarkerMode = 'edit'
   @state() private selectedShape: Shape | null = null
 
+  @query('ox-image-marker-mode') imageMarkerMode!: OxImageMarkerMode
+
   private drawing = false
   private startX = 0
   private startY = 0
   private offsetX = 0
   private offsetY = 0
+  private shapeMoveThreshold = 10
+  private shapeMoveInitiated = false
 
   connectedCallback() {
     super.connectedCallback()
@@ -72,6 +77,7 @@ export class OxImageMarker extends BaseImageMarker {
           @wheel=${this.onSvgWheel}
           @dblclick=${this.onSvgDoubleClick}
           viewBox=${this.viewBox}
+          ?drawing=${this.currentMode == 'shape'}
         >
           <image href=${this.imageUrl} @load=${this.onImageLoad}></image>
           ${this.shapes.map(shape => keyed(shape.id, this.renderShape(shape)))}
@@ -103,15 +109,12 @@ export class OxImageMarker extends BaseImageMarker {
   protected onSvgMouseDown(event: MouseEvent) {
     event.preventDefault()
 
-    this.selectedShape = null
-    this.shapes = this.shapes.map(s => {
-      return { ...s, selected: false }
-    })
+    this.setSelectedShape(null)
 
-    if (this.currentMode === 'move') {
-      this.startPanning(event)
-    } else if (this.currentMode === 'draw') {
+    if (this.currentMode === 'shape') {
       this.startDrawing(event)
+    } else {
+      this.startPanning(event)
     }
   }
 
@@ -123,15 +126,12 @@ export class OxImageMarker extends BaseImageMarker {
     }
 
     if (event.touches.length === 1) {
-      this.selectedShape = null
-      this.shapes = this.shapes.map(s => {
-        return { ...s, selected: false }
-      })
+      this.setSelectedShape(null)
 
-      if (this.currentMode === 'move') {
-        this.startPanning(event)
-      } else if (this.currentMode === 'draw') {
+      if (this.currentMode === 'shape') {
         this.startDrawing(event)
+      } else {
+        this.startPanning(event)
       }
     } else if (event.touches.length === 2) {
       this.startPinchZooming(event)
@@ -160,20 +160,24 @@ export class OxImageMarker extends BaseImageMarker {
     }
 
     if ('touches' in event) {
-      this.svg.addEventListener('touchmove', this.onDrawingMouseMove)
-      this.svg.addEventListener('touchend', this.onDrawingMouseUp)
+      this.svg.addEventListener('touchmove', this.onMouseMoveForDrawing)
+      this.svg.addEventListener('touchend', this.onMouseUpForDrawing)
     } else {
-      this.svg.addEventListener('mousemove', this.onDrawingMouseMove)
-      this.svg.addEventListener('mouseup', this.onDrawingMouseUp)
+      this.svg.addEventListener('mousemove', this.onMouseMoveForDrawing)
+      this.svg.addEventListener('mouseup', this.onMouseUpForDrawing)
     }
   }
 
   private setMode(mode: ImageMarkerMode, shapeType: ShapeType) {
+    if (mode == 'view') {
+      this.setSelectedShape(null)
+    }
+
     this.currentMode = mode
     this.currentShapeType = shapeType
   }
 
-  private onDrawingMouseMove = (event: MouseEvent | TouchEvent) => {
+  private onMouseMoveForDrawing = (event: MouseEvent | TouchEvent) => {
     if (!this.drawing) {
       return
     }
@@ -243,8 +247,8 @@ export class OxImageMarker extends BaseImageMarker {
           return
       }
 
-      this.selectedShape = newShape
       this.shapes = [...this.shapes, newShape]
+      this.setSelectedShape(newShape)
     }
 
     if (this.selectedShape) {
@@ -278,7 +282,7 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onDrawingMouseUp = (event: MouseEvent | TouchEvent) => {
+  private onMouseUpForDrawing = (event: MouseEvent | TouchEvent) => {
     event.preventDefault()
 
     this.drawing = false
@@ -286,20 +290,30 @@ export class OxImageMarker extends BaseImageMarker {
     const svg = this.svg as SVGSVGElement
 
     if ('touches' in event) {
-      svg.removeEventListener('touchmove', this.onDrawingMouseMove)
-      svg.removeEventListener('touchend', this.onDrawingMouseUp)
+      svg.removeEventListener('touchmove', this.onMouseMoveForDrawing)
+      svg.removeEventListener('touchend', this.onMouseUpForDrawing)
     } else {
-      svg.removeEventListener('mousemove', this.onDrawingMouseMove)
-      svg.removeEventListener('mouseup', this.onDrawingMouseUp)
+      svg.removeEventListener('mousemove', this.onMouseMoveForDrawing)
+      svg.removeEventListener('mouseup', this.onMouseUpForDrawing)
     }
 
-    if (this.selectedShape) {
-      this.selectedShape.selected = true
-    }
+    this.imageMarkerMode.setMode('edit')
 
     this.requestUpdate()
   }
 
+  private setSelectedShape(shape: Shape | null) {
+    this.selectedShape = shape
+
+    if (!shape) {
+      this.shapes = this.shapes.map(s => {
+        return { ...s, selected: false }
+      })
+    } else {
+      this.selectedShape!.selected = true
+    }
+  }
+
   private getSvgPoint(event: MouseEvent | TouchEvent) {
     const { x, y } = this.getPointFromEvent(event)
 
@@ -328,8 +342,8 @@ export class OxImageMarker extends BaseImageMarker {
             y="${shape.y!}"
             fill="${commonAttrs.stroke}"
             style="cursor: ${commonAttrs.cursor}; font-size: 16px;"
-            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
             @dblclick="${(e: MouseEvent) => this.onTextDoubleClick(e, shape)}"
           >${shape.text}</text>
         `
@@ -345,8 +359,8 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
           ></rect>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -361,8 +375,8 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
           ></circle>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -375,8 +389,8 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             fill="${commonAttrs.fill}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
+            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
           ></polygon>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -391,8 +405,20 @@ export class OxImageMarker extends BaseImageMarker {
             stroke="${commonAttrs.stroke}"
             stroke-width="${commonAttrs['stroke-width']}"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
+          ></line>
+          <line
+            x1="${shape.x1!}"
+            y1="${shape.y1!}"
+            x2="${shape.x2 ?? shape.x1}"
+            y2="${shape.y2 ?? shape.y1}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="25"
+            stroke-opacity="0"
+            pointer-events="stroke"
+            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
+            @mouseleave="${() => (this.svg.style.cursor = 'default')}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -413,8 +439,20 @@ export class OxImageMarker extends BaseImageMarker {
             stroke-width="${commonAttrs['stroke-width']}"
             marker-end="url(#arrowhead-${shape.id})"
             style="cursor: ${commonAttrs.cursor}"
-            @mousedown="${(e: MouseEvent) => this.onShapeMouseDown(e, shape)}"
-            @touchstart="${(e: TouchEvent) => this.onShapeMouseDown(e, shape)}"
+          ></line>
+          <line
+            x1="${shape.x1!}"
+            y1="${shape.y1!}"
+            x2="${shape.x2 ?? shape.x1}"
+            y2="${shape.y2 ?? shape.y1}"
+            stroke="${commonAttrs.stroke}"
+            stroke-width="25"
+            stroke-opacity="0"
+            pointer-events="stroke"
+            @mousedown="${(e: MouseEvent) => this.onMouseDownOnShape(e, shape)}"
+            @touchstart="${(e: TouchEvent) => this.onMouseDownOnShape(e, shape)}"
+            @mouseenter="${() => (this.svg.style.cursor = 'pointer')}"
+            @mouseleave="${() => (this.svg.style.cursor = 'default')}"
           ></line>
           ${shape.selected ? this.renderResizeHandles(shape) : ''}
         `
@@ -424,7 +462,15 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onShapeMouseDown(event: MouseEvent | TouchEvent, shape: Shape) {
+  private onMouseDownOnShape(event: MouseEvent | TouchEvent, shape: Shape) {
+    if (this.currentMode !== 'edit') {
+      return
+    }
+
+    if ('touches' in event && event.touches.length > 1) {
+      return
+    }
+
     event.stopPropagation()
     event.preventDefault()
 
@@ -433,99 +479,100 @@ export class OxImageMarker extends BaseImageMarker {
       selected: s.id === shape.id
     }))
 
-    this.selectedShape = this.shapes.find(s => s.id == shape.id)!
+    this.shapeMoveInitiated = false
+    this.setSelectedShape(this.shapes.find(s => s.id == shape.id)!)
 
     const { x, y } = this.getSvgPoint(event)
 
-    switch (shape.type) {
-      case 'text':
-      case 'rectangle':
-      case 'circle':
-        this.offsetX = x - (shape.x || shape.cx || 0)
-        this.offsetY = y - (shape.y || shape.cy || 0)
-        break
-
-      case 'triangle':
-        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))
-        const [px, py] = points[0] || [0, 0]
-
-        this.offsetX = x - px
-        this.offsetY = y - py
-
-        break
-
-      case 'line':
-      case 'arrow':
-        this.offsetX = x - shape.x1!
-        this.offsetY = y - shape.y1!
-        break
-    }
+    this.offsetX = x
+    this.offsetY = y
 
     const svg = this.svg as SVGSVGElement
 
     if ('touches' in event) {
-      svg.addEventListener('touchmove', this.onShapeMouseMove)
-      svg.addEventListener('touchend', this.onShapeMouseUp)
+      svg.addEventListener('touchmove', this.onMouseMoveOnShape)
+      svg.addEventListener('touchend', this.onMouseUpOnShape)
     } else {
-      svg.addEventListener('mousemove', this.onShapeMouseMove)
-      svg.addEventListener('mouseup', this.onShapeMouseUp)
+      svg.addEventListener('mousemove', this.onMouseMoveOnShape)
+      svg.addEventListener('mouseup', this.onMouseUpOnShape)
     }
   }
 
-  private onShapeMouseMove = (event: MouseEvent | TouchEvent) => {
+  private onMouseMoveOnShape = (event: MouseEvent | TouchEvent) => {
     if (!this.selectedShape) {
       return
     }
 
+    if ('touches' in event && event.touches.length > 1) {
+      return
+    }
+
     event.preventDefault()
 
     const { x, y } = this.getSvgPoint(event)
 
+    const dx = x - this.offsetX
+    const dy = y - this.offsetY
+
+    if (!this.shapeMoveInitiated) {
+      const distance = Math.sqrt(dx * dx + dy * dy)
+
+      if (distance < this.shapeMoveThreshold) {
+        return
+      }
+
+      this.shapeMoveInitiated = true
+    }
+
+    this.offsetX = x
+    this.offsetY = y
+
     switch (this.selectedShape.type) {
       case 'text':
       case 'rectangle':
-        this.selectedShape.x = x - this.offsetX
-        this.selectedShape.y = y - this.offsetY
+        this.selectedShape.x! += dx
+        this.selectedShape.y! += dy
         break
       case 'circle':
-        this.selectedShape.cx = x - this.offsetX
-        this.selectedShape.cy = y - this.offsetY
+        this.selectedShape.cx! += dx
+        this.selectedShape.cy! += dy
         break
       case 'triangle':
         const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))
-        const [ox, oy] = points[0]
 
-        this.selectedShape.points = points
-          .map(([px, py]) => [px - ox + x - this.offsetX, py - oy + y - this.offsetY].join(','))
-          .join(' ')
+        this.selectedShape.points = points.map(([px, py]) => [px + dx, py + dy].join(',')).join(' ')
         break
       case 'line':
       case 'arrow':
-        const dxLine = x - this.offsetX
-        const dyLine = y - this.offsetY
-        const deltaX = dxLine - this.selectedShape.x1!
-        const deltaY = dyLine - this.selectedShape.y1!
-        this.selectedShape.x1 = dxLine
-        this.selectedShape.y1 = dyLine
-        this.selectedShape.x2 = this.selectedShape.x2! + deltaX
-        this.selectedShape.y2 = this.selectedShape.y2! + deltaY
+        this.selectedShape.x1! += dx
+        this.selectedShape.x2! += dx
+        this.selectedShape.y1! += dy
+        this.selectedShape.y2! += dy
         break
     }
 
     this.requestUpdate()
   }
 
-  private onShapeMouseUp = (event: MouseEvent | TouchEvent) => {
+  private onMouseUpOnShape = (event: MouseEvent | TouchEvent) => {
+    if (!this.selectedShape) {
+      return
+    }
+
+    if ('touches' in event && event.touches.length > 1) {
+      return
+    }
+
     event.preventDefault()
 
     const svg = this.svg as SVGSVGElement
 
     if ('touches' in event) {
-      svg.removeEventListener('touchmove', this.onShapeMouseMove)
-      svg.removeEventListener('touchend', this.onShapeMouseUp)
+      svg.removeEventListener('touchmove', this.onMouseMoveOnShape)
+      svg.removeEventListener('touchend', this.onMouseUpOnShape)
     } else {
-      svg.removeEventListener('mousemove', this.onShapeMouseMove)
-      svg.removeEventListener('mouseup', this.onShapeMouseUp)
+      svg.removeEventListener('mousemove', this.onMouseMoveOnShape)
+      svg.removeEventListener('mouseup', this.onMouseUpOnShape)
     }
   }
 
@@ -579,8 +626,8 @@ export class OxImageMarker extends BaseImageMarker {
               stroke="black"
               class="resize-handle"
               style="cursor: ${handle.cursor};"
-              @mousedown="${(e: MouseEvent) => this.onHandleMouseDown(e, shape, handle)}"
-              @touchstart="${(e: TouchEvent) => this.onHandleMouseDown(e, shape, handle)}"
+              @mousedown="${(e: MouseEvent) => this.onResizeHandleMouseDown(e, shape, handle)}"
+              @touchstart="${(e: TouchEvent) => this.onResizeHandleMouseDown(e, shape, handle)}"
             ></rect>
           </g>
         `
@@ -588,25 +635,26 @@ export class OxImageMarker extends BaseImageMarker {
     `
   }
 
-  private onHandleMouseDown(event: MouseEvent | TouchEvent, shape: Shape, handle: any) {
+  private onResizeHandleMouseDown(event: MouseEvent | TouchEvent, shape: Shape, handle: any) {
     event.stopPropagation()
     event.preventDefault()
 
-    this.selectedShape = shape
+    this.setSelectedShape(shape)
+
     this.offsetX = handle.x
     this.offsetY = handle.y
     const svg = this.svg as SVGSVGElement
 
     if ('touches' in event) {
-      svg.addEventListener('touchmove', this.onHandleMouseMove)
-      svg.addEventListener('touchend', this.onHandleMouseUp)
+      svg.addEventListener('touchmove', this.onResizeHandleMouseMove)
+      svg.addEventListener('touchend', this.onResizeHandleMouseUp)
     } else {
-      svg.addEventListener('mousemove', this.onHandleMouseMove)
-      svg.addEventListener('mouseup', this.onHandleMouseUp)
+      svg.addEventListener('mousemove', this.onResizeHandleMouseMove)
+      svg.addEventListener('mouseup', this.onResizeHandleMouseUp)
     }
   }
 
-  private onHandleMouseMove = (event: MouseEvent | TouchEvent) => {
+  private onResizeHandleMouseMove = (event: MouseEvent | TouchEvent) => {
     if (!this.selectedShape) {
       return
     }
@@ -616,12 +664,6 @@ export class OxImageMarker extends BaseImageMarker {
     const { x, y } = this.getSvgPoint(event)
 
     switch (this.selectedShape.type) {
-      // case 'text':
-      //   this.selectedShape.width = Math.abs(x - this.selectedShape.x!)
-      //   this.selectedShape.height = Math.abs(y - this.selectedShape.y!)
-      //   if (x < this.selectedShape.x!) this.selectedShape.x = x
-      //   if (y < this.selectedShape.y!) this.selectedShape.y = y
-      //   break
       case 'rectangle':
         const startX = this.selectedShape.x!
         const startY = this.selectedShape.y!
@@ -691,20 +733,18 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  private onHandleMouseUp = (event: MouseEvent | TouchEvent) => {
+  private onResizeHandleMouseUp = (event: MouseEvent | TouchEvent) => {
     event.preventDefault()
 
     const svg = this.svg as SVGSVGElement
 
     if ('touches' in event) {
-      svg.removeEventListener('touchmove', this.onHandleMouseMove)
-      svg.removeEventListener('touchend', this.onHandleMouseUp)
+      svg.removeEventListener('touchmove', this.onResizeHandleMouseMove)
+      svg.removeEventListener('touchend', this.onResizeHandleMouseUp)
     } else {
-      svg.removeEventListener('mousemove', this.onHandleMouseMove)
-      svg.removeEventListener('mouseup', this.onHandleMouseUp)
+      svg.removeEventListener('mousemove', this.onResizeHandleMouseMove)
+      svg.removeEventListener('mouseup', this.onResizeHandleMouseUp)
     }
-
-    this.selectedShape = null
   }
 
   private onTextDoubleClick(event: MouseEvent, shape: Shape) {
@@ -849,7 +889,9 @@ export class OxImageMarker extends BaseImageMarker {
   private deleteSelectedShape() {
     if (this.selectedShape) {
       this.shapes = this.shapes.filter(s => s.id !== this.selectedShape!.id)
-      this.selectedShape = null
+
+      this.setSelectedShape(null)
+
       this.requestUpdate()
     }
   }

package/src/types.ts

@@ -1,5 +1,5 @@
 export type ShapeType = 'text' | 'rectangle' | 'circle' | 'triangle' | 'line' | 'arrow'
-export type ImageMarkerMode = 'move' | 'select' | 'draw'
+export type ImageMarkerMode = 'edit' | 'view' | 'shape'
 export interface Shape {
   id: string
   type: ShapeType