Start each new tab with a new default scenario

Author: benjaminaaron

frontend/src/App.js

@@ -30,7 +30,7 @@ const initialJson = {
                 weight: 100,
                 id: "main_tabset",
                 children: [
-                    { type: "tab", name: "KFZ-Zulassung Szenario 1", component: "placeholder" }
+                    { type: "tab", name: "Szenario 1", component: "placeholder" }
                 ]
             }
         ]
@@ -298,17 +298,17 @@ function ScenarioCanvas() {
 export default function App() {
     const [model] = useState(() => Model.fromJson(initialJson))
     const [, setTick] = useState(0)
-    const nextTabId = useRef(1)
+    const nextTabId = useRef(2)
 
     useEffect(() => {
         const listener = () => setTick(t => t + 1)
         model.addChangeListener(listener)
         return () => model.removeChangeListener(listener)
     }, [model])
 
-    const addTab = (name, targetId, location) => {
+    const addTab = (targetId, location) => {
         model.doAction(Actions.addNode(
-            {type: "tab", component: "placeholder", name: `${name} ${nextTabId.current++}`},
+            { type: "tab", component: "placeholder", name: `Szenario ${nextTabId.current++}` },
             targetId, location, location === DockLocation.CENTER ? -1 : 0
         ))
     }
@@ -317,7 +317,7 @@ export default function App() {
         if (node.getType() !== "tabset") return
         renderValues.stickyButtons.push(
             <button key="add-button" title="Add New Tab" className="flexlayout__tab_toolbar_button-custom"
-                    onClick={() => addTab("New Tab", node.getId(), DockLocation.CENTER)}>
+                    onClick={() => addTab(node.getId(), DockLocation.CENTER)}>
                 +
             </button>
         )
@@ -326,10 +326,7 @@ export default function App() {
     const factory = (node) => {
         const component = node.getComponent()
         if (component === "placeholder") {
-            if (node.getName() === "KFZ-Zulassung Szenario 1") {
-                return <ScenarioCanvas />
-            }
-            return <div className="placeholder">{node.getName()}</div>
+            return <ScenarioCanvas />
         }
         if (component === "menu") {
             const activeTabset = model.getActiveTabset()
@@ -339,16 +336,19 @@ export default function App() {
             // {activeTabset ? `Target: ${activeTabset.getName() || activeTabset.getId()}` : "Select a tabset first"}
             return (
                 <div>
-                    <button disabled={disabled} onClick={() => addTab("Row Tab", targetId, DockLocation.BOTTOM)}>
+                    <div>Use Case:</div>
+                    <strong>KFZ-Zulassung</strong>
+                    <br/><br/>
+                    <button disabled={disabled} onClick={() => addTab(targetId, DockLocation.BOTTOM)}>
                         split selected row
                     </button>
-                    <button disabled={disabled} onClick={() => addTab("Column Tab", targetId, DockLocation.RIGHT)}>
+                    <button disabled={disabled} onClick={() => addTab(targetId, DockLocation.RIGHT)}>
                         split selected column
                     </button>
-                    <button onClick={() => addTab("Global Row", rootId, DockLocation.BOTTOM)}>
+                    <button onClick={() => addTab(rootId, DockLocation.BOTTOM)}>
                         add new row
                     </button>
-                    <button onClick={() => addTab("Global Column", rootId, DockLocation.RIGHT)}>
+                    <button onClick={() => addTab(rootId, DockLocation.RIGHT)}>
                         add new column
                     </button>
                 </div>

frontend/src/styles.css

@@ -1,9 +1,9 @@
 #root {
     height: 100%;
+    font-family: Arial, serif;
 }
 
 .placeholder {
-    font-family: Arial, serif;
     height: 100%;
     display: flex;
     justify-content: center;