fixed isses from AI

Author: Pavel Klimov

src/components/canvas/blocks/controllers/BlockController.ts

@@ -14,35 +14,6 @@ import { EVENTS } from "../../../../utils/types/events";
 import { ESelectionStrategy } from "../../../../utils/types/types";
 import { Block } from "../Block";
 
-const handlePointerDownEvent = (event: PointerEvent, block: Block, self: any) => {
-  const blockState = selectBlockById(block.context.graph, block.props.id);
-  const allowChangeBlockGeometry = isAllowChangeBlockGeometry(
-    block.getConfigFlag("canChangeBlockGeometry") as ECanChangeBlockGeometry,
-    blockState.selected
-  );
-
-  if (!allowChangeBlockGeometry) return;
-
-  event.stopPropagation();
-
-  const blocksListState = self.context.graph.rootStore.blocksList;
-  const selectedBlocksStates = getSelectedBlocks(blockState, blocksListState);
-  const selectedBlocksComponents = selectedBlocksStates.map((block) => block.getViewComponent());
-
-  dragListener(block.context.ownerDocument)
-    .on(EVENTS.DRAG_START, (_event: PointerEvent) => {
-      block.context.graph.getGraphLayer().captureEvents(self);
-      dispatchEvents(selectedBlocksComponents, createCustomDragEvent(EVENTS.DRAG_START, _event));
-    })
-    .on(EVENTS.DRAG_UPDATE, (_event: PointerEvent) => {
-      dispatchEvents(selectedBlocksComponents, createCustomDragEvent(EVENTS.DRAG_UPDATE, _event));
-    })
-    .on(EVENTS.DRAG_END, (_event: PointerEvent) => {
-      block.context.graph.getGraphLayer().releaseCapture();
-      dispatchEvents(selectedBlocksComponents, createCustomDragEvent(EVENTS.DRAG_END, _event));
-    });
-};
-
 export class BlockController {
   private block: Block;
 
@@ -74,7 +45,32 @@ export class BlockController {
       },
 
       pointerdown(event: PointerEvent) {
-        handlePointerDownEvent(event, block, this);
+        const blockState = selectBlockById(block.context.graph, block.props.id);
+        const allowChangeBlockGeometry = isAllowChangeBlockGeometry(
+          block.getConfigFlag("canChangeBlockGeometry") as ECanChangeBlockGeometry,
+          blockState.selected
+        );
+
+        if (!allowChangeBlockGeometry) return;
+
+        event.stopPropagation();
+
+        const blocksListState = this.context.graph.rootStore.blocksList;
+        const selectedBlocksStates = getSelectedBlocks(blockState, blocksListState);
+        const selectedBlocksComponents = selectedBlocksStates.map((block) => block.getViewComponent());
+
+        dragListener(block.context.ownerDocument)
+          .on(EVENTS.DRAG_START, (_event: PointerEvent) => {
+            block.context.graph.getGraphLayer().captureEvents(this);
+            dispatchEvents(selectedBlocksComponents, createCustomDragEvent(EVENTS.DRAG_START, _event));
+          })
+          .on(EVENTS.DRAG_UPDATE, (_event: PointerEvent) => {
+            dispatchEvents(selectedBlocksComponents, createCustomDragEvent(EVENTS.DRAG_UPDATE, _event));
+          })
+          .on(EVENTS.DRAG_END, (_event: PointerEvent) => {
+            block.context.graph.getGraphLayer().releaseCapture();
+            dispatchEvents(selectedBlocksComponents, createCustomDragEvent(EVENTS.DRAG_END, _event));
+          });
       },
     });
   }

src/components/canvas/layers/graphLayer/GraphLayer.ts

@@ -7,6 +7,7 @@ import { ICamera } from "../../../../services/camera/CameraService";
 import { getEventDelta } from "../../../../utils/functions";
 import { EventedComponent } from "../../EventedComponent/EventedComponent";
 import { Blocks } from "../../blocks/Blocks";
+import { BlockConnection } from "../../connections";
 import { BlockConnections } from "../../connections/BlockConnections";
 
 import { DrawBelow, DrawOver } from "./helpers";
@@ -24,15 +25,8 @@ export type TGraphLayerContext = LayerContext & {
   graph: Graph;
 };
 
-const rootBubblingEventTypes = new Set([
-  "pointerdown",
-  "pointerenter",
-  "pointermove",
-  "click",
-  "dblclick",
-  "contextmenu",
-]);
-const rootCapturingEventTypes = new Set(["pointerdown", "pointerenter", "pointermove"]);
+const rootBubblingEventTypes = new Set(["pointerdown", "pointerup", "click", "dblclick", "contextmenu"]);
+const rootCapturingEventTypes = new Set(["pointerdown", "pointerup"]);
 
 export type GraphPointerEvent = CustomEvent<{
   target: EventedComponent;
@@ -49,6 +43,8 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
 
   private prevTargetComponent: EventedComponent;
 
+  private canEmulateClick?: boolean;
+
   private pointerStartTarget?: EventedComponent;
 
   private pointerStartEvent?: PointerEvent;
@@ -303,10 +299,23 @@ export class GraphLayer extends Layer<TGraphLayerProps, TGraphLayerContext> {
 
   private tryEmulateClick(event: PointerEvent, target = this.targetComponent) {
     if (event.type === "pointerdown" && target !== undefined) {
+      this.canEmulateClick = false;
       this.pointerStartTarget = target;
       this.pointerStartEvent = event;
     }
 
+    if (
+      event.type === "pointerup" &&
+      (this.pointerStartTarget === target ||
+        // connections can be very close to each other
+        (this.pointerStartTarget instanceof BlockConnection && target instanceof BlockConnection)) &&
+      // pointerStartEvent can be undefined if mousedown/touchstart event happened over dialog backdrop
+      this.pointerStartEvent &&
+      getEventDelta(this.pointerStartEvent, event) < 3
+    ) {
+      this.canEmulateClick = true;
+    }
+
     if (
       this.pointerStartEvent &&
       getEventDelta(this.pointerStartEvent, event) < 3 &&