@tldiagram/core-ui 1.92.0 → 1.94.0

package/src/store/useStore.test.ts

@@ -0,0 +1,285 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import type { Connector, LibraryElement, PlacedElement, ViewTreeNode } from '../types'
+import {
+  buildViewContentLinks,
+  buildElementLibraryItems,
+  canvasSelectors,
+  emptyViewEditorUiState,
+  findViewByOwner,
+  findViewPath,
+  mergeSavedElementIntoPlacements,
+  removeConnectorFromList,
+  removePlacedElement,
+  selectConnectorById,
+  selectElementById,
+  selectExistingElementIds,
+  updatePlacedElementPosition,
+  upsertConnectorInList,
+  useStore,
+} from './useStore'
+
+const tree: ViewTreeNode[] = [{
+  id: 1,
+  owner_element_id: null,
+  name: 'Root',
+  description: null,
+  level_label: null,
+  level: 0,
+  depth: 0,
+  created_at: '2024-01-01',
+  updated_at: '2024-01-01',
+  parent_view_id: null,
+  children: [{
+    id: 2,
+    owner_element_id: 10,
+    name: 'Child',
+    description: null,
+    level_label: null,
+    level: 1,
+    depth: 1,
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+    parent_view_id: 1,
+    children: [],
+  }],
+}]
+
+const element = (element_id: number, x = 0, y = 0): PlacedElement => ({
+  id: element_id + 100,
+  view_id: 1,
+  element_id,
+  position_x: x,
+  position_y: y,
+  name: `Element ${element_id}`,
+  description: null,
+  kind: null,
+  technology: null,
+  url: null,
+  logo_url: null,
+  technology_connectors: [],
+  tags: [],
+  has_view: false,
+  view_label: null,
+})
+
+const connector = (id: number): Connector => ({
+  id,
+  view_id: 1,
+  source_element_id: 10,
+  target_element_id: 20,
+  label: null,
+  description: null,
+  relationship: null,
+  direction: 'forward',
+  style: 'bezier',
+  url: null,
+  source_handle: 'right',
+  target_handle: 'left',
+  created_at: '2024-01-01',
+  updated_at: '2024-01-01',
+})
+
+const libraryElement = (id: number): LibraryElement => ({
+  id,
+  name: 'Saved',
+  kind: 'service',
+  description: 'Updated',
+  technology: 'TypeScript',
+  url: 'https://example.com',
+  logo_url: 'logo.svg',
+  technology_connectors: [{ type: 'custom', label: 'TS' }],
+  tags: ['api'],
+  repo: 'repo',
+  branch: 'main',
+  file_path: 'src/index.ts',
+  language: 'ts',
+  created_at: '2024-01-01',
+  updated_at: '2024-01-02',
+  has_view: true,
+  view_label: 'View',
+})
+
+beforeEach(() => {
+  useStore.setState({
+    ...emptyViewEditorUiState,
+    view: undefined,
+    viewElements: [],
+    connectors: [],
+    nodes: [],
+    edges: [],
+    linksMap: {},
+    parentLinksMap: {},
+    incomingLinks: [],
+    treeData: [],
+    allElements: [],
+    libraryRefresh: 0,
+  })
+})
+
+describe('pure view helpers', () => {
+  it('finds views by owner and path', () => {
+    expect(findViewByOwner(tree, 10)?.id).toBe(2)
+    expect(findViewByOwner(tree, 999)).toBeNull()
+    expect(findViewPath(tree, 2)?.map((view) => view.id)).toEqual([1, 2])
+    expect(findViewPath(tree, 999)).toBeNull()
+  })
+
+  it('builds child, parent, and incoming links for a view', () => {
+    const result = buildViewContentLinks(tree, 1, [element(10), element(20)])
+    expect(result.linksMap[10][0]).toMatchObject({ to_view_id: 2, relation_type: 'child' })
+    expect(result.parentLinksMap).toEqual({})
+    expect(result.incomingLinks).toEqual([])
+
+    const childResult = buildViewContentLinks(tree, 2, [element(20)])
+    expect(childResult.parentLinksMap[20][0]).toMatchObject({ from_view_id: 1, relation_type: 'parent' })
+    expect(childResult.incomingLinks[0]).toMatchObject({ element_id: 10, from_view_id: 1, to_view_id: 2 })
+  })
+
+  it('updates placement positions structurally', () => {
+    const elements = [element(10, 1, 2), element(20, 3, 4)]
+    expect(updatePlacedElementPosition(elements, 10, 1, 2)).toBe(elements)
+    const next = updatePlacedElementPosition(elements, 10, 9, 8)
+    expect(next).not.toBe(elements)
+    expect(next[0]).toMatchObject({ position_x: 9, position_y: 8 })
+    expect(next[1]).toBe(elements[1])
+  })
+
+  it('removes placements and merges saved element fields', () => {
+    const elements = [element(10), element(20)]
+    expect(removePlacedElement(elements, 10).map((item) => item.element_id)).toEqual([20])
+    const merged = mergeSavedElementIntoPlacements(elements, libraryElement(10))
+    expect(merged[0]).toMatchObject({ name: 'Saved', kind: 'service', repo: 'repo', tags: ['api'] })
+    expect(merged[1]).toBe(elements[1])
+  })
+
+  it('keeps library items available after removing their canvas placement', () => {
+    const onCanvas = element(10)
+    const libraryItems = buildElementLibraryItems([libraryElement(10), libraryElement(20)], [onCanvas])
+
+    expect(libraryItems.map((item) => item.id)).toEqual([10, 20])
+    expect(libraryItems[0]).toMatchObject({ id: 10, name: onCanvas.name, created_at: '2024-01-01' })
+
+    const afterRemoval = buildElementLibraryItems([libraryElement(10), libraryElement(20)], removePlacedElement([onCanvas], 10))
+    expect(afterRemoval.map((item) => item.id)).toEqual([10, 20])
+    expect(afterRemoval[0]).toMatchObject({ id: 10, name: 'Saved' })
+  })
+
+  it('upserts and removes connectors', () => {
+    const first = connector(1)
+    const second = { ...connector(2), label: 'two' }
+    expect(upsertConnectorInList([], first)).toEqual([first])
+    expect(upsertConnectorInList([first], { ...first, label: 'updated' })[0].label).toBe('updated')
+    expect(upsertConnectorInList([first], second)).toEqual([first, second])
+    expect(removeConnectorFromList([first, second], 1)).toEqual([second])
+  })
+
+  it('selects existing element ids and entities by id', () => {
+    const state = { viewElements: [element(10), element(20)], connectors: [connector(1)] }
+    expect(Array.from(selectExistingElementIds(state))).toEqual([10, 20])
+    expect(selectElementById(state, 20)?.name).toBe('Element 20')
+    expect(selectConnectorById(state, 1)?.source_element_id).toBe(10)
+    expect(canvasSelectors.existingElementIds(state).has(10)).toBe(true)
+    expect(canvasSelectors.elementById(state, 10)?.id).toBe(110)
+    expect(canvasSelectors.connectorById(state, 1)?.id).toBe(1)
+  })
+})
+
+describe('zustand canvas store', () => {
+  it('updates every scalar ui action', () => {
+    const selectedElement = libraryElement(10)
+    const selectedConnector = connector(1)
+    useStore.getState().setViewEditorUi({ viewId: 1, canEdit: true, isOwner: true, isFreePlan: true })
+    useStore.getState().setSnapToGrid(false)
+    useStore.getState().setSelectedElement(selectedElement)
+    useStore.getState().setSelectedConnector(selectedConnector)
+
+    expect(useStore.getState()).toMatchObject({
+      viewId: 1,
+      canEdit: true,
+      isOwner: true,
+      isFreePlan: true,
+      snapToGrid: false,
+      selectedElement,
+      selectedConnector,
+    })
+  })
+
+  it('sets every core collection with values and updater functions', () => {
+    useStore.getState().setView(tree[0])
+    useStore.getState().setViewElements([element(10)])
+    useStore.getState().setViewElements((previous) => [...previous, element(20)])
+    useStore.getState().setConnectors([connector(1)])
+    useStore.getState().setConnectors((previous) => [...previous, connector(2)])
+    useStore.getState().setNodes([{ id: '10', position: { x: 0, y: 0 }, data: {} }])
+    useStore.getState().setNodes((previous) => [...previous, { id: '20', position: { x: 1, y: 1 }, data: {} }])
+    useStore.getState().setEdges([{ id: '1', source: '10', target: '20' }])
+    useStore.getState().setEdges((previous) => [...previous, { id: '2', source: '20', target: '10' }])
+    useStore.getState().setLinksMap({ 10: [] })
+    useStore.getState().setLinksMap((previous) => ({ ...previous, 20: [] }))
+    useStore.getState().setParentLinksMap({ 10: [] })
+    useStore.getState().setParentLinksMap((previous) => ({ ...previous, 20: [] }))
+    useStore.getState().setIncomingLinks([{ id: 1, element_id: 10, element_name: 'E', from_view_id: 1, from_view_name: 'Root', to_view_id: 2 }])
+    useStore.getState().setTreeData(tree)
+    useStore.getState().setAllElements([libraryElement(10)])
+    useStore.getState().setLibraryRefresh((previous) => previous + 1)
+
+    const state = useStore.getState()
+    expect(state.view?.id).toBe(1)
+    expect(state.viewElements).toHaveLength(2)
+    expect(state.connectors).toHaveLength(2)
+    expect(state.nodes).toHaveLength(2)
+    expect(state.edges).toHaveLength(2)
+    expect(Object.keys(state.linksMap)).toEqual(['10', '20'])
+    expect(Object.keys(state.parentLinksMap)).toEqual(['10', '20'])
+    expect(state.incomingLinks).toHaveLength(1)
+    expect(state.treeData).toBe(tree)
+    expect(state.allElements).toHaveLength(1)
+    expect(state.libraryRefresh).toBe(1)
+  })
+
+  it('hydrates and resets canvas data', () => {
+    const links = buildViewContentLinks(tree, 1, [element(10)])
+    useStore.getState().setNodes([{ id: 'stale', position: { x: 0, y: 0 }, data: {} }])
+    useStore.getState().setEdges([{ id: 'stale', source: '1', target: '2' }])
+    useStore.getState().hydrateViewContent({
+      view: tree[0],
+      viewElements: [element(10)],
+      connectors: [connector(1)],
+      treeData: tree,
+      ...links,
+    })
+    expect(useStore.getState()).toMatchObject({
+      view: tree[0],
+      viewElements: [element(10)],
+      connectors: [connector(1)],
+      treeData: tree,
+    })
+    useStore.getState().resetCanvas()
+    expect(useStore.getState().nodes).toEqual([])
+    expect(useStore.getState().edges).toEqual([])
+  })
+
+  it('runs placement, connector, and deletion actions', () => {
+    useStore.getState().setViewElements([element(10), element(20)])
+    useStore.getState().setConnectors([connector(1)])
+    useStore.getState().updateElementPosition(10, 50, 60)
+    expect(useStore.getState().viewElements[0]).toMatchObject({ position_x: 50, position_y: 60 })
+
+    useStore.getState().removeElementPlacement(10)
+    expect(useStore.getState().viewElements.map((item) => item.element_id)).toEqual([20])
+
+    useStore.getState().setViewElements([element(10)])
+    useStore.getState().mergeSavedElement(libraryElement(10))
+    expect(useStore.getState().viewElements[0].name).toBe('Saved')
+    expect(useStore.getState().libraryRefresh).toBe(1)
+
+    useStore.getState().removeElementEverywhere(10)
+    expect(useStore.getState().viewElements).toEqual([])
+    expect(useStore.getState().libraryRefresh).toBe(2)
+
+    useStore.getState().upsertConnector(connector(2))
+    useStore.getState().replaceConnector({ ...connector(2), label: 'updated' })
+    useStore.getState().removeConnector(1)
+    expect(useStore.getState().connectors).toEqual([{ ...connector(2), label: 'updated' }])
+  })
+})

package/src/store/useStore.ts

@@ -0,0 +1,327 @@
+import { create } from 'zustand'
+import type { Edge as RFEdge, Node as RFNode } from 'reactflow'
+import type {
+  Connector,
+  IncomingViewConnector,
+  LibraryElement,
+  PlacedElement,
+  ViewConnector,
+  ViewTreeNode,
+} from '../types'
+
+export type StoreSetter<T> = T | ((previous: T) => T)
+
+export type ViewEditorUiState = {
+  viewId: number | null
+  canEdit: boolean
+  isOwner: boolean
+  isFreePlan: boolean
+  snapToGrid: boolean
+  selectedElement: LibraryElement | null
+  selectedConnector: Connector | null
+}
+
+export type ViewContentLinks = {
+  linksMap: Record<number, ViewConnector[]>
+  parentLinksMap: Record<number, ViewConnector[]>
+  incomingLinks: IncomingViewConnector[]
+}
+
+export type ViewContentPayload = ViewContentLinks & {
+  view: ViewTreeNode | null
+  viewElements: PlacedElement[]
+  connectors: Connector[]
+  treeData: ViewTreeNode[]
+}
+
+export type CanvasStoreState = ViewEditorUiState & {
+  view: ViewTreeNode | null | undefined
+  viewElements: PlacedElement[]
+  connectors: Connector[]
+  nodes: RFNode[]
+  edges: RFEdge[]
+  linksMap: Record<number, ViewConnector[]>
+  parentLinksMap: Record<number, ViewConnector[]>
+  incomingLinks: IncomingViewConnector[]
+  treeData: ViewTreeNode[]
+  allElements: LibraryElement[]
+  libraryRefresh: number
+
+  setViewEditorUi: (patch: Partial<ViewEditorUiState>) => void
+  setSnapToGrid: (snapToGrid: boolean) => void
+  setSelectedElement: (selectedElement: LibraryElement | null) => void
+  setSelectedConnector: (selectedConnector: Connector | null) => void
+  setView: (view: ViewTreeNode | null | undefined) => void
+  setViewElements: (next: StoreSetter<PlacedElement[]>) => void
+  setConnectors: (next: StoreSetter<Connector[]>) => void
+  setNodes: (next: StoreSetter<RFNode[]>) => void
+  setEdges: (next: StoreSetter<RFEdge[]>) => void
+  setLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void
+  setParentLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void
+  setIncomingLinks: (next: StoreSetter<IncomingViewConnector[]>) => void
+  setTreeData: (next: StoreSetter<ViewTreeNode[]>) => void
+  setAllElements: (next: StoreSetter<LibraryElement[]>) => void
+  setLibraryRefresh: (next: StoreSetter<number>) => void
+  resetCanvas: () => void
+  hydrateViewContent: (payload: ViewContentPayload) => void
+  updateElementPosition: (elementId: number, x: number, y: number) => void
+  removeElementPlacement: (elementId: number) => void
+  removeElementEverywhere: (elementId: number) => void
+  mergeSavedElement: (saved: LibraryElement) => void
+  upsertConnector: (connector: Connector) => void
+  replaceConnector: (connector: Connector) => void
+  removeConnector: (connectorId: number) => void
+}
+
+export const emptyViewEditorUiState: ViewEditorUiState = {
+  viewId: null,
+  canEdit: false,
+  isOwner: false,
+  isFreePlan: false,
+  snapToGrid: false,
+  selectedElement: null,
+  selectedConnector: null,
+}
+
+function resolveSetter<T>(next: StoreSetter<T>, previous: T): T {
+  return typeof next === 'function' ? (next as (previous: T) => T)(previous) : next
+}
+
+export function findViewByOwner(nodes: ViewTreeNode[], elementId: number): ViewTreeNode | null {
+  for (const node of nodes) {
+    if (node.owner_element_id !== null && Number(node.owner_element_id) === Number(elementId)) return node
+    const found = findViewByOwner(node.children, elementId)
+    if (found) return found
+  }
+  return null
+}
+
+export function findViewPath(nodes: ViewTreeNode[], targetId: number, path: ViewTreeNode[] = []): ViewTreeNode[] | null {
+  for (const node of nodes) {
+    if (node.id === targetId) return [...path, node]
+    const found = findViewPath(node.children, targetId, [...path, node])
+    if (found) return found
+  }
+  return null
+}
+
+export function buildViewContentLinks(tree: ViewTreeNode[], viewId: number, viewElements: PlacedElement[]): ViewContentLinks {
+  const linksMap: Record<number, ViewConnector[]> = {}
+  const parentLinksMap: Record<number, ViewConnector[]> = {}
+
+  const viewPath = findViewPath(tree, viewId)
+  const parentView = viewPath && viewPath.length > 1 ? viewPath[viewPath.length - 2] : null
+  const currentViewInTree = viewPath ? viewPath[viewPath.length - 1] : null
+
+  const incomingLinks: IncomingViewConnector[] = []
+  if (parentView && currentViewInTree?.owner_element_id) {
+    incomingLinks.push({
+      id: 0,
+      element_id: currentViewInTree.owner_element_id,
+      element_name: 'Parent',
+      from_view_id: parentView.id,
+      from_view_name: parentView.name,
+      to_view_id: viewId,
+    })
+  }
+
+  for (const element of viewElements) {
+    const childView = findViewByOwner(tree, element.element_id)
+    if (childView) {
+      linksMap[element.element_id] = [{
+        id: 0,
+        element_id: element.element_id,
+        from_view_id: viewId,
+        to_view_id: childView.id,
+        to_view_name: childView.name,
+        relation_type: 'child',
+      }]
+    }
+
+    if (parentView) {
+      parentLinksMap[element.element_id] = [{
+        id: 0,
+        element_id: element.element_id,
+        from_view_id: parentView.id,
+        to_view_id: parentView.id,
+        to_view_name: parentView.name,
+        relation_type: 'parent',
+      }]
+    }
+  }
+
+  return { linksMap, parentLinksMap, incomingLinks }
+}
+
+export function selectExistingElementIds(state: Pick<CanvasStoreState, 'viewElements'>): Set<number> {
+  return new Set(state.viewElements.map((element) => element.element_id))
+}
+
+export function selectElementById(state: Pick<CanvasStoreState, 'viewElements'>, elementId: number): PlacedElement | undefined {
+  return state.viewElements.find((element) => element.element_id === elementId)
+}
+
+export function selectConnectorById(state: Pick<CanvasStoreState, 'connectors'>, connectorId: number): Connector | undefined {
+  return state.connectors.find((connector) => connector.id === connectorId)
+}
+
+export function updatePlacedElementPosition(elements: PlacedElement[], elementId: number, x: number, y: number): PlacedElement[] {
+  let changed = false
+  const next = elements.map((element) => {
+    if (element.element_id !== elementId) return element
+    if (element.position_x === x && element.position_y === y) return element
+    changed = true
+    return { ...element, position_x: x, position_y: y }
+  })
+  return changed ? next : elements
+}
+
+export function removePlacedElement(elements: PlacedElement[], elementId: number): PlacedElement[] {
+  return elements.filter((element) => element.element_id !== elementId)
+}
+
+export function placedElementToLibraryElement(element: PlacedElement): LibraryElement {
+  return {
+    id: element.element_id,
+    name: element.name,
+    kind: element.kind,
+    description: element.description,
+    technology: element.technology,
+    url: element.url,
+    logo_url: element.logo_url,
+    technology_connectors: element.technology_connectors,
+    tags: element.tags,
+    repo: element.repo,
+    branch: element.branch,
+    file_path: element.file_path,
+    language: element.language,
+    created_at: '',
+    updated_at: '',
+    has_view: element.has_view,
+    view_label: element.view_label,
+  }
+}
+
+export function buildElementLibraryItems(allElements: LibraryElement[], viewElements: PlacedElement[]): LibraryElement[] {
+  const byId = new Map<number, LibraryElement>()
+  allElements.forEach((element) => byId.set(element.id, element))
+  viewElements.forEach((element) => {
+    const placed = placedElementToLibraryElement(element)
+    const existing = byId.get(placed.id)
+    byId.set(placed.id, existing
+      ? {
+        ...existing,
+        ...placed,
+        created_at: existing.created_at,
+        updated_at: existing.updated_at,
+        has_view: existing.has_view,
+        view_label: existing.view_label,
+      }
+      : placed)
+  })
+  return Array.from(byId.values())
+}
+
+export function mergeSavedElementIntoPlacements(elements: PlacedElement[], saved: LibraryElement): PlacedElement[] {
+  return elements.map((element) =>
+    element.element_id === saved.id
+      ? {
+        ...element,
+        name: saved.name,
+        description: saved.description,
+        kind: saved.kind,
+        technology: saved.technology,
+        url: saved.url,
+        logo_url: saved.logo_url,
+        technology_connectors: saved.technology_connectors,
+        tags: saved.tags,
+        repo: saved.repo,
+        branch: saved.branch,
+        file_path: saved.file_path,
+        language: saved.language,
+      }
+      : element,
+  )
+}
+
+export function upsertConnectorInList(connectors: Connector[], connector: Connector): Connector[] {
+  const index = connectors.findIndex((candidate) => candidate.id === connector.id)
+  if (index === -1) return [...connectors, connector]
+  const next = connectors.slice()
+  next[index] = connector
+  return next
+}
+
+export function removeConnectorFromList(connectors: Connector[], connectorId: number): Connector[] {
+  return connectors.filter((connector) => connector.id !== connectorId)
+}
+
+export const useStore = create<CanvasStoreState>((set) => ({
+  ...emptyViewEditorUiState,
+  view: undefined,
+  viewElements: [],
+  connectors: [],
+  nodes: [],
+  edges: [],
+  linksMap: {},
+  parentLinksMap: {},
+  incomingLinks: [],
+  treeData: [],
+  allElements: [],
+  libraryRefresh: 0,
+
+  setViewEditorUi: (patch) => set((state) => ({ ...state, ...patch })),
+  setSnapToGrid: (snapToGrid) => set({ snapToGrid }),
+  setSelectedElement: (selectedElement) => set({ selectedElement }),
+  setSelectedConnector: (selectedConnector) => set({ selectedConnector }),
+  setView: (view) => set({ view }),
+  setViewElements: (next) => set((state) => ({ viewElements: resolveSetter(next, state.viewElements) })),
+  setConnectors: (next) => set((state) => ({ connectors: resolveSetter(next, state.connectors) })),
+  setNodes: (next) => set((state) => ({ nodes: resolveSetter(next, state.nodes) })),
+  setEdges: (next) => set((state) => ({ edges: resolveSetter(next, state.edges) })),
+  setLinksMap: (next) => set((state) => ({ linksMap: resolveSetter(next, state.linksMap) })),
+  setParentLinksMap: (next) => set((state) => ({ parentLinksMap: resolveSetter(next, state.parentLinksMap) })),
+  setIncomingLinks: (next) => set((state) => ({ incomingLinks: resolveSetter(next, state.incomingLinks) })),
+  setTreeData: (next) => set((state) => ({ treeData: resolveSetter(next, state.treeData) })),
+  setAllElements: (next) => set((state) => ({ allElements: resolveSetter(next, state.allElements) })),
+  setLibraryRefresh: (next) => set((state) => ({ libraryRefresh: resolveSetter(next, state.libraryRefresh) })),
+  resetCanvas: () => set({ nodes: [], edges: [] }),
+  hydrateViewContent: (payload) => set({
+    view: payload.view,
+    viewElements: payload.viewElements,
+    connectors: payload.connectors,
+    linksMap: payload.linksMap,
+    parentLinksMap: payload.parentLinksMap,
+    incomingLinks: payload.incomingLinks,
+    treeData: payload.treeData,
+  }),
+  updateElementPosition: (elementId, x, y) => set((state) => ({
+    viewElements: updatePlacedElementPosition(state.viewElements, elementId, x, y),
+  })),
+  removeElementPlacement: (elementId) => set((state) => ({
+    viewElements: removePlacedElement(state.viewElements, elementId),
+  })),
+  removeElementEverywhere: (elementId) => set((state) => ({
+    viewElements: removePlacedElement(state.viewElements, elementId),
+    libraryRefresh: state.libraryRefresh + 1,
+  })),
+  mergeSavedElement: (saved) => set((state) => ({
+    viewElements: mergeSavedElementIntoPlacements(state.viewElements, saved),
+    libraryRefresh: state.libraryRefresh + 1,
+  })),
+  upsertConnector: (connector) => set((state) => ({
+    connectors: upsertConnectorInList(state.connectors, connector),
+  })),
+  replaceConnector: (connector) => set((state) => ({
+    connectors: upsertConnectorInList(state.connectors, connector),
+  })),
+  removeConnector: (connectorId) => set((state) => ({
+    connectors: removeConnectorFromList(state.connectors, connectorId),
+  })),
+}))
+
+export const canvasSelectors = {
+  existingElementIds: selectExistingElementIds,
+  elementById: selectElementById,
+  connectorById: selectConnectorById,
+}