@likec4/diagram 1.27.0 → 1.27.2

package/dist/packages/core/src/model/connection/model/ConnectionModel.js

@@ -0,0 +1,121 @@
+import { isNot } from 'remeda';
+import { invariant } from '../../../errors/index.js';
+import { customInspectSymbol } from '../../../utils/const.js';
+import { union, difference, intersection, equals } from '../../../utils/set.js';
+import { stringHash } from '../../../utils/string-hash.js';
+import { hasSameSourceTarget } from '../ops.js';
+import { findConnection } from './find.js';
+import { isome } from '../../../utils/iterable/some.js';
+import { ifilter } from '../../../utils/iterable/filter.js';
+
+class ConnectionModel {
+  constructor(source, target, relations = /* @__PURE__ */ new Set()) {
+    this.source = source;
+    this.target = target;
+    this.relations = relations;
+    this.id = stringHash(`model:${source.id}:${target.id}`);
+  }
+  id;
+  _boundary;
+  /**
+   * Common ancestor of the source and target elements.
+   * Represents the boundary of the connection.
+   */
+  get boundary() {
+    return this._boundary ??= this.source.commonAncestor(this.target);
+  }
+  /**
+   * Human readable expression of the connection
+   * Mostly used for testing and debugging
+   */
+  get expression() {
+    return `${this.source.id} -> ${this.target.id}`;
+  }
+  /**
+   * Returns true if only includes relations between the source and target elements.
+   */
+  get isDirect() {
+    return this.nonEmpty() && !this.isImplicit;
+  }
+  /**
+   * Returns true if includes relations between nested elements of the source and target elements.
+   */
+  get isImplicit() {
+    return this.nonEmpty() && isome(this.relations, isNot(hasSameSourceTarget(this)));
+  }
+  get directRelations() {
+    return new Set(ifilter(this.relations, hasSameSourceTarget(this)));
+  }
+  nonEmpty() {
+    return this.relations.size > 0;
+  }
+  mergeWith(other) {
+    invariant(this.source.id === other.source.id, "Cannot merge connections with different sources");
+    invariant(this.target.id === other.target.id, "Cannot merge connections with different targets");
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      union(this.relations, other.relations)
+    );
+  }
+  difference(other) {
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      difference(this.relations, other.relations)
+    );
+  }
+  intersect(other) {
+    invariant(other instanceof ConnectionModel, "Cannot intersect connection with different type");
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      intersection(this.relations, other.relations)
+    );
+  }
+  equals(other) {
+    invariant(other instanceof ConnectionModel, "Cannot merge connection with different type");
+    return this.id === other.id && this.source.id === other.source.id && this.target.id === other.target.id && equals(this.relations, other.relations);
+  }
+  /**
+   * Returns a new instance with the updated relations.
+   *
+   * @param relations - A readonly set of `RelationshipModel` instances representing the new relations.
+   * @returns A new `ConnectionModel` instance with the updated relations.
+   */
+  update(relations) {
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      relations
+    );
+  }
+  [customInspectSymbol](depth, inspectOptions, inspect) {
+    const asString = this.toString();
+    Object.defineProperty(asString, "constructor", {
+      value: ConnectionModel,
+      enumerable: false
+    });
+    return asString;
+  }
+  toString() {
+    return [
+      this.expression,
+      this.relations.size ? "  relations:" : "  relations: [ ]",
+      ...[...this.relations].map((c) => "    " + c.expression)
+    ].join("\n");
+  }
+  /**
+   * Creates a new connection with reversed direction (target becomes source and vice versa)
+   * @param search - When true, attempts to find an existing connection between the reversed nodes
+   */
+  reversed(search = false) {
+    if (!search) {
+      return new ConnectionModel(this.target, this.source);
+    }
+    const [found] = findConnection(this.target, this.source, "directed");
+    return found ?? new ConnectionModel(this.target, this.source, /* @__PURE__ */ new Set());
+  }
+}
+
+export { ConnectionModel };

package/dist/packages/core/src/model/connection/model/find.js

@@ -0,0 +1,39 @@
+import { isSameHierarchy } from '../../../utils/fqn.js';
+import { intersection } from '../../../utils/set.js';
+import { ConnectionModel } from './ConnectionModel.js';
+
+function findConnection(source, target, direction = "directed") {
+  if (source === target) {
+    return [];
+  }
+  if (isSameHierarchy(source, target)) {
+    return [];
+  }
+  const directedIntersection = intersection(source.allOutgoing, target.allIncoming);
+  const directed = directedIntersection.size > 0 ? new ConnectionModel(
+    source,
+    target,
+    directedIntersection
+  ) : null;
+  if (direction === "directed") {
+    return directed ? [directed] : [];
+  }
+  const reverseIntersection = intersection(source.allIncoming, target.allOutgoing);
+  const reverse = reverseIntersection.size > 0 ? new ConnectionModel(
+    target,
+    source,
+    reverseIntersection
+  ) : null;
+  if (directed && reverse) {
+    return [directed, reverse];
+  }
+  if (directed) {
+    return [directed];
+  }
+  if (reverse) {
+    return [reverse];
+  }
+  return [];
+}
+
+export { findConnection };

package/dist/packages/core/src/model/connection/ops.js

@@ -0,0 +1,7 @@
+import 'remeda';
+
+function hasSameSourceTarget(a, b) {
+  return (b2) => a.source === b2.source && a.target === b2.target;
+}
+
+export { hasSameSourceTarget };

package/dist/packages/core/src/utils/const.js

@@ -0,0 +1,3 @@
+const customInspectSymbol = Symbol.for("nodejs.util.inspect.custom");
+
+export { customInspectSymbol };

package/dist/packages/core/src/utils/fqn.js

@@ -12,6 +12,14 @@ function isAncestor(arg1, arg2) {
     return arg1Id.startsWith(ancestorId + ".");
   };
 }
+function isSameHierarchy(one, another) {
+  if (!another) {
+    return (b) => isSameHierarchy(one, b);
+  }
+  const first = asString(one);
+  const second = asString(another);
+  return first === second || second.startsWith(first + ".") || first.startsWith(second + ".");
+}
 function isDescendantOf(descedant, ancestor) {
   {
     return (d) => isAncestor(descedant, d);
@@ -40,4 +48,4 @@ function sortParentsFirst(array) {
   return result;
 }
 
-export { isAncestor, isDescendantOf, sortParentsFirst };
+export { isAncestor, isDescendantOf, isSameHierarchy, sortParentsFirst };

package/dist/packages/core/src/utils/iterable/find.js

@@ -0,0 +1,21 @@
+import { isFunction } from 'remeda';
+import { invariant } from '../../errors/index.js';
+
+function ifind(arg1, arg2) {
+  const pred = arg2 ?? arg1;
+  invariant(isFunction(pred));
+  function _find(iter) {
+    for (const value of iter) {
+      if (pred(value)) {
+        return value;
+      }
+    }
+    return;
+  }
+  if (!arg2) {
+    return _find;
+  }
+  return _find(arg1);
+}
+
+export { ifind };

package/dist/packages/core/src/utils/iterable/some.js

@@ -0,0 +1,21 @@
+import { isFunction } from 'remeda';
+import { invariant } from '../../errors/index.js';
+
+function isome(arg1, arg2) {
+  const pred = arg2 ?? arg1;
+  invariant(isFunction(pred));
+  function _some(iter) {
+    for (const value of iter) {
+      if (pred(value)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  if (!arg2) {
+    return _some;
+  }
+  return _some(arg1);
+}
+
+export { isome };

package/dist/packages/core/src/utils/set.js

@@ -0,0 +1,48 @@
+import { hasAtLeast } from 'remeda';
+import { s as setExports } from '../../../../_virtual/set.js';
+
+function union(...sets) {
+  let result = /* @__PURE__ */ new Set();
+  for (const set of sets) {
+    for (const value of set) {
+      result.add(value);
+    }
+  }
+  return result;
+}
+function intersection(first, ...sets) {
+  let result = /* @__PURE__ */ new Set();
+  if (first.size === 0) {
+    return result;
+  }
+  let other = hasAtLeast(sets, 2) ? setExports.intersection(...sets) : sets[0];
+  if (other.size === 0) {
+    return result;
+  }
+  for (const value of first) {
+    if (other.has(value)) {
+      result.add(value);
+    }
+  }
+  return result;
+}
+function difference(a, b) {
+  if (a.size === 0) {
+    return /* @__PURE__ */ new Set();
+  }
+  if (b.size === 0) {
+    return new Set(a);
+  }
+  let result = /* @__PURE__ */ new Set();
+  for (const value of a) {
+    if (!b.has(value)) {
+      result.add(value);
+    }
+  }
+  return result;
+}
+function equals(a, b) {
+  return a.size === b.size && [...a].every((value) => b.has(value));
+}
+
+export { difference, equals, intersection, union };

package/dist/packages/core/src/utils/string-hash.js

@@ -0,0 +1,13 @@
+import { invariant } from '../errors/index.js';
+
+function stringHash(str) {
+  let hash = 5381;
+  const len = str.length;
+  invariant(len > 0, "stringHash: empty string");
+  for (let i = 0; i < len; i++) {
+    hash = hash * 33 ^ str.charCodeAt(i);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+export { stringHash };

package/dist/state/DiagramActorProvider.d.ts

@@ -1,7 +1,9 @@
+import { WhereOperator } from '@likec4/core';
 import { PropsWithChildren } from 'react';
 import { Input } from './diagram-machine';
-type ActorContextInput = Omit<Input, 'xystore' | 'features'>;
-export declare function DiagramActorProvider({ input, children }: PropsWithChildren<{
+type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>;
+export declare function DiagramActorProvider({ input: { view, ...inputs }, where, children, }: PropsWithChildren<{
     input: ActorContextInput;
+    where?: WhereOperator<string, string> | undefined;
 }>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/state/DiagramActorProvider.js

@@ -1,20 +1,30 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import { useDeepCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo, useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorSafeContext } from '../hooks/safeContext.js';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
+import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 
-function DiagramActorProvider({ input, children }) {
+const selectToggledFeatures = (state) => state.context.toggledFeatures;
+function DiagramActorProvider({
+  input: {
+    view,
+    ...inputs
+  },
+  where,
+  children
+}) {
   const handlersRef = useDiagramEventHandlersRef();
   const xystore = useStoreApi();
-  const logic = useMemo(() => {
-    return diagramMachine.provide({
+  const actorRef = useActorRef(
+    diagramMachine.provide({
       actions: {
         "trigger:NavigateTo": (_, { viewId }) => {
           handlersRef.current.onNavigateTo?.(viewId);
@@ -35,52 +45,35 @@ function DiagramActorProvider({ input, children }) {
           }
         })
       }
-    });
-  }, [handlersRef]);
-  const actorRef = useActorRef(
-    logic,
+    }),
     {
-      id: `diagram:${input.view.id}`,
+      id: `diagram:${view.id}`,
       systemId: "diagram",
       // ...inspector,
       input: {
         xystore,
-        ...input
+        view,
+        ...inputs
       }
     }
   );
-  return /* @__PURE__ */ jsxs(DiagramActorSafeContext, { value: actorRef, children: [
-    /* @__PURE__ */ jsx(SyncStore, { input, actorRef }),
-    /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { actorRef, children })
-  ] });
-}
-const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs }, actorRef }) => {
   const features = useEnabledFeatures();
   useUpdateEffect(() => {
     actorRef.send({ type: "update.inputs", inputs });
-  }, [actorRef, inputs]);
+  }, [inputs]);
   useEffect(() => {
     actorRef.send({ type: "update.features", features });
-  }, [actorRef, features]);
-  const frameReq = useRef(null);
-  useUpdateEffect(() => {
-    frameReq.current = requestAnimationFrame(() => {
-      frameReq.current = null;
-      actorRef.send({ type: "update.view", view, xyedges, xynodes });
-    });
-    return () => {
-      if (frameReq.current != null) {
-        cancelAnimationFrame(frameReq.current);
-      }
-      frameReq.current = null;
-    };
-  }, [actorRef, view, xyedges, xynodes]);
-  return null;
-};
-const selectToggledFeatures = (state) => state.context.toggledFeatures;
-function DiagramActorToggledFeatures({ children, actorRef }) {
+  }, [features]);
+  const { xyedges, xynodes } = useViewToNodesEdges({
+    view,
+    where,
+    nodesSelectable: inputs.nodesSelectable
+  });
+  useDeepCompareEffect(() => {
+    actorRef.send({ type: "update.view", view, xyedges, xynodes });
+  }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children });
+  return /* @__PURE__ */ jsx(DiagramActorSafeContext, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
 
 export { DiagramActorProvider };

package/dist/state/assign.js

@@ -338,8 +338,8 @@ function updateActiveWalkthrough({ context }) {
       });
     }),
     xynodes: context.xynodes.map((node) => {
-      const active = step.source === node.id || step.target === node.id;
-      return Base.setDimmed(node, !active);
+      const dimmed = step.source !== node.id && step.target !== node.id;
+      return Base.setDimmed(node, dimmed);
     })
   };
 }