likec4 1.7.2 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
6
6
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
7
7
  <link rel="stylesheet" href="/src/style.css">
8
+ <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=structuredClone%2Ces2022%2Ces2023%2CqueueMicrotask%2CrequestAnimationFrame%2Cdefault"></script>
8
9
  <title>LikeC4</title>
9
10
  </head>
10
11
  <body>
@@ -2,7 +2,13 @@ import type { LikeC4ViewBaseProps } from 'likec4/react'
2
2
  import { LikeC4Browser, LikeC4ViewElement, useColorScheme } from 'likec4/react'
3
3
  import { memo, useCallback, useState } from 'react'
4
4
  import { Icons } from 'virtual:likec4/icons'
5
- import { isLikeC4ViewId, type LikeC4ViewId, LikeC4Views } from 'virtual:likec4/views'
5
+ import {
6
+ isLikeC4ViewId,
7
+ type LikeC4ElementKind,
8
+ type LikeC4Tag,
9
+ type LikeC4ViewId,
10
+ LikeC4Views
11
+ } from 'virtual:likec4/views'
6
12
 
7
13
  type IconRendererProps = {
8
14
  node: {
@@ -19,7 +25,7 @@ const RenderIcon = ({ node }: IconRendererProps) => {
19
25
 
20
26
  export { isLikeC4ViewId }
21
27
 
22
- export type LikeC4ViewProps = LikeC4ViewBaseProps<LikeC4ViewId>
28
+ export type LikeC4ViewProps = LikeC4ViewBaseProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
23
29
 
24
30
  export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4ViewComponent({
25
31
  viewId,
@@ -28,6 +34,7 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
28
34
  injectFontCss = true,
29
35
  background = 'transparent',
30
36
  browserBackground = 'dots',
37
+ where,
31
38
  ...props
32
39
  }) {
33
40
  const view = LikeC4Views[viewId]
@@ -52,7 +59,7 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
52
59
 
53
60
  return (
54
61
  <>
55
- <LikeC4ViewElement<LikeC4ViewId>
62
+ <LikeC4ViewElement<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
56
63
  view={view}
57
64
  colorScheme={colorScheme}
58
65
  injectFontCss={injectFontCss}
@@ -60,10 +67,11 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
60
67
  background={background}
61
68
  renderIcon={RenderIcon}
62
69
  showElementLinks={interactive}
70
+ where={where}
63
71
  {...props}
64
72
  />
65
73
  {browserView && (
66
- <LikeC4Browser<LikeC4ViewId>
74
+ <LikeC4Browser<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
67
75
  view={browserView}
68
76
  injectFontCss={false}
69
77
  colorScheme={colorScheme}
@@ -71,6 +79,7 @@ export const LikeC4View = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4V
71
79
  background={browserBackground}
72
80
  onClose={closeBrowser}
73
81
  renderIcon={RenderIcon}
82
+ where={where}
74
83
  />
75
84
  )}
76
85
  </>
@@ -51,6 +51,18 @@ const canvasDimensionLimit = 16384;
51
51
  function checkCanvasDimensions(canvas) {
52
52
  (canvas.width > canvasDimensionLimit || canvas.height > canvasDimensionLimit) && (canvas.width > canvasDimensionLimit && canvas.height > canvasDimensionLimit ? canvas.width > canvas.height ? (canvas.height *= canvasDimensionLimit / canvas.width, canvas.width = canvasDimensionLimit) : (canvas.width *= canvasDimensionLimit / canvas.height, canvas.height = canvasDimensionLimit) : canvas.width > canvasDimensionLimit ? (canvas.height *= canvasDimensionLimit / canvas.width, canvas.width = canvasDimensionLimit) : (canvas.width *= canvasDimensionLimit / canvas.height, canvas.height = canvasDimensionLimit));
53
53
  }
54
+ function canvasToBlob(canvas, options = {}) {
55
+ return canvas.toBlob ? new Promise((resolve) => {
56
+ canvas.toBlob(resolve, options.type ? options.type : "image/png", options.quality ? options.quality : 1);
57
+ }) : new Promise((resolve) => {
58
+ const binaryString = window.atob(canvas.toDataURL(options.type ? options.type : void 0, options.quality ? options.quality : void 0).split(",")[1]), len = binaryString.length, binaryArray = new Uint8Array(len);
59
+ for (let i = 0; i < len; i += 1)
60
+ binaryArray[i] = binaryString.charCodeAt(i);
61
+ resolve(new Blob([binaryArray], {
62
+ type: options.type ? options.type : "image/png"
63
+ }));
64
+ });
65
+ }
54
66
  function createImage(url) {
55
67
  return new Promise((resolve, reject) => {
56
68
  const img = new Image();
@@ -263,7 +275,7 @@ async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl)
263
275
  try {
264
276
  const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL, contentType = getMimeType(resourceURL);
265
277
  let dataURL;
266
- return dataURL = await resourceToDataURL(resolvedURL, contentType, options), cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
278
+ return getContentFromUrl || (dataURL = await resourceToDataURL(resolvedURL, contentType, options)), cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
267
279
  } catch {
268
280
  }
269
281
  return cssText;
@@ -442,11 +454,12 @@ async function toCanvas(node, options = {}) {
442
454
  const { width, height } = getImageSize(node, options), svg = await toSvg(node, options), img = await createImage(svg), canvas = document.createElement("canvas"), context = canvas.getContext("2d"), ratio = options.pixelRatio || getPixelRatio(), canvasWidth = options.canvasWidth || width, canvasHeight = options.canvasHeight || height;
443
455
  return canvas.width = canvasWidth * ratio, canvas.height = canvasHeight * ratio, options.skipAutoScale || checkCanvasDimensions(canvas), canvas.style.width = `${canvasWidth}`, canvas.style.height = `${canvasHeight}`, options.backgroundColor && (context.fillStyle = options.backgroundColor, context.fillRect(0, 0, canvas.width, canvas.height)), context.drawImage(img, 0, 0, canvas.width, canvas.height), canvas;
444
456
  }
445
- async function toPng(node, options = {}) {
446
- return (await toCanvas(node, options)).toDataURL();
457
+ async function toBlob(node, options = {}) {
458
+ const canvas = await toCanvas(node, options);
459
+ return await canvasToBlob(canvas);
447
460
  }
448
461
  export {
462
+ toBlob,
449
463
  toCanvas,
450
- toPng,
451
464
  toSvg
452
465
  };
@@ -1,5 +1,5 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
1
  import React__default, { createContext, memo, useState, forwardRef, useCallback, useMemo, useRef, useEffect, useContext, useLayoutEffect } from "react";
2
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { createPortal } from "react-dom";
4
4
  function getDefaultExportFromCjs(x) {
5
5
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
@@ -3649,6 +3649,7 @@ function t$1(a, b) {
3649
3649
  }
3650
3650
  var u$1 = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? t$1 : q$1;
3651
3651
  useSyncExternalStoreShim_production_min.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : u$1;
3652
+ shim.exports;
3652
3653
  shim.exports = useSyncExternalStoreShim_production_min;
3653
3654
  var shimExports = shim.exports;
3654
3655
  /**
@@ -3696,6 +3697,7 @@ withSelector_production_min.useSyncExternalStoreWithSelector = function(a, b, e2
3696
3697
  f.hasValue = !0, f.value = d;
3697
3698
  }, [d]), w(d), d;
3698
3699
  };
3700
+ withSelector.exports;
3699
3701
  withSelector.exports = withSelector_production_min;
3700
3702
  var withSelectorExports = withSelector.exports;
3701
3703
  const useSyncExternalStoreExports = /* @__PURE__ */ getDefaultExportFromCjs(withSelectorExports);
@@ -4454,9 +4456,9 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
4454
4456
  onPaneContextMenu?.(event);
4455
4457
  }, onWheel = onPaneScroll ? (event) => onPaneScroll(event) : void 0, onPointerDown2 = (event) => {
4456
4458
  const { resetSelectedElements, domNode, edgeLookup } = store.getState();
4457
- if (containerBounds.current = domNode?.getBoundingClientRect(), event.target?.setPointerCapture?.(event.pointerId), !elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !containerBounds.current)
4459
+ if (containerBounds.current = domNode?.getBoundingClientRect(), !elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !containerBounds.current)
4458
4460
  return;
4459
- selectionStarted.current = !0, selectionInProgress.current = !1, edgeIdLookup.current = /* @__PURE__ */ new Map();
4461
+ event.target?.setPointerCapture?.(event.pointerId), selectionStarted.current = !0, selectionInProgress.current = !1, edgeIdLookup.current = /* @__PURE__ */ new Map();
4460
4462
  for (const [id2, edge] of edgeLookup)
4461
4463
  edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id2) || /* @__PURE__ */ new Set([id2])), edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id2) || /* @__PURE__ */ new Set([id2]));
4462
4464
  const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
@@ -4583,7 +4585,9 @@ function useMoveSelectedNodes() {
4583
4585
  updateNodePositions(nodeUpdates);
4584
4586
  }, []);
4585
4587
  }
4586
- const NodeIdContext = createContext(null), Provider = NodeIdContext.Provider, useNodeId = () => useContext(NodeIdContext), selector$h = (s) => ({
4588
+ const NodeIdContext = createContext(null), Provider = NodeIdContext.Provider;
4589
+ NodeIdContext.Consumer;
4590
+ const useNodeId = () => useContext(NodeIdContext), selector$h = (s) => ({
4587
4591
  connectOnClick: s.connectOnClick,
4588
4592
  noPanClassName: s.noPanClassName,
4589
4593
  rfId: s.rfId
@@ -5486,7 +5490,7 @@ const GraphView = memo(GraphViewComponent), getInitialState = ({ nodes, edges, d
5486
5490
  setNodeExtent: (nodeExtent) => {
5487
5491
  const { nodeLookup } = get2();
5488
5492
  for (const [, node] of nodeLookup) {
5489
- const positionAbsolute = clampPosition(node.position, nodeExtent);
5493
+ const positionAbsolute = clampPosition(node.internals.positionAbsolute, nodeExtent);
5490
5494
  nodeLookup.set(node.id, {
5491
5495
  ...node,
5492
5496
  internals: {
@@ -5940,15 +5944,14 @@ export {
5940
5944
  applyNodeChanges as e,
5941
5945
  applyEdgeChanges as f,
5942
5946
  getViewportForBounds as g,
5943
- getBoundsOfRects as h,
5944
- getNodeDimensions as i,
5947
+ getNodeDimensions as h,
5948
+ getBoundsOfRects as i,
5945
5949
  boxToRect as j,
5946
5950
  useStoreWithEqualityFn as k,
5947
5951
  useOnViewportChange as l,
5948
5952
  index as m,
5949
- nodeToRect as n,
5950
- useOnSelectionChange as o,
5951
- BackgroundVariant as p,
5953
+ useOnSelectionChange as n,
5954
+ BackgroundVariant as o,
5952
5955
  shallow$1 as s,
5953
5956
  useReactFlow as u
5954
5957
  };