tycho-components 0.2.4-SNAPSHOT-2 → 0.2.4-SNAPSHOT-4

package/dist/AppPlaceholder/style.scss

@@ -3,7 +3,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
   width: 100%;
 
   > span {

package/dist/TreeView/TreeView.d.ts

@@ -10,7 +10,7 @@ type Props = {
     renderWithInfo?: boolean;
     placeholder?: string;
     onClickExpression?: () => void;
-    onExpand?: () => void;
+    onExpand?: (reset: () => void) => void;
     onReadyCustom?: (thisCy: Core) => void;
 };
 export default function TreeView({ struct, expression, selector, translations, wheelSensitivity, renderWithInfo, placeholder, onClickExpression, onExpand, onReadyCustom, }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/TreeView/TreeView.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { faDiagramProject, faDownload, faExpand, faInfoCircle, faUpRightAndDownLeftFromCenter, } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { saveAs } from 'file-saver';
+import html2canvas from 'html2canvas';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import AppPlaceholder from '../AppPlaceholder';
@@ -15,6 +16,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
     const [cy, setCy] = useState(null);
     const [showInfo, setShowInfo] = useState(renderWithInfo);
     const [invalid, setInvalid] = useState();
+    const [expandedExternally, setExpandedExternally] = useState(false);
     const load = () => {
         setCy(null);
         const element = document.getElementById(selector);
@@ -52,9 +54,20 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         saveAs(blob, 'sentence.psd');
     };
     const generateImage = () => {
-        if (cy) {
-            saveAs(cy.jpg({ full: true }), 'tree.jpg');
-        }
+        if (!cy)
+            return;
+        const cyContainer = cy.container();
+        if (!cyContainer)
+            return;
+        html2canvas(cyContainer, {
+            backgroundColor: 'white',
+        }).then((canvas) => {
+            canvas.toBlob((blob) => {
+                if (blob === null)
+                    return;
+                saveAs(blob, 'tree.jpg');
+            }, 'image/jpeg', 1.0);
+        });
     };
     const reset = () => {
         if (cy) {
@@ -80,15 +93,28 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         setShowInfo(newVal);
         applyInfo(cy, struct, newVal);
     };
+    const handleExpand = () => {
+        setExpandedExternally(true);
+        onExpand && onExpand(reset);
+    };
     useEffect(() => {
         setInvalid(undefined);
         load();
     }, [struct]);
+    useEffect(() => {
+        if (expandedExternally) {
+            const id = setTimeout(() => {
+                reset();
+                setExpandedExternally(false);
+            }, 50);
+            return () => clearTimeout(id);
+        }
+    }, [expandedExternally]);
     if (invalid) {
         return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
     }
     return (_jsxs("div", { className: "tree-view-container", children: [cy &&
-                getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression)
+                getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, handleExpand, onExpand, expression)
                     .filter((btn) => btn.condition)
                     .map((btn, i) => {
                     const right = 12 + i * 44;
@@ -96,7 +122,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
                 }), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
                         Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t('date.parsed'), ' ', DateUtils.formatDateTime(struct.parsed, 'dd/MM/yyyy HH:mm:ss')] }))] }))] }));
 }
-const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression) => [
+const getButtons = (generateImage, reset, downloadPsd, toggleInfo, handleExpand, onExpand, expression) => [
     {
         condition: true,
         title: 'button.download.tree',
@@ -119,7 +145,7 @@ const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, exp
     {
         condition: !!onExpand,
         title: 'button.expand.tree',
-        onClick: onExpand,
+        onClick: handleExpand,
         icon: faUpRightAndDownLeftFromCenter,
     },
     {

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

@@ -1,2 +1,3 @@
+import cytoscape from 'cytoscape';
 declare const defaultStylesheet: Array<cytoscape.StylesheetCSS>;
 export default defaultStylesheet;

package/dist/TreeView/cytoscape/CytoscapeStylesheet.js

@@ -13,7 +13,6 @@ const defaultStylesheet = [
     {
         selector: 'node',
         style: {
-            content: 'data(label)',
             'background-color': '#FFF',
             width: '50px',
             height: '40px',
@@ -21,7 +20,6 @@ const defaultStylesheet = [
             'text-max-width': 120,
             'text-valign': 'center',
             'text-halign': 'center',
-            'font-size': 18,
             shape: 'rectangle',
             cursor: 'pointer',
         },

package/dist/TreeView/cytoscape/CytoscapeTreeConverter.js

@@ -31,9 +31,9 @@ export default class CytoscapeTreeConverter {
             const attrLines = Object.values(token.attributes)
                 .map((v) => v)
                 .join('\n');
-            return `${token.v}\n${attrLines}`;
+            return `<span class="token-value">${token.v}</span><span class="token-attributes">${attrLines}</span>`;
         }
-        return token.v;
+        return `<span class="token-value">${token.v}</span>`;
     }
     validate(struct) {
         if (!struct.chunks || struct.chunks.length === 0) {

package/dist/TreeView/cytoscape/SyntreesCytoscape.js

@@ -1,5 +1,7 @@
 import cytoscape from 'cytoscape';
 import defaultStylesheet from './CytoscapeStylesheet';
+import nodeHtmlLabel from 'cytoscape-node-edge-html-label';
+nodeHtmlLabel(cytoscape);
 const init = ({ selector, tree, dagre = false, stylesheet = defaultStylesheet, wheelSensitivity = 1.5, onReady, }) => {
     destroy(selector);
     const cy = cytoscape({
@@ -32,6 +34,18 @@ const init = ({ selector, tree, dagre = false, stylesheet = defaultStylesheet, w
         pixelRatio: 1,
     });
     cy.ready(() => {
+        if (!cy._htmlLabelsApplied) {
+            // @ts-ignore (no types)
+            cy.nodeHtmlLabel([
+                {
+                    query: 'node',
+                    halign: 'center',
+                    valign: 'center',
+                    tpl: (data) => `<div class="token-data">${data.label}</div>`,
+                },
+            ]);
+            cy._htmlLabelsApplied = true; // mark as applied
+        }
         cy.fit();
         cy.center();
         dagre && cy.layout({ name: 'dagre' }).run();

package/dist/TreeView/style.scss

@@ -40,4 +40,18 @@
       @include helper-medium-1;
     }
   }
+
+  .token-data {
+    text-align: center;
+    .token-value {
+      display: block;
+      font-weight: bolder;
+      font-size: 18px;
+    }
+
+    .token-attributes {
+      display: block;
+      color: red;
+    }
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.2.4-SNAPSHOT-2",
+  "version": "0.2.4-SNAPSHOT-4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -24,17 +24,19 @@
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
     "cytoscape": "^3.28.1",
+    "cytoscape-node-edge-html-label": "^1.0.6",
     "date-fns": "^2.29.1",
     "date-fns-tz": "^1.3.6",
     "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "react-colorful": "^5.6.1",
     "react-easy-edit": "^2.0.0",
-    "react-simple-keyboard": "^3.8.66",
-    "simple-keyboard-layouts": "^3.4.82",
     "react-loading": "^2.0.3",
+    "react-simple-keyboard": "^3.8.66",
     "react-switch": "^7.1.0",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "simple-keyboard-layouts": "^3.4.82"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
@@ -64,7 +66,7 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
-    "@types/cytoscape": "^3.19.15",
+    "@types/cytoscape": "^3.21.9",
     "@types/file-saver": "^2.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.0",