Merge pull request #12 from gravity-ui/add_id_field_to_tconnection

feat(TConnection): add id field

docs/public_api.md

@@ -27,11 +27,11 @@ List of methods in your disposition:
 
   public addBlock(geometry: TGeometry, name: string: void): TBlockId;
 
-  public addConnection(connection: TConnection): string
+  public addConnection(connection: TConnection): TConnectionId
 
-  public updateConnection(id: string, connection: TConnection): void;
+  public updateConnection(id: TConnectionId, connection: TConnection): void;
 
-  public selectConnections(connectionIds: string[], selected: boolean): void;
+  public selectConnections(connectionIds: TConnectionId[], selected: boolean): void;
 ```
 
 ## API-Example. Entities set/update

src/api/PublicGraphApi.ts

@@ -2,7 +2,7 @@ import { batch } from "@preact/signals-core";
 import { Graph } from "../graph";
 import { TGraphColors, TGraphConstants } from "../graphConfig";
 import { TBlockId } from "../store/block/Block";
-import { TConnection } from "../store/connection/ConnectionState";
+import { TConnection, TConnectionId } from "../store/connection/ConnectionState";
 import { selectBlockById } from "../store/block/selectors";
 import { TGraphSettingsConfig } from "../store/settings";
 import { getUsableRectByBlockIds, startAnimation } from "../utils/functions";
@@ -122,7 +122,7 @@ export class PublicGraphApi {
   }
 
   public selectConnections(
-    connectionIds: string[],
+    connectionIds: TConnectionId[],
     selected: boolean,
     strategy: ESelectionStrategy = ESelectionStrategy.REPLACE
   ) {
@@ -131,7 +131,7 @@ export class PublicGraphApi {
     });
   }
 
-  public updateConnection(id: string, connection: Partial<TConnection>) {
+  public updateConnection(id: TConnectionId, connection: Partial<TConnection>) {
     const connectionStore = selectConnectionById(this.graph, id);
     connectionStore.updateConnection(connection);
   }

src/components/canvas/connections/BlockConnection.ts

@@ -1,6 +1,6 @@
 import intersects from "intersects";
 import { GraphLayer, TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
-import { ConnectionState, TConnection } from "../../../store/connection/ConnectionState";
+import { ConnectionState, TConnection, TConnectionId } from "../../../store/connection/ConnectionState";
 import { selectConnectionById } from "../../../store/connection/selectors";
 import { withHitTest } from "../../../mixins/withHitTest";
 import { EventedComponent } from "../../../mixins/withEvents";
@@ -18,7 +18,7 @@ import { TAnchor } from "../anchors";
 import { ESelectionStrategy } from "../../../utils/types/types";
 
 export type TConnectionProps = {
-  id: string;
+  id: TConnectionId;
   addInRenderOrder(cmp, setting: object): void;
   removeFromRenderOrder(cmp): void;
   useBezier: boolean;

src/components/canvas/connections/BlockConnections.ts

@@ -59,7 +59,7 @@ export class BlockConnections extends withBatchedConnections(Component) {
         showConnectionLabels: settings.showConnectionLabels,
         showConnectionArrows: settings.showConnectionArrows,
       };
-      return BlockConnection.create(props, { key: connection.id });
+      return BlockConnection.create(props, { key: String(connection.id) });
     });
   }
 }

src/index.ts

@@ -9,7 +9,7 @@ export * from "./services/Layer";
 export * from "./store";
 export { EAnchorType } from "./store/anchor/Anchor";
 export type { BlockState, TBlockId } from "./store/block/Block";
-export type { ConnectionState, TConnection } from "./store/connection/ConnectionState";
+export type { ConnectionState, TConnection, TConnectionId } from "./store/connection/ConnectionState";
 export { ECanChangeBlockGeometry } from "./store/settings";
 export * from "./utils/renderers/text";
 export { EVENTS } from "./utils/types/events";

src/store/connection/ConnectionList.ts

@@ -1,5 +1,5 @@
 import { signal, computed, batch } from "@preact/signals-core";
-import { ConnectionState, TConnection } from "./ConnectionState";
+import { ConnectionState, TConnection, TConnectionId } from "./ConnectionState";
 import { RootStore } from "../index";
 import { TBlockId } from "../block/Block";
 import { Graph } from "../../graph";
@@ -80,7 +80,7 @@ export class ConnectionsStore {
     return new ConnectionState(this, connections);
   }
 
-  public addConnection(connection: TConnection): string {
+  public addConnection(connection: TConnection): TConnectionId {
     const newConnection = new ConnectionState(this, connection);
     this.$connectionsMap.value.set(newConnection.id, newConnection);
     this.notifyConnectionMapChanged();
@@ -108,7 +108,7 @@ export class ConnectionsStore {
   }
 
   protected computeSelectionChange(
-    ids: string[],
+    ids: TConnectionId[],
     selected: boolean,
     strategy: ESelectionStrategy = ESelectionStrategy.REPLACE
   ) {
@@ -152,7 +152,7 @@ export class ConnectionsStore {
   }
 
   public setConnectionsSelection(
-    ids: string[],
+    ids: TConnectionId[],
     selected: boolean,
     strategy: ESelectionStrategy = ESelectionStrategy.REPLACE
   ) {

src/store/connection/ConnectionState.ts

@@ -6,7 +6,10 @@ import { ESelectionStrategy } from "../../utils/types/types";
 
 export const IS_CONNECTION_TYPE = "Connection" as const;
 
+export type TConnectionId = string | number | symbol;
+
 export type TConnection = {
+  id?: TConnectionId;
   sourceBlockId: TBlockId;
   targetBlockId: TBlockId;
   sourceAnchorId?: string;
@@ -22,7 +25,9 @@ export type TConnection = {
 export class ConnectionState {
   public $state = signal<TConnection>(undefined);
 
-  public id: string;
+  public get id() {
+    return this.$state.value.id;
+  }
 
   public get sourceBlockId() {
     return this.$state.value.sourceBlockId;
@@ -49,6 +54,7 @@ export class ConnectionState {
   });
 
   public static getConnectionId(connection: TConnection) {
+    if (connection.id) return connection.id;
     if (connection.sourceAnchorId && connection.targetAnchorId) {
       return [connection.sourceAnchorId, connection.targetAnchorId].join(":");
     }
@@ -59,8 +65,8 @@ export class ConnectionState {
     public store: ConnectionsStore,
     connectionState: TConnection
   ) {
-    this.$state.value = connectionState;
-    this.id = ConnectionState.getConnectionId(connectionState);
+    const id = ConnectionState.getConnectionId(connectionState);
+    this.$state.value = {...connectionState, id};
   }
 
   public isSelected() {

src/store/connection/selectors.ts

@@ -1,8 +1,8 @@
 import { TBlockId } from "../block/Block";
-import { ConnectionState } from "./ConnectionState";
+import { ConnectionState, TConnectionId } from "./ConnectionState";
 import { Graph } from "../../graph";
 
-export function selectConnectionById(graph: Graph, id: string) {
+export function selectConnectionById(graph: Graph, id: TConnectionId) {
   return graph.rootStore.connectionsList.$connectionsMap.value.get(id);
 }