@likec4/diagram 1.19.1 → 1.20.0

package/dist/state/DiagramContext.js

@@ -1,101 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { invariant } from "@likec4/core";
-import { Box } from "@mantine/core";
-import { useReducedMotion, useMergedRef } from "@mantine/hooks";
-import { shallowEqual, deepEqual } from "fast-equals";
-import { useAnimate } from "framer-motion";
-import { createContext, useRef, useCallback, useEffect } from "react";
-import { clone } from "remeda";
-import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
-import { useXYStoreApi, useXYFlow } from "../hooks/useXYFlow.js";
-import { createDiagramStore } from "./diagramStore.js";
-const DiagramContext = createContext(null);
-function DiagramContextProvider({
-  children,
-  view,
-  className,
-  keepAspectRatio,
-  whereFilter,
-  ...props
-}) {
-  const isMotionReduced = useReducedMotion() ?? false;
-  const [scope, animate] = useAnimate();
-  const containerRef = useRef(null);
-  const ref = useMergedRef(scope, containerRef);
-  const xystore = useXYStoreApi();
-  const xyflow = useXYFlow();
-  const store = useRef();
-  const getContainer = useCallback(() => containerRef.current, [containerRef]);
-  if (!store.current) {
-    store.current = createDiagramStore({
-      xystore,
-      xyflow,
-      view,
-      getContainer,
-      whereFilter: clone(whereFilter),
-      ...props
-    });
-  }
-  useUpdateEffect(
-    () => {
-      var _a;
-      return (_a = store.current) == null ? void 0 : _a.setState({ xyflow, xystore, getContainer }, false, "update xyflow and xystore");
-    },
-    [xyflow, xystore, getContainer]
-  );
-  useUpdateEffect(
-    () => {
-      var _a;
-      return (_a = store.current) == null ? void 0 : _a.setState(props, false, "update incoming props");
-    },
-    [props]
-  );
-  useUpdateEffect(
-    () => {
-      const current = store.current;
-      invariant(current, "DiagramContext.store.current is not defined");
-      if (!deepEqual(whereFilter, current.getState().whereFilter)) {
-        current.setState({ whereFilter: clone(whereFilter) }, false, "update where filter");
-      }
-      current.getState().updateView(view);
-    },
-    [view, whereFilter],
-    (a, b) => shallowEqual(a[0], b[0]) && deepEqual(a[1], b[1])
-  );
-  const api = store.current;
-  useEffect(() => {
-    if (isMotionReduced) {
-      return;
-    }
-    return api.subscribe((s) => !!s.activeOverlay, (isActiveOverlay) => {
-      animate(".likec4-diagram .react-flow__renderer", {
-        opacity: isActiveOverlay ? 0.7 : 1,
-        filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
-        transform: isActiveOverlay ? `perspective(300px) translateZ(-10px) translateY(2px)` : `translateY(0)`
-      }, {
-        duration: isActiveOverlay ? 0.4 : 0.2
-      });
-    }, {
-      fireImmediately: true
-    });
-  }, [api, isMotionReduced]);
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      className,
-      ...keepAspectRatio && {
-        style: {
-          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
-          maxHeight: Math.ceil(view.bounds.height)
-        }
-      },
-      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: api, children })
-    }
-  );
-}
-DiagramContextProvider.displayName = "DiagramContextProvider";
-export {
-  DiagramContext,
-  DiagramContextProvider
-};

package/dist/state/diagram-to-xyflow.d.ts

@@ -1,11 +0,0 @@
-import { DiagramView } from '@likec4/core';
-import { WhereOperator } from '../LikeC4Diagram.props';
-import { DiagramFlowTypes } from '../xyflow/types';
-export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>, opts: {
-    where: WhereOperator<string, string> | null;
-    draggable: boolean;
-    selectable: boolean;
-}): {
-    xynodes: DiagramFlowTypes.Node[];
-    xyedges: DiagramFlowTypes.Edge[];
-};

package/dist/state/diagram-to-xyflow.js

@@ -1,113 +0,0 @@
-import { whereOperatorAsPredicate, ElementKind, nonNullable } from "@likec4/core";
-import { hasAtLeast } from "remeda";
-import { ZIndexes } from "../xyflow/const.js";
-function diagramViewToXYFlowData(view, opts) {
-  view.__ === "dynamic";
-  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
-  const traverse = view.nodes.reduce(
-    (acc, node) => {
-      nodeLookup.set(node.id, node);
-      if (!node.parent) {
-        acc.push({ node, parent: null });
-      }
-      return acc;
-    },
-    new Array()
-  );
-  let visiblePredicate = (_nodeOrEdge) => true;
-  if (opts.where) {
-    try {
-      visiblePredicate = whereOperatorAsPredicate(opts.where);
-    } catch (e) {
-      console.error("Error in where filter:", e);
-    }
-  }
-  const ns = "";
-  const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
-  let next;
-  while (next = traverse.shift()) {
-    const { node, parent } = next;
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group;
-    if (isCompound) {
-      traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
-    }
-    const position = {
-      x: node.position[0],
-      y: node.position[1]
-    };
-    if (parent) {
-      position.x -= parent.position[0];
-      position.y -= parent.position[1];
-    }
-    const id = ns + node.id;
-    const base = {
-      id,
-      draggable: opts.draggable,
-      selectable: opts.selectable && node.kind !== ElementKind.Group,
-      focusable: opts.selectable && !isCompound,
-      deletable: false,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      width: node.width,
-      height: node.height,
-      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
-      ...parent && {
-        parentId: ns + parent.id
-      }
-    };
-    xynodes.push(
-      isCompound ? {
-        ...base,
-        type: "compound",
-        data: {
-          fqn: node.id,
-          isViewGroup: node.kind === ElementKind.Group,
-          element: node
-        },
-        dragHandle: ".likec4-compound-title"
-      } : {
-        ...base,
-        type: "element",
-        data: {
-          fqn: node.id,
-          element: node
-        }
-      }
-    );
-  }
-  for (const edge of view.edges) {
-    const source = edge.source;
-    const target = edge.target;
-    const id = ns + edge.id;
-    if (!hasAtLeast(edge.points, 2)) {
-      console.error("edge should have at least 2 points", edge);
-      continue;
-    }
-    xyedges.push({
-      id,
-      type: "relationship",
-      source: ns + source,
-      target: ns + target,
-      zIndex: ZIndexes.Edge,
-      selectable: opts.selectable,
-      hidden: !visiblePredicate(edge),
-      deletable: false,
-      data: {
-        edge,
-        controlPoints: edge.controlPoints || null,
-        label: !!edge.labelBBox ? {
-          bbox: edge.labelBBox,
-          text: edge.label ?? ""
-        } : null
-      },
-      interactionWidth: 20
-    });
-  }
-  return {
-    xynodes,
-    xyedges
-  };
-}
-export {
-  diagramViewToXYFlowData
-};