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

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,9 +42,11 @@ 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
@@ -72,6 +75,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 +107,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 +124,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 +158,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 +245,8 @@ export class OxImageMarker extends BaseImageMarker {
           return
       }
 
-      this.selectedShape = newShape
       this.shapes = [...this.shapes, newShape]
+      this.setSelectedShape(newShape)
     }
 
     if (this.selectedShape) {
@@ -278,7 +280,7 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onDrawingMouseUp = (event: MouseEvent | TouchEvent) => {
+  private onMouseUpForDrawing = (event: MouseEvent | TouchEvent) => {
     event.preventDefault()
 
     this.drawing = false
@@ -286,20 +288,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 +340,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 +357,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 +373,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 +387,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 +403,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 +437,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 +460,11 @@ export class OxImageMarker extends BaseImageMarker {
     }
   }
 
-  private onShapeMouseDown(event: MouseEvent | TouchEvent, shape: Shape) {
+  private onMouseDownOnShape(event: MouseEvent | TouchEvent, shape: Shape) {
+    if (this.currentMode !== 'edit') {
+      return
+    }
+
     event.stopPropagation()
     event.preventDefault()
 
@@ -433,7 +473,7 @@ export class OxImageMarker extends BaseImageMarker {
       selected: s.id === shape.id
     }))
 
-    this.selectedShape = this.shapes.find(s => s.id == shape.id)!
+    this.setSelectedShape(this.shapes.find(s => s.id == shape.id)!)
 
     const { x, y } = this.getSvgPoint(event)
 
@@ -446,7 +486,7 @@ export class OxImageMarker extends BaseImageMarker {
         break
 
       case 'triangle':
-        const points = this.selectedShape.points!.split(' ').map(p => p.split(',').map(Number))
+        const points = this.selectedShape!.points!.split(' ').map(p => p.split(',').map(Number))
         const [px, py] = points[0] || [0, 0]
 
         this.offsetX = x - px
@@ -464,15 +504,15 @@ export class OxImageMarker extends BaseImageMarker {
     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
     }
@@ -515,17 +555,17 @@ export class OxImageMarker extends BaseImageMarker {
     this.requestUpdate()
   }
 
-  private onShapeMouseUp = (event: MouseEvent | TouchEvent) => {
+  private onMouseUpOnShape = (event: MouseEvent | TouchEvent) => {
     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 +619,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 +628,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 +657,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 +726,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 +882,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