tycho-components 0.2.0-SNAPSHOT-3 → 0.2.0-SNAPSHOT-5

package/dist/TreeView/TreeView.js

@@ -20,10 +20,15 @@ export default function TreeView({ struct, expression, onExpand, selector = 'can
         if (!struct)
             return;
         const tree = new CytoscapeTreeConverter().execute(struct, showInfo);
-        tree &&
-            SyntreesCytoscape.init(selector, tree, (thisCy) => {
-                setCy(thisCy);
+        if (tree) {
+            SyntreesCytoscape.init({
+                selector,
+                tree,
+                onReady: (thisCy) => {
+                    setCy(thisCy);
+                },
             });
+        }
     };
     const downloadPsd = () => {
         if (!expression)

package/dist/TreeView/cytoscape/CytoscapeStylesheet.d.ts

@@ -1,2 +1,2 @@
-declare const stylesheet: Array<cytoscape.StylesheetCSS>;
-export default stylesheet;
+declare const defaultStylesheet: Array<cytoscape.StylesheetCSS>;
+export default defaultStylesheet;

package/dist/TreeView/cytoscape/CytoscapeStylesheet.js

@@ -1,4 +1,4 @@
-const stylesheet = [
+const defaultStylesheet = [
     {
         selector: 'core',
         style: {
@@ -101,4 +101,4 @@ const stylesheet = [
         },
     },
 ];
-export default stylesheet;
+export default defaultStylesheet;

package/dist/TreeView/cytoscape/SyntreesCytoscape.d.ts

@@ -1,6 +1,13 @@
-import { Core } from 'cytoscape';
+import cytoscape, { Core } from 'cytoscape';
 import { CytoscapeTree } from '../../configs/types/Tree';
+type Props = {
+    selector: string;
+    tree: CytoscapeTree;
+    stylesheet?: cytoscape.StylesheetCSS[];
+    dagre?: boolean;
+    onReady?: (cy: Core) => void;
+};
 declare const SyntreesCytoscape: {
-    init: (selector: string, tree: CytoscapeTree, onReady?: (cy: Core) => void) => Core;
+    init: ({ selector, tree, dagre, stylesheet, onReady, }: Props) => Core;
 };
 export default SyntreesCytoscape;

package/dist/TreeView/cytoscape/SyntreesCytoscape.js

@@ -1,6 +1,6 @@
 import cytoscape from 'cytoscape';
-import stylesheet from './CytoscapeStylesheet';
-const init = (selector, tree, onReady) => {
+import defaultStylesheet from './CytoscapeStylesheet';
+const init = ({ selector, tree, dagre = false, stylesheet = defaultStylesheet, onReady, }) => {
     destroy(selector);
     const cy = cytoscape({
         container: document.getElementById(selector),
@@ -28,12 +28,13 @@ const init = (selector, tree, onReady) => {
         textureOnViewport: false,
         motionBlur: false,
         motionBlurOpacity: 0.2,
-        wheelSensitivity: 0.3,
+        wheelSensitivity: 1.5,
         pixelRatio: 1,
     });
     cy.ready(() => {
         cy.fit();
         cy.center();
+        dagre && cy.layout({ name: 'dagre' }).run();
         onReady && onReady(cy);
     });
     return cy;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.2.0-SNAPSHOT-3",
+  "version": "0.2.0-SNAPSHOT-5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -23,7 +23,7 @@
     "@tanstack/react-table": "^8.20.6",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
-    "cytoscape": "^3.26.0",
+    "cytoscape": "^3.28.1",
     "date-fns": "^2.29.1",
     "date-fns-tz": "^1.3.6",
     "file-saver": "^2.0.5",
@@ -64,7 +64,7 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
-    "@types/cytoscape": "^3.19.11",
+    "@types/cytoscape": "^3.19.15",
     "@types/file-saver": "^2.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.0",