Added json tab to demo layouts

nealus · nealus · commit 45803a7cb188 · 2022-04-27T18:53:39.000+01:00
diff --git a/examples/demo/App.tsx b/examples/demo/App.tsx
@@ -1,20 +1,23 @@
 import * as React from "react";
+import * as Prism from "prismjs";
 import { createRoot } from "react-dom/client";
 import { Action, Actions, BorderNode, CLASSES, DockLocation, DragDrop, DropInfo, IJsonTabNode, ILayoutProps, ITabRenderValues, ITabSetRenderValues, Layout, Model, Node, TabNode, TabSetNode } from "../../src/index";
 import { NewFeatures } from "./NewFeatures";
 import { showPopup } from "./PopupMenu";
 import { TabStorage } from "./TabStorage";
 import { Utils } from "./Utils";
+import "prismjs/themes/prism-coy.css";
 
 var fields = ["Name", "Field1", "Field2", "Field3", "Field4", "Field5"];
 
 const ContextExample = React.createContext('');
 
-class App extends React.Component<any, { layoutFile: string | null, model: Model | null, adding: boolean, fontSize: string, realtimeResize: boolean }> {
+class App extends React.Component<any, { layoutFile: string | null, model: Model | null, json?: string, adding: boolean, fontSize: string, realtimeResize: boolean }> {
 
     loadingLayoutName?: string;
     nextGridIndex: number = 1;
     showingPopupMenu: boolean = false;
+    htmlTimer?: any = null;
 
     constructor(props: any) {
         super(props);
@@ -40,6 +43,18 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
         // Model.toTypescriptInterfaces();
     }
 
+    onModelChange = () => {
+        if (this.htmlTimer) {
+            clearTimeout(this.htmlTimer);
+        }
+        this.htmlTimer = setTimeout(() => {
+            const jsonText = JSON.stringify(this.state.model!.toJson(), null, "\t");
+            const html = Prism.highlight(jsonText, Prism.languages.javascript, 'javascript');
+            this.setState({ json: html });
+            this.htmlTimer = null;
+        }, 500);
+    }
+
     save() {
         var jsonStr = JSON.stringify(this.state.model!.toJson(), null, "\t");
         localStorage.setItem(this.state.layoutFile!, jsonStr);
@@ -77,7 +92,8 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
         // you can control where nodes can be dropped
         //model.setOnAllowDrop(this.allowDrop);
 
-        this.setState({ layoutFile: this.loadingLayoutName!, model: model });
+        const html = Prism.highlight(jsonText, Prism.languages.javascript, 'javascript');
+        this.setState({ layoutFile: this.loadingLayoutName!, model: model, json: html });
     }
 
     allowDrop = (dragNode: (TabNode | TabSetNode), dropInfo: DropInfo) => {
@@ -253,7 +269,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
 
         // const n = this.state.model?.getNodeById("#750f823f-8eda-44b7-a887-f8b287ace2c8");
         // (this.refs.layout as Layout).moveTabWithDragAndDrop(n as TabSetNode, "move tabset");
-        
+
         // (this.refs.layout as Layout).moveTabWithDragAndDrop(node as TabNode);
     }
 
@@ -269,7 +285,10 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
 
         var component = node.getComponent();
 
-        if (component === "grid") {
+        if (component === "json") {
+            return (<pre style={{ tabSize: "20px" }} dangerouslySetInnerHTML={{ __html: this.state.json! }} />);
+        }
+        else if (component === "grid") {
             if (node.getExtraData().data == null) {
                 // create data in node extra data first time accessed
                 node.getExtraData().data = this.makeFakeData();
@@ -408,6 +427,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
                 factory={this.factory}
                 font={{ size: this.state.fontSize }}
                 onAction={this.onAction}
+                onModelChange={this.onModelChange}
                 titleFactory={this.titleFactory}
                 iconFactory={this.iconFactory}
                 onRenderTab={this.onRenderTab}
@@ -455,6 +475,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
                         <select className="toolbar_control" onChange={this.onSelectLayout}>
                             <option value="default">Default</option>
                             <option value="newfeatures">New Features</option>
+                            <option value="simple">Simple</option>
                             <option value="sub">SubLayout</option>
                             <option value="complex">Complex</option>
                             <option value="headers">Headers</option>
diff --git a/examples/demo/layouts/default.layout b/examples/demo/layouts/default.layout
@@ -65,7 +65,12 @@
 					"name": "Terminal",
 					"component": "grid",
                     "icon":"images/terminal.svg"
-				}
+				},
+                {
+                    "type": "tab",
+                    "name": "Layout JSON",
+                    "component": "json"
+                }
 			]
 		},
 		 {
diff --git a/examples/demo/layouts/headers.layout b/examples/demo/layouts/headers.layout
@@ -10,19 +10,13 @@
 			{
 				"type": "tabset",
 				"weight": 50,
-				"name":"Navigation",
+				"name":"Header 1",
 				"selected": 0,
-				"enableDrag":false,
-				"enableDrop":false,
-				"enableSplit":false,
 				"children": [
 					{
 						"type": "tab",
-						"name": "FX",
-						"component":"grid",
-						"config": {
-							"id": "1"
-						}
+						"name": "One",
+						"component":"grid"
 					}
 				]
 			},
@@ -34,7 +28,7 @@
 				"children": [
 					{
 						"type": "tab",
-						"name": "FI",
+						"name": "Two",
 						"component":"grid",
 						"config": {
 							"id": "2"
@@ -45,19 +39,13 @@
 			{
 				"type": "tabset",
 				"weight": 50,
-				"name":"Blotters",
+				"name":"Header 2",
 				"selected": 0,
-				"enableDrag":false,
-				"enableDrop":false,
-				"enableSplit":false,
 				"children": [
 					{
 						"type": "tab",
-						"name": "FX",
-						"component":"grid",
-						"config": {
-							"id": "1"
-						}
+						"name": "Three",
+						"component":"grid"
 					}
 				]
 			}
diff --git a/examples/demo/layouts/newfeatures.layout b/examples/demo/layouts/newfeatures.layout
@@ -60,7 +60,12 @@
 					"enableClose":false,
 					"name": "Terminal",
 					"component": "grid"
-				}
+				},
+                {
+                    "type": "tab",
+                    "name": "Layout JSON",
+                    "component": "json"
+                }
 			]
 		},
 		 {
diff --git a/examples/demo/layouts/simple.layout b/examples/demo/layouts/simple.layout
@@ -0,0 +1,38 @@
+{
+	"global": {},
+	"borders": [],
+	"layout": {
+		"type": "row",
+		"id": "1",
+		"children": [
+			{
+				"type": "tabset",
+				"id": "2",
+				"weight": 50,
+				"children": [
+					{
+						"type": "tab",
+						"id": "3",
+						"name": "Layout JSON",
+						"component": "json"
+					}
+				],
+				"active": true
+			},
+			{
+				"type": "tabset",
+				"id": "4",
+				"weight": 50,
+				"children": [
+					{
+						"type": "tab",
+						"id": "5",
+						"name": "Grid 1",
+						"component": "grid",
+						"icon": "images/article.svg"
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/package.json b/package.json
@@ -43,16 +43,18 @@
         "extends": "react-app"
     },
     "devDependencies": {
-        "@types/react": "^18.0.5",
-        "@types/react-dom": "^18.0.1",
         "@cypress/react": "^5.12.4",
         "@cypress/webpack-dev-server": "^1.8.4",
         "@types/node": "^17.0.24",
+        "@types/prismjs": "^1.26.0",
+        "@types/react": "^18.0.5",
+        "@types/react-dom": "^18.0.1",
         "@types/uuid": "^8.3.3",
         "css-loader": "^6.7.1",
         "cypress": "^9.5.4",
         "html-webpack-plugin": "^5.5.0",
         "prettier": "^2.6.2",
+        "prismjs": "^1.28.0",
         "react-scripts": "5.0.1",
         "sass": "^1.50.0",
         "source-map-loader": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
@@ -1841,6 +1841,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.4.tgz#5d9b63132df54d8909fce1c3f8ca260fdd693e17"
   integrity sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA==
 
+"@types/prismjs@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
@@ -7977,6 +7982,11 @@ pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+prismjs@^1.28.0:
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
+  integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -8138,13 +8148,13 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
-  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
+react-dom@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
+  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.21.0"
+    scheduler "^0.22.0"
 
 react-error-overlay@^6.0.11:
   version "6.0.11"
@@ -8221,10 +8231,10 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react@^18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
-  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
+react@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -8570,10 +8580,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+scheduler@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
 

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,12 @@`
`65`	`65`	`"name": "Terminal",`
`66`	`66`	`"component": "grid",`
`67`	`67`	`"icon":"images/terminal.svg"`
`68`		`- }`
	`68`	`+ },`
	`69`	`+ {`
	`70`	`+ "type": "tab",`
	`71`	`+ "name": "Layout JSON",`
	`72`	`+ "component": "json"`
	`73`	`+ }`
`69`	`74`	`]`
`70`	`75`	`},`
`71`	`76`	`{`
Original file line number	Diff line number	Diff line change
`@@ -10,19 +10,13 @@`
`10`	`10`	`{`
`11`	`11`	`"type": "tabset",`
`12`	`12`	`"weight": 50,`
`13`		`- "name":"Navigation",`
	`13`	`+ "name":"Header 1",`
`14`	`14`	`"selected": 0,`
`15`		`- "enableDrag":false,`
`16`		`- "enableDrop":false,`
`17`		`- "enableSplit":false,`
`18`	`15`	`"children": [`
`19`	`16`	`{`
`20`	`17`	`"type": "tab",`
`21`		`- "name": "FX",`
`22`		`- "component":"grid",`
`23`		`- "config": {`
`24`		`- "id": "1"`
`25`		`- }`
	`18`	`+ "name": "One",`
	`19`	`+ "component":"grid"`
`26`	`20`	`}`
`27`	`21`	`]`
`28`	`22`	`},`
`@@ -34,7 +28,7 @@`
`34`	`28`	`"children": [`
`35`	`29`	`{`
`36`	`30`	`"type": "tab",`
`37`		`- "name": "FI",`
	`31`	`+ "name": "Two",`
`38`	`32`	`"component":"grid",`
`39`	`33`	`"config": {`
`40`	`34`	`"id": "2"`
`@@ -45,19 +39,13 @@`
`45`	`39`	`{`
`46`	`40`	`"type": "tabset",`
`47`	`41`	`"weight": 50,`
`48`		`- "name":"Blotters",`
	`42`	`+ "name":"Header 2",`
`49`	`43`	`"selected": 0,`
`50`		`- "enableDrag":false,`
`51`		`- "enableDrop":false,`
`52`		`- "enableSplit":false,`
`53`	`44`	`"children": [`
`54`	`45`	`{`
`55`	`46`	`"type": "tab",`
`56`		`- "name": "FX",`
`57`		`- "component":"grid",`
`58`		`- "config": {`
`59`		`- "id": "1"`
`60`		`- }`
	`47`	`+ "name": "Three",`
	`48`	`+ "component":"grid"`
`61`	`49`	`}`
`62`	`50`	`]`
`63`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,12 @@`
`60`	`60`	`"enableClose":false,`
`61`	`61`	`"name": "Terminal",`
`62`	`62`	`"component": "grid"`
`63`		`- }`
	`63`	`+ },`
	`64`	`+ {`
	`65`	`+ "type": "tab",`
	`66`	`+ "name": "Layout JSON",`
	`67`	`+ "component": "json"`
	`68`	`+ }`
`64`	`69`	`]`
`65`	`70`	`},`
`66`	`71`	`{`