From 7c3417e99462a271cb3f3d8e3ac428fd8dead3e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= Date: Wed, 7 Feb 2024 10:13:10 +0100 Subject: [PATCH] fix: fixed issues with state on slides --- package-lock.json | 59 +++++- package.json | 6 +- .../Components/Views/QuickFormLayoutView.tsx | 179 +++++++++--------- 3 files changed, 155 insertions(+), 89 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e58ea4..4144a3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15941,8 +15941,14 @@ "name": "@eavfw/quickform-designer", "version": "1.0.0", "license": "MIT", + "dependencies": { + "react": "18.2.0", + "react-dom": "18.2.0" + }, "devDependencies": { - "@types/pako": "2.0.0" + "@types/pako": "2.0.0", + "@types/react": "17.0.75", + "@types/react-dom": "17.0.11" }, "peerDependencies": { "@craftjs/core": "^0.2.4", @@ -15954,9 +15960,32 @@ "@eavfw/manifest": "^1.5.0-vnext.7", "@eavfw/utils": "^1.0.3-vnext.2", "@fluentui/react-components": "^9.46.1", + "@rjsf/fluentui-rc": "^5.16.1", + "@rjsf/utils": "^5.17.0", + "@rjsf/validator-ajv8": "^5.17.0", "pako": "^2.0.4" } }, + "packages/designer/node_modules/@types/react": { + "version": "17.0.75", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.75.tgz", + "integrity": "sha512-MSA+NzEzXnQKrqpO63CYqNstFjsESgvJAdAyyJ1n6ZQq/GLgf6nOfIKwk+Twuz0L1N6xPe+qz5xRCJrbhMaLsw==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "packages/designer/node_modules/@types/react-dom": { + "version": "17.0.11", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz", + "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "packages/playground": { "version": "1.0.0", "license": "ISC", @@ -17326,7 +17355,33 @@ "@eavfw/quickform-designer": { "version": "file:packages/designer", "requires": { - "@types/pako": "2.0.0" + "@types/pako": "2.0.0", + "@types/react": "17.0.75", + "@types/react-dom": "17.0.11", + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "dependencies": { + "@types/react": { + "version": "17.0.75", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.75.tgz", + "integrity": "sha512-MSA+NzEzXnQKrqpO63CYqNstFjsESgvJAdAyyJ1n6ZQq/GLgf6nOfIKwk+Twuz0L1N6xPe+qz5xRCJrbhMaLsw==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-dom": { + "version": "17.0.11", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz", + "integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==", + "dev": true, + "requires": { + "@types/react": "*" + } + } } }, "@eavfw/utils": { diff --git a/package.json b/package.json index 8f2842e..a7fa01b 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "scripts": { "link": "concurrently \"npm:link-*\"", "link-core": "npm --workspace packages/core link", - "link-designer": "npm --workspace packages/core designer", + "link-designer": "npm --workspace packages/designer link", "publish": "npm-run-all --continue-on-error publish-*", "publish-core": "npm --workspace packages/core publish --access public", @@ -21,7 +21,9 @@ "release": "npm-run-all --continue-on-error release-*", "release-core": "npm run release --workspace packages/core", - "release-designer": "npm run release --workspace packages/designer" + "release-designer": "npm run release --workspace packages/designer", + + "eavfw-link": "npm link @eavfw/apps @eavfw/next @eavfw/expressions @eavfw/manifest @eavfw/hooks @eavfw/forms @eavfw/utils @eavfw/designer @eavfw/designer-core @eavfw/designer-nodes" }, "config": { "force": true diff --git a/packages/designer/src/Components/Views/QuickFormLayoutView.tsx b/packages/designer/src/Components/Views/QuickFormLayoutView.tsx index 3991eb8..6a54375 100644 --- a/packages/designer/src/Components/Views/QuickFormLayoutView.tsx +++ b/packages/designer/src/Components/Views/QuickFormLayoutView.tsx @@ -1,11 +1,13 @@ import { mergeClasses } from "@fluentui/react-components"; import { useViewStyles } from "../Styles/useViewStyles.styles" import { PageDesignEditor, CraftEditor, CraftViewPort, useEditorChanges } from "@eavfw/designer"; -import { QuickFormDef } from "../../QuickFormDesigner"; - + import { useEffect, useMemo } from "react"; import { removeNonAlphanumeric } from "@eavfw/utils"; import { SerializedNodes } from "@craftjs/core" +import { QuickFormDef } from "../../Types/QuickFormDefinition"; + + const initial = JSON.stringify( { @@ -60,7 +62,88 @@ export const QuickFormLayoutView = ({ dispatch, slideId, layout }: { useEffect(() => { - console.log("CraftEditor6", [slideId, store.history.timeline, nodes]); + + + + //console.log("CraftEditor11", [slideId, layout, JSON.parse(JSON.stringify(store.history.timeline))]); + //let last = store.history.timeline[store.history.timeline.length - 1]; + //let lastPatch = last && last.patches[last.patches.length - 1]; + //if (lastPatch && lastPatch.op === "replace" && lastPatch.path[lastPatch.path.length - 1] === "displayName") { + // return; + //} + + + { + const rownodes = slideId && layout.slides[slideId]?.rows ? + Object.fromEntries( + Object.entries( + layout.slides[slideId]?.rows ?? { + }).map(([rowid, row]) => [rowid, { + "type": { "resolvedName": "Question" }, + "isCanvas": true, "props": { questionid: row.columns["column1"]["q"].ref }, + "displayName": "Question", + "custom": { "displayName": "Question" }, + "parent": "ROOT", + "hidden": false, + "nodes": [], + "linkedNodes": {} + }])) : { + "GBCxB0dj1x": { + "type": { "resolvedName": "GridNode" }, + "isCanvas": true, "props": {}, + "displayName": "Grid", + "custom": { "displayName": "Content" }, + "parent": "ROOT", + "hidden": false, + "nodes": [], + "linkedNodes": {} + } + }; + + const data = JSON.stringify({ + "ROOT": { + "type": { "resolvedName": "Container" }, + "isCanvas": true, + "props": { + "flexDirection": "column", + "alignItems": "flex-start", + "justifyContent": "flex-start", + "fillSpace": "no", + "padding": ["40", "40", "40", "40"], + "margin": ["0", "0", "0", "0"], + "background": { "r": 255, "g": 255, "b": 255, "a": 1 }, + "color": { "r": 0, "g": 0, "b": 0, "a": 1 }, + "shadow": 0, + "radius": 0, + "width": "90%", + "height": "auto" + }, + "displayName": "Container", + "custom": { + renderNode: { + canAddLeft: false, + canAddRight: false, + canAddTop: true, + canAddBottom: true + }, + slideId: slideId, + "displayName": slideId && slideId in layout.slides ? layout.slides[slideId].title : 'New Slide *' + }, + "hidden": false, + "nodes": Object.keys(rownodes), + "linkedNodes": {} + }, + ...rownodes + }); + console.log("CraftEditor10", [slideId, layout, JSON.parse(data)]); + + deserialize(data); + history.clear(); + }; + }, [slideId]); + + useEffect(() => { + console.log("CraftEditor6", [slideId, store.history.timeline, nodes, nodes.ROOT?.custom?.displayName, slideId && layout?.slides?.[slideId]?.title]); /** @@ -80,19 +163,21 @@ export const QuickFormLayoutView = ({ dispatch, slideId, layout }: { let schemaName = removeNonAlphanumeric(title); let logicalName = schemaName.toLowerCase(); - old.layout.slides[logicalName] = { ...old.layout.slides[oldslideid], title, schemaName, logicalName }; - if (logicalName !== oldslideid) - delete old.layout.slides[oldslideid]; - + old.layout.slides[oldslideid] = { ...old.layout.slides[oldslideid], title, schemaName, logicalName }; + if (!old.__designer) old.__designer = {}; - old.__designer.activeSlide = logicalName; + old.__designer.activeSlide = oldslideid; return { ...old }; }); } } + /** + * populate the layout based on designer state. + */ + if (nodes?.ROOT && nodes.ROOT.custom.slideId === slideId) { dispatch(quickform => { let layout = quickform.layout; @@ -131,83 +216,7 @@ export const QuickFormLayoutView = ({ dispatch, slideId, layout }: { }, [nodes, slideId, layout]); - useEffect(() => { - - - console.log("CraftEditor11", [slideId, layout, JSON.parse(JSON.stringify(store.history.timeline))]); - let last = store.history.timeline[store.history.timeline.length - 1]; - let lastPatch = last && last.patches[last.patches.length - 1]; - if (lastPatch && lastPatch.op === "replace" && lastPatch.path[lastPatch.path.length - 1] === "displayName") { - return; - } - - const nodes = slideId && layout.slides[slideId]?.rows ? - Object.fromEntries( - Object.entries( - layout.slides[slideId]?.rows ?? { - }).map(([rowid, row]) => [rowid, { - "type": { "resolvedName": "Question" }, - "isCanvas": true, "props": { questionid: row.columns["column1"]["q"].ref }, - "displayName": "Question", - "custom": { "displayName": "Question" }, - "parent": "ROOT", - "hidden": false, - "nodes": [], - "linkedNodes": {} - }])) : { - "GBCxB0dj1x": { - "type": { "resolvedName": "GridNode" }, - "isCanvas": true, "props": {}, - "displayName": "Grid", - "custom": { "displayName": "Content" }, - "parent": "ROOT", - "hidden": false, - "nodes": [], - "linkedNodes": {} - } - }; - - const data = JSON.stringify( { - "ROOT": { - "type": { "resolvedName": "Container" }, - "isCanvas": true, - "props": { - "flexDirection": "column", - "alignItems": "flex-start", - "justifyContent": "flex-start", - "fillSpace": "no", - "padding": ["40", "40", "40", "40"], - "margin": ["0", "0", "0", "0"], - "background": { "r": 255, "g": 255, "b": 255, "a": 1 }, - "color": { "r": 0, "g": 0, "b": 0, "a": 1 }, - "shadow": 0, - "radius": 0, - "width": "90%", - "height": "auto" - }, - "displayName": "Container", - "custom": { - renderNode: { - canAddLeft: false, - canAddRight: false, - canAddTop: true, - canAddBottom: true - }, - slideId: slideId, - "displayName": slideId && slideId in layout.slides ? layout.slides[slideId].title : 'New Slide *' - }, - "hidden": false, - "nodes": Object.keys(nodes), - "linkedNodes": {} - }, - ...nodes - }); - console.log("CraftEditor10", [slideId, layout, JSON.parse(data)]); - - deserialize(data); - history.clear(); - - }, [slideId]); + if (slideId) { console.log("CraftEditor9", [layout.slides, slideId]);