chore: minimise line ui

feat: end drawing after finish line
chore: lint

src/atlasComponents/userAnnotations/tools/line.ts

@@ -9,6 +9,7 @@ import {
   TSandsLine,
   getCoord,
   TBaseAnnotationGeomtrySpec,
+  TCallbackFunction,
 } from "./type";
 import { Point, TPointJsonSpec } from './point'
 import { OnDestroy } from "@angular/core";
@@ -37,11 +38,11 @@ export class Line extends IAnnotationGeometry{
     const point = p instanceof Point
       ? p
       : new Point({
-          id: `${this.id}_${getUuid()}`,
-          "@type": 'siibra-ex/annotatoin/point',
-          space: this.space,
-          ...p
-        })
+        id: `${this.id}_${getUuid()}`,
+        "@type": 'siibra-ex/annotatoin/point',
+        space: this.space,
+        ...p
+      })
     if (!this.points[0]) this.points[0] = point
     else this.points[1] = point
     this.sendUpdateSignal()
@@ -167,9 +168,10 @@ export class ToolLine extends AbsToolClass implements IAnnotationTools, OnDestro
 
 
   constructor(
-    annotationEv$: Observable<TAnnotationEvent<keyof IAnnotationEvents>>
+    annotationEv$: Observable<TAnnotationEvent<keyof IAnnotationEvents>>,
+    callback?: TCallbackFunction
   ){
-    super(annotationEv$)
+    super(annotationEv$, callback)
 
     this.init()
     
@@ -212,6 +214,10 @@ export class ToolLine extends AbsToolClass implements IAnnotationTools, OnDestro
           // ToDo Tool Should Be Deselected.
           this.selectedLine.addLinePoints(crd)
           this.selectedLine = null
+
+          if (this.callback) {
+            this.callback({ type: 'paintingEnd' })
+          }
         }
       }),
 

src/atlasComponents/userAnnotations/tools/line/line.component.ts

@@ -23,8 +23,6 @@ export class LineUpdateCmp extends ToolCmpBase implements OnDestroy{
   @Input('update-annotation')
   public updateAnnotation: Line
 
-  public showMoreFlag = false
-
   public ARIA_LABELS = ARIA_LABELS
 
   public annotationLabel = 'Line'
@@ -77,7 +75,7 @@ export class LineUpdateCmp extends ToolCmpBase implements OnDestroy{
     return this.copyTarget && this.copyTarget.nativeElement.value
   }
 
-  gotoRoi(roi?:IAnnotationGeometry){
+  gotoRoi(roi?: IAnnotationGeometry){
     if (!this.updateAnnotation && !roi) {
       throw new Error(`updateAnnotation undefined`)
     }
@@ -100,7 +98,7 @@ export class LineUpdateCmp extends ToolCmpBase implements OnDestroy{
     )
   }
 
-  gotoPoint(point:Point){
+  gotoPoint(point: Point){
     if (!point) throw new Error(`Point is not defined.`)
     const { x, y, z } = point
 

src/atlasComponents/userAnnotations/tools/line/line.template.html

 <!-- actions -->
-<div class="d-flex">
 
-  <!-- show more -->
-  <button mat-icon-button (click)="showMoreFlag = !showMoreFlag">
-    <i [ngClass]="showMoreFlag ? 'r-90' :  ''"
-      class="t-a-ease-200 transform-origin-center fas fa-chevron-right">
-    </i>
-  </button>
+<span class="m-2 text-muted">
+  Endpoints
+</span>
 
-  <!-- spacer -->
-  <div class="flex-grow-1"></div>
+<mat-chip-list>
+  <mat-chip *ngFor="let point of (updateAnnotation?.points || []) ; let i = index"
+    (click)="gotoPoint(point)">
+    {{ i }}
+  </mat-chip>
+</mat-chip-list>
 
-  <!-- go to -->
-  <button mat-icon-button
-    [attr.aria-label]="ARIA_LABELS.GOTO_ANNOTATION_ROI"
-    [matTooltip]="ARIA_LABELS.GOTO_ANNOTATION_ROI"
-    (click)="gotoRoi()">
-    <i class="fas fa-map-marked-alt"></i>
-  </button>
+<mat-divider class="m-2"></mat-divider>
+
+<div class="d-flex">
 
   <!-- export -->
   <button mat-icon-button
@@ -64,40 +60,3 @@
     </div>
   </div>
 </mat-menu>
-
-<!-- detail pane -->
-<ng-template [ngIf]="showMoreFlag">
-  
-  <h2 class="mat-h4">
-    Points connecting the line
-  </h2>
-  
-  <!-- points detail -->
-  <mat-tab-group animationDuration="0ms">
-  
-    <!-- summary -->
-    <mat-tab label="Summary">
-      <div class="m-2">
-        <mat-chip-list>
-          <mat-chip *ngFor="let point of (updateAnnotation?.points || []) ; let i = index"
-            (click)="gotoPoint(point)">
-            {{ i }}
-          </mat-chip>
-        </mat-chip-list>
-      </div>
-    </mat-tab>
-  
-    <!-- detail -->
-    <mat-tab label="Detail">
-      <ng-template matTabContent>
-        <point-update-cmp
-          *ngFor="let point of (updateAnnotation?.points || []) ; let i = index"
-          class="pl-4"
-          [annotation-label]="'Point ' + ( i + 1 )"
-          [update-annotation]="point">
-        </point-update-cmp>
-      </ng-template>
-    </mat-tab>
-  </mat-tab-group>
-  
-</ng-template>
\ No newline at end of file

src/atlasComponents/userAnnotations/tools/poly.ts

@@ -47,11 +47,11 @@ export class Polygon extends IAnnotationGeometry{
     const pointToBeAdded = p instanceof Point
       ? p
       : new Point({
-          id: `${this.id}_${getUuid()}`,
-          space: this.space,
-          '@type': 'siibra-ex/annotatoin/point',
-          ...p
-        })
+        id: `${this.id}_${getUuid()}`,
+        space: this.space,
+        '@type': 'siibra-ex/annotatoin/point',
+        ...p
+      })
     
     if (!this.hasPoint(pointToBeAdded)) {
       this.points.push(pointToBeAdded)

src/atlasComponents/userAnnotations/tools/service.ts

@@ -8,7 +8,7 @@ import { viewerStateSelectedTemplatePureSelector, viewerStateViewerModeSelector
 import { NehubaViewerUnit } from "src/viewerModule/nehuba";
 import { NEHUBA_INSTANCE_INJTKN } from "src/viewerModule/nehuba/util";
 import { Polygon, ToolPolygon } from "./poly";
-import { AbsToolClass, ANNOTATION_EVENT_INJ_TOKEN, IAnnotationEvents, IAnnotationGeometry, INgAnnotationTypes, INJ_ANNOT_TARGET, TAnnotationEvent, ClassInterface, TExportFormats } from "./type";
+import { AbsToolClass, ANNOTATION_EVENT_INJ_TOKEN, IAnnotationEvents, IAnnotationGeometry, INgAnnotationTypes, INJ_ANNOT_TARGET, TAnnotationEvent, ClassInterface, TExportFormats, TCallbackFunction } from "./type";
 import { switchMapWaitFor } from "src/util/fn";
 import {Line, ToolLine} from "src/atlasComponents/userAnnotations/tools/line";
 import { PolyUpdateCmp } from './poly/poly.component'
@@ -93,14 +93,23 @@ export class ModularUserAnnotationToolService implements OnDestroy{
 
   private registeredTools: {
     name: string
-    iconClass: string,
-    target?: ClassInterface<IAnnotationGeometry>,
-    editCmp?: ClassInterface<any>,
+    iconClass: string
+    target?: ClassInterface<IAnnotationGeometry>
+    editCmp?: ClassInterface<any>
     onMouseMoveRenderPreview: (pos: [number, number, number]) => INgAnnotationTypes[keyof INgAnnotationTypes][]
     onDestoryCallBack: () => void
   }[] = []
   private mousePosReal: [number, number, number]
 
+  private handleToolCallback: TCallbackFunction = arg => {
+    switch (arg.type) {
+    case 'paintingEnd': {
+      this.deselectTools()
+      return
+    }
+    }
+  }
+
   /**
    * @description register new annotation tool
    * Some tools (deletion / dragging) may not have target and editCmp 
@@ -112,12 +121,12 @@ export class ModularUserAnnotationToolService implements OnDestroy{
    * }} arg 
    */
   private registerTool<T extends AbsToolClass>(arg: {
-    toolCls: ClassInterface<T>,
-    target?: ClassInterface<IAnnotationGeometry>,
+    toolCls: ClassInterface<T>
+    target?: ClassInterface<IAnnotationGeometry>
     editCmp?: ClassInterface<any>
   }){
     const { toolCls: Cls, target, editCmp } = arg
-    const newTool = new Cls(this.annotnEvSubj) as AbsToolClass & { ngOnDestroy?: Function }
+    const newTool = new Cls(this.annotnEvSubj, arg => this.handleToolCallback(arg)) as AbsToolClass & { ngOnDestroy?: Function }
     const { name, iconClass, onMouseMoveRenderPreview } = newTool
     
     this.moduleAnnotationTypes.push({

src/atlasComponents/userAnnotations/tools/type.ts

@@ -30,7 +30,8 @@ export abstract class AbsToolClass {
   public abstract onMouseMoveRenderPreview(mousepos: [number, number, number]): INgAnnotationTypes[keyof INgAnnotationTypes][]
 
   constructor(
-    protected annotationEv$: Observable<TAnnotationEvent<keyof IAnnotationEvents>>
+    protected annotationEv$: Observable<TAnnotationEvent<keyof IAnnotationEvents>>,
+    protected callback?: TCallbackFunction
   ){
 
   }
@@ -124,9 +125,9 @@ export abstract class AbsToolClass {
    * otherwise, pairwise confuses last drag event and first drag event
    */
   protected dragHoveredAnnotationsDelta$: Observable<{
-    ann: TAnnotationEvent<"hoverAnnotation">,
-    deltaX: number,
-    deltaY: number,
+    ann: TAnnotationEvent<"hoverAnnotation">
+    deltaX: number
+    deltaY: number
     deltaZ: number
   }> = merge(
     of(null),
@@ -154,6 +155,15 @@ export abstract class AbsToolClass {
 
 export type TToolType = 'translation' | 'drawing' | 'deletion'
 
+export type TCallback = {
+  paintingEnd: {
+    callArg: {}
+    returns: void
+  }
+}
+
+export type TCallbackFunction = <T extends keyof TCallback>(arg: TCallback[T]['callArg'] & { type: T }) => TCallback[T] | void
+
 export type TBaseAnnotationGeomtrySpec = {
   id?: string
   space?: {