refactor(demo): simulate db click event and prevent default action fo…

…r pointerUp in graph-viz demo (#955)

src/app/components/debug/point-display.component.ts

@@ -0,0 +1,37 @@
+import { Component, ElementRef, inject, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import {
+    PlaitBoard,
+    toViewBoxPoint,
+    toHostPoint
+} from '@plait/core';
+@Component({
+    selector: 'debug-point-display',
+    template:``,
+    standalone: true,
+    imports: [],
+    host: {
+        'style': 'position: absolute;top:0;left:0;'
+    }
+})
+export class DebugPointDisplayComponent implements OnInit, OnChanges {
+    @Input()
+    board?: PlaitBoard;
+
+    elementRef: ElementRef<HTMLElement> = inject(ElementRef<HTMLElement>);
+
+    constructor() {}
+
+    ngOnInit(): void {}
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['board'] && this.board) {
+            const board = this.board as PlaitBoard;
+            const { pointerMove } = board;
+            board.pointerMove = e => {
+                pointerMove(e);
+                const point = toViewBoxPoint(board, toHostPoint(board, e.x, e.y));
+                this.elementRef.nativeElement.innerHTML = `${point[0]},${point[1]}`;
+            }
+        }
+    }
+}

src/app/graph-viz/graph-viz.component.html

@@ -1,4 +1,14 @@
-<plait-board [plaitPlugins]="plugins" [plaitValue]="value" [plaitViewport]="viewport" [plaitTheme]="theme"
-    [plaitOptions]="options" >
+<plait-board
+    [plaitPlugins]="plugins"
+    [plaitValue]="value"
+    [plaitViewport]="viewport"
+    [plaitTheme]="theme"
+    [plaitOptions]="options"
+    (onChange)="onChange($event)"
+    (plaitBoardInitialized)="afterBoardInitialized($event)"
+>
     <app-zoom-toolbar></app-zoom-toolbar>
 </plait-board>
+<!-- @if (board) {
+    <debug-point-display [board]="board"></debug-point-display>
+} -->

src/app/graph-viz/graph-viz.component.ts

@@ -1,7 +1,23 @@
 import { Component, HostBinding, OnInit } from '@angular/core';
-import { PlaitBoard, PlaitBoardOptions, PlaitTheme, Viewport, PlaitPlugin } from '@plait/core';
+import {
+    PlaitBoard,
+    PlaitBoardOptions,
+    PlaitTheme,
+    Viewport,
+    PlaitPlugin,
+    PlaitOperation,
+    BoardTransforms,
+    getSelectedElements,
+    toViewBoxPoint,
+    toHostPoint,
+    getHitElementsByPoint,
+    temporaryDisableSelection,
+    PlaitOptionsBoard,
+    PlaitPluginKey,
+    WithSelectionPluginOptions
+} from '@plait/core';
 import { mockForceAtlasData } from './mock-force-atlas';
-import { ForceAtlasElement, withForceAtlas } from '@plait/graph-viz';
+import { ForceAtlasElement, ForceAtlasNodeElement, withForceAtlas } from '@plait/graph-viz';
 import { AppSettingPanelComponent } from '../components/setting-panel/setting-panel.component';
 import { AppMainToolbarComponent } from '../components/main-toolbar/main-toolbar.component';
 import { AppZoomToolbarComponent } from '../components/zoom-toolbar/zoom-toolbar.component';
@@ -10,8 +26,9 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { withCommonPlugin } from '../plugins/with-common';
 import { AppMenuComponent } from '../components/menu/menu.component';
 import { NgIf } from '@angular/common';
-import { PlaitBoardComponent } from '@plait/angular-board';
+import { OnChangeData, PlaitBoardComponent } from '@plait/angular-board';
 import { withForceAtlasExtend } from './with-force-atlas-extend';
+import { DebugPointDisplayComponent } from '../components/debug/point-display.component';
 
 @Component({
     selector: 'app-basic-graph-viz',
@@ -24,6 +41,7 @@ import { withForceAtlasExtend } from './with-force-atlas-extend';
         AppMainToolbarComponent,
         AppSettingPanelComponent,
         AppMenuComponent,
+        DebugPointDisplayComponent,
         NgIf
     ]
 })
@@ -46,6 +64,10 @@ export class BasicGraphVizComponent implements OnInit {
 
     board!: PlaitBoard;
 
+    hasViewportMoved = false;
+
+    currentNodeId: null | string = null;
+
     constructor(private activeRoute: ActivatedRoute) {}
 
     ngOnInit(): void {
@@ -61,4 +83,72 @@ export class BasicGraphVizComponent implements OnInit {
             }
         });
     }
+
+    onChange(event: OnChangeData) {
+        const selectedElements = getSelectedElements(this.board);
+        const selectedElement = selectedElements[0];
+        const isSetViewport = event.operations.length && event.operations.every(op => PlaitOperation.isSetViewportOperation(op));
+        if (isSetViewport) {
+            this.hasViewportMoved = true;
+        }
+        if (selectedElement) {
+            this.currentNodeId = selectedElement.id;
+        }
+    }
+
+    afterBoardInitialized(board: PlaitBoard) {
+        this.board = board;
+        const { pointerUp } = board;
+
+        let timeoutId: any = null;
+        let clickCount: number = 0;
+
+        // simulate db click event and prevent pointerUp event when trigger db click
+        board.pointerUp = e => {
+            console.log('anyway up');
+            // prevent set_selection in pointerUp when viewport is moving
+            if (PlaitBoard.getBoardContainer(board).classList.contains('viewport-moving')) {
+                return;
+            }
+            clickCount = clickCount + 1;
+            if (clickCount >= 2) {
+                console.log('trigger db click');
+                const targetNodeElement = getHitForceAtlasNode(board, e);
+                if (targetNodeElement) {
+                    console.log(`hit target: ${targetNodeElement.label}`);
+                }
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+                clickCount = 0;
+                return;
+            }
+            timeoutId = setTimeout(() => {
+                clickCount = 0;
+                const targetNodeElement = getHitForceAtlasNode(board, e);
+                if (targetNodeElement) {
+                    if (this.hasViewportMoved || (!this.hasViewportMoved && this.currentNodeId !== targetNodeElement.id)) {
+                        console.log('move to center');
+                        BoardTransforms.moveToCenter(this.board, targetNodeElement.points![0]);
+                        // to wait moving completing and mark viewport as unmoved
+                        setTimeout(() => {
+                            this.hasViewportMoved = false;
+                        }, 0);
+                    }
+                }
+                timeoutId = null;
+                console.log('trigger up');
+                pointerUp(e);
+            }, 250);
+        };
+    }
 }
+
+export const getHitForceAtlasNode = (board: PlaitBoard, e: PointerEvent) => {
+    const point = toViewBoxPoint(board, toHostPoint(board, e.x, e.y));
+    const hitElements = getHitElementsByPoint(board, point);
+    if (hitElements.length > 0 && ForceAtlasElement.isForceAtlasNodeElement(hitElements[0])) {
+        return hitElements[0];
+    }
+    return null;
+};