likec4 1.7.2 → 1.7.4
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.
- package/dist/__app__/index.html +1 -0
- package/dist/__app__/react/likec4.tsx +13 -4
- package/dist/__app__/src/chunks/{index-CsouX5P7.js → index-CIsxIzOH.js} +17 -4
- package/dist/__app__/src/chunks/{likec4-5Tyb70uB.js → likec4-DA506XqP.js} +13 -10
- package/dist/__app__/src/chunks/{mantine-l9Camp3k.js → mantine-CIkjlE3R.js} +570 -425
- package/dist/__app__/src/chunks/{tanstack-router-BgNzIYOs.js → tanstack-router-C3bHLsEH.js} +71 -25
- package/dist/__app__/src/main.js +3051 -2569
- package/dist/__app__/src/style.css +1 -1
- package/dist/__app__/tsconfig.tsbuildinfo +1 -1
- package/dist/__app__/webcomponent/webcomponent.js +14261 -13667
- package/dist/cli/index.mjs +239 -348
- package/package.json +21 -18
- package/react/LikeC4Browser.d.ts +4 -2
- package/react/LikeC4ViewElement.d.ts +4 -2
- package/react/index.d.ts +1 -0
- package/react/index.mjs +14630 -14066
- package/react/types-filter.d.ts +33 -0
- package/react/types.d.ts +3 -1
package/dist/__app__/index.html
CHANGED
|
@@ -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 {
|
|
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
|
|
446
|
-
|
|
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(),
|
|
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
|
|
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.
|
|
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
|
-
|
|
5944
|
-
|
|
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
|
-
|
|
5950
|
-
|
|
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
|
};
|