introduces new Start demo

package-lock.json

@@ -17,6 +17,7 @@
 				"lodash": "^4.17.21",
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
+				"react-icons": "^4.7.1",
 				"stream-browserify": "^3.0.0",
 				"style-loader": "^3.3.1",
 				"ts-node": "^10.9.1",
@@ -6175,6 +6176,14 @@
 				"react": "^18.2.0"
 			}
 		},
+		"node_modules/react-icons": {
+			"version": "4.7.1",
+			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+			"integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12732,6 +12741,12 @@
 				"scheduler": "^0.23.0"
 			}
 		},
+		"react-icons": {
+			"version": "4.7.1",
+			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+			"integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+			"requires": {}
+		},
 		"react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -33,6 +33,7 @@
 		"lodash": "^4.17.21",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-icons": "^4.7.1",
 		"stream-browserify": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"ts-node": "^10.9.1",

src/frontend/app.tsx

@@ -4,12 +4,14 @@ import {useColorScheme} from '@mantine/hooks';
 import {Allotment} from "allotment";
 import "allotment/dist/style.css";
 
-import {getDemoPD} from "./demo_pd";
-import {getDemoCorr} from "./demo_corr";
-import {getDemoBM} from "./demo_bm";
+import {demo_PD_description, getDemoPD} from "./demo_pd";
+import {demo_Corr_description, getDemoCorr} from "./demo_corr";
+import {demo_BM_description, getDemoBM} from "./demo_bm";
 import {Styledtabs} from "./styledtabs";
+import {demo_Start_description, getDemoStart} from "./demo_start";
 
 export function getApp() {
+    const DemoStart = getDemoStart();
     const DemoPD = getDemoPD();
     const DemoCorr = getDemoCorr();
     const DemoBM = getDemoBM();
@@ -20,126 +22,42 @@ export function getApp() {
 
         return <>
             <MantineProvider theme={{colorScheme: preferredColorScheme}} withGlobalStyles withNormalizeCSS>
-                <Styledtabs orientation="vertical" style={{height: '100%'}}>
+                <Styledtabs defaultValue="start" orientation="vertical" style={{height: '100%'}}>
                     <Allotment maxSize={'50%'}>
                         <Allotment.Pane preferredSize={250} minSize={250}>
                             <Stack style={{height: '100%', direction: 'column', gap: '0px'}}>
                                 <Title order={4}>Pick a Tutorial:</Title>
                                 <Tabs.List>
+                                    <Tabs.Tab style={{width: '100%', border: 0}} value="start">Start</Tabs.Tab>
                                     <Tabs.Tab style={{width: '100%', border: 0}} value="pd">Primitive Delta</Tabs.Tab>
                                     <Tabs.Tab style={{width: '100%', border: 0}} value="corr">Correspondence</Tabs.Tab>
                                     <Tabs.Tab style={{width: '100%', border: 0}} value="bm">Blended Modeling</Tabs.Tab>
                                 </Tabs.List>
                                 <Divider my="md"/>
                                 <div style={{overflow: 'hidden', padding: '0px 10px 0px 10px'}}>
+                                    <Tabs.Panel value="start" style={{height: '100%'}}>
+                                        {/* @ts-ignore */}
+                                        <ScrollArea style={{height: '100%'}}>
+                                            {demo_Start_description}
+                                        </ScrollArea>
+                                    </Tabs.Panel>
                                     <Tabs.Panel value="pd" style={{height: '100%'}}>
                                         {/* @ts-ignore */}
                                         <ScrollArea style={{height: '100%'}}>
-                                            Text Number 1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                                            diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-                                            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-                                            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-                                            amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-                                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-                                            diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                                            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-                                            amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-                                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-                                            diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                                            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-                                            amet.
-
-                                            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
-                                            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
-                                            et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
-                                            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
-                                            amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
-                                            ut laoreet dolore magna aliquam erat volutpat.
-
-                                            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-                                            suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
-                                            eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
-                                            vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
-                                            iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
-                                            dolore te feugait nulla facilisi.
-
-                                            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
-                                            doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
-                                            amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
-                                            ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
-                                            quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
-                                            ea commodo consequat.
-
-                                            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
-                                            molestie consequat, vel illum dolore eu feugiat nulla facilisis.
-
-                                            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-                                            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
-                                            ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-                                            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-                                            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-                                            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
-                                            ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam
-                                            diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt
-                                            justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea
-                                            sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum
-                                            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
-                                            invidunt ut labore et dolore magna aliquyam erat.
-
-                                            Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-                                            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-                                            takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-                                            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-                                            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-                                            takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-                                            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-                                            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-                                            takimata sanctus.
-
-                                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-                                            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-                                            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                                            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-                                            amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-                                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-                                            diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                                            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-                                            amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-                                            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-                                            diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                                            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-                                            amet.
-
-                                            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
-                                            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
-                                            et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
-                                            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
-                                            amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
-                                            ut laoreet dolore magna aliquam erat volutpat.
-
-                                            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-                                            suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
-                                            eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
-                                            vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
-                                            iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
-                                            dolore te feugait nulla facilisi.
-
-                                            Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
-                                            doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit
-                                            amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
-                                            ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
-                                            quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
-                                            ea commodo
+                                            {demo_PD_description}
                                         </ScrollArea>
                                     </Tabs.Panel>
-                                    <Tabs.Panel value="corr">
-                                        Text Number 2
+                                    <Tabs.Panel value="corr" style={{height: '100%'}}>
+                                        {/* @ts-ignore */}
+                                        <ScrollArea style={{height: '100%'}}>
+                                            {demo_Corr_description}
+                                        </ScrollArea>
                                     </Tabs.Panel>
-                                    <Tabs.Panel value="bm">
-                                        Text Number 3
+                                    <Tabs.Panel value="bm" style={{height: '100%'}}>
+                                        {/* @ts-ignore */}
+                                        <ScrollArea style={{height: '100%'}}>
+                                            {demo_BM_description}
+                                        </ScrollArea>
                                     </Tabs.Panel>
                                 </div>
                             </Stack>
@@ -148,6 +66,9 @@ export function getApp() {
                             <div style={{overflow: 'hidden', padding: '0px 10px 0px 10px'}}>
                                 {/* @ts-ignore */}
                                 <ScrollArea style={{height: '100%'}} offsetScrollbars>
+                                    <Tabs.Panel value="start">
+                                        <DemoStart/>
+                                    </Tabs.Panel>
                                     <Tabs.Panel value="pd">
                                         <DemoPD/>
                                     </Tabs.Panel>

src/frontend/demo_bm.tsx

@@ -8,6 +8,11 @@ import {newVersionedModel, VersionedModelState} from "./versioned_model";
 import {newCorrespondence} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 
+export const demo_BM_description =
+    <Text>
+      Text Number 1
+    </Text>;
+
 export function getDemoBM() {
   const generateUUID = mockUuid();
   const primitiveRegistry = new PrimitiveRegistry();

src/frontend/demo_corr.tsx

@@ -9,6 +9,11 @@ import {newCorrespondence} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import {makeInfoHoverCardIcon} from "./help_icons";
 
+export const demo_Corr_description =
+    <Text>
+      Text Number 1
+    </Text>;
+
 export function getDemoCorr() {
   const generateUUID = mockUuid();
   const primitiveRegistry = new PrimitiveRegistry();

src/frontend/demo_pd.tsx

@@ -5,6 +5,17 @@ import {Title, Text, Grid, Button, SimpleGrid, Group, Center, ScrollArea, Card,
 import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
 
+export const demo_PD_description =
+    <Text>
+        <Title order={4}>
+            Welcome to our demonstrator!
+        </Title>
+        <Text>
+            First, we would like to show the basic possibilities of the graphical editor and then dive into the different aspects of our new collaboration framework approach step by step.
+        </Text>
+    </Text>;
+
+
 import {
   newVersionedModel,
   VersionedModelState,

src/frontend/demo_start.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import {SimpleGrid, Text, Title, Stack, Center, Switch, Group, Space, Blockquote} from "@mantine/core";
+
+import {PrimitiveRegistry} from "../onion/primitive_delta";
+import {mockUuid} from "../onion/test_helpers";
+
+import {newVersionedModel, VersionedModelState} from "./versioned_model";
+import {newCorrespondence} from "./correspondence";
+import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
+import {makeInfoHoverCardIcon} from "./help_icons";
+import {MdOutlineDraw} from "react-icons/md";
+
+export const demo_Start_description =
+    <Text>
+      <Title order={4}>
+        Welcome to our demonstrator!
+      </Title>
+      <Text>
+        First, we would like to show the basic possibilities of the graphical editor and then dive into the different aspects of our new collaboration framework approach step by step.
+      </Text>
+      <Text>
+        Right to this text you can see three columns "Rountangle Editor", "Deltas", and "State Graph". In the Rountangle Editor, you can create Rountangles (by clicking on the grey area with the Alt-Key pressed, see also small info in the upper right corner).
+      </Text>
+      <Blockquote color="green" >
+        Create a Rountangle!
+      </Blockquote>
+
+    </Text>;
+
+export function getDemoStart() {
+  const generateUUID = mockUuid();
+  const primitiveRegistry = new PrimitiveRegistry();
+
+  const commonStuff = {generateUUID, primitiveRegistry};
+
+  const as = newVersionedModel({readonly: false, ...commonStuff});
+  const cs = newVersionedModel({readonly: false, ...commonStuff});
+  const corr = newCorrespondence({cs, as, ...commonStuff});
+
+  const {getModalManualRenderer} = newManualRenderer(commonStuff);
+
+  // returns functional react component
+  return function() {
+    const [csState, setCsState] = React.useState<VersionedModelState>(cs.initialState);
+
+    const [autoParse, setAutoParse] = React.useState<boolean>(true);
+    const [autoRender, setAutoRender] = React.useState<boolean>(false);
+
+    const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
+
+    const csReducer = cs.getReducer(setCsState);
+
+    const csComponents = cs.getReactComponents(csState, {
+      onUserEdit: (deltas, description) => {
+        const newVersion = csReducer.createAndGotoNewVersion(deltas, description);
+      },
+      onUndoClicked: csReducer.undo,
+      onRedoClicked: csReducer.redo,
+      onVersionClicked: csReducer.gotoVersion,
+    });
+
+    const deltaTabs = ["dependencyL1", "dependencyL0", "history"];
+
+    const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
+
+    return (<div style={{minWidth:1300}}>
+      {getModalManualRenderer(manualRendererState)}
+
+      <SimpleGrid cols={3}>
+        <div>
+          <Group position="apart">
+            <Title order={4}>Rountangle Editor</Title>
+          </Group>
+          <Space h="48px" />
+          <Stack>
+            {csComponents.rountangleEditor}
+            <Center>
+              {csComponents.undoRedoButtons}
+              <Space w="sm"/>
+              {makeInfoHoverCardIcon(undoButtonHelpText)}
+            </Center>
+          </Stack>
+        </div>
+        <div>
+          <Group position="center">
+            <Title order={4}>Deltas</Title>
+          </Group>
+          <Space h="sm" />
+          {csComponents.makeTabs("dependencyL1", deltaTabs)}
+        </div>
+        <div>
+          <Title order={4}>State Graph</Title>
+          <Space h="48px" />
+            {csComponents.graphStateComponent}
+        </div>
+      </SimpleGrid>
+    </div>);
+  }
+}

src/frontend/index.css

@@ -25,3 +25,9 @@ html,body, #root {
     background-color: #888;
   }
 }
+
+.mantine-Blockquote-root {
+    font-size: 14px;
+    border: 1px solid;
+    padding: 0px;
+}