|
|
@@ -1,32 +1,13 @@
|
|
|
-import * as React from "react";
|
|
|
-import {
|
|
|
- SimpleGrid,
|
|
|
- Text,
|
|
|
- Title,
|
|
|
- Group,
|
|
|
- Stack,
|
|
|
- Button,
|
|
|
- Space,
|
|
|
- Textarea,
|
|
|
- Tabs,
|
|
|
- HoverCard,
|
|
|
- ActionIcon,
|
|
|
- Center,
|
|
|
- Switch,
|
|
|
- Grid,
|
|
|
- Modal, Image
|
|
|
-} from "@mantine/core";
|
|
|
+import * as React from 'react';
|
|
|
+import {Center, Grid, Group, Space, Stack, Text, Title} from '@mantine/core';
|
|
|
|
|
|
-import {PrimitiveRegistry} from "../onion/primitive_delta";
|
|
|
-import {mockUuid} from "../onion/test_helpers";
|
|
|
-import {makeInfoHoverCardIcon} from "./help_icons";
|
|
|
-import {newVersionedModel, VersionedModelState, undoButtonHelpText} from "./versioned_model";
|
|
|
-import {newCorrespondence, undoButtonHelpTextCorr} from "./correspondence";
|
|
|
-import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
|
|
|
-import corr_csImage from "./assets/corr_cs.svg";
|
|
|
-import corr_asImage from "./assets/corr_as.svg";
|
|
|
-import corr_corrImage from "./assets/corr_corr.svg";
|
|
|
-import {Actionblock, Resultblock} from "./blocks";
|
|
|
+import {PrimitiveRegistry} from '../onion/primitive_delta';
|
|
|
+import {mockUuid} from '../onion/test_helpers';
|
|
|
+import {makeInfoHoverCardIcon} from './help_icons';
|
|
|
+import {newVersionedModel, undoButtonHelpText, VersionedModelState} from './versioned_model';
|
|
|
+import {newCorrespondence, undoButtonHelpTextCorr} from './correspondence';
|
|
|
+import {ManualRendererProps, newManualRenderer} from './manual_renderer';
|
|
|
+import {Actionblock, Resultblock} from './blocks';
|
|
|
|
|
|
export const demo_BM_description =
|
|
|
<>
|
|
|
@@ -34,42 +15,46 @@ export const demo_BM_description =
|
|
|
Blended Modeling
|
|
|
</Title>
|
|
|
<Text>
|
|
|
- This demo now introduces a second concrete syntax which is for sake of simplicity the same as the first one:
|
|
|
+ This demo introduces a second concrete syntax which is for sake of simplicity the same as the first one:
|
|
|
a rountangle editor.
|
|
|
- The difference to the Correspondence demo is that the AS can not be edited directly anymore, but only
|
|
|
+ The difference to the previous Correspondence demo is that the AS can not be edited directly anymore, but only
|
|
|
indirectly via one of the two concrete syntaxes.
|
|
|
</Text>
|
|
|
<Text>
|
|
|
- The connection between the different canvas on the right side is as follows:<br/>
|
|
|
- CS1 ↔ Corr1 ↔ AS ↔ Corr2 ↔ CS2<br/>
|
|
|
- Thus, we have now two Correspondence models that both creates correspondences between elements of the
|
|
|
+ The connection between the different canvas on the right side is as follows:
|
|
|
+ </Text>
|
|
|
+ <Text>
|
|
|
+ CS1 ↔ Corr1 ↔ AS ↔ Corr2 ↔ CS2
|
|
|
+ </Text>
|
|
|
+ <Text>
|
|
|
+ Thus, we have now two Correspondence models which both creates correspondences between elements of the
|
|
|
central AS and their linked CS.
|
|
|
</Text>
|
|
|
<Text>
|
|
|
- In consequence, now we also have two independent parsing and rendering functions for each CS that can be
|
|
|
+ In consequence, we also have two independent parsing and rendering functions for each CS which can be
|
|
|
triggered automatically or manually.
|
|
|
</Text>
|
|
|
<Text>
|
|
|
- With this scenario we simulate a blended modeling environment: One can create rountangles in the first CS.
|
|
|
+ With this scenario, we simulate a blended modeling environment: One can create rountangles in the first CS.
|
|
|
All changes are reflected immediately in the AS. At some point, the user switches over to the other CS. At
|
|
|
this point, the rendering from the AS to the second CS has to be triggered and, if necessary, missing
|
|
|
- information (e. g., layout information) has to be entered.
|
|
|
+ information, such as layout information, has to be entered.
|
|
|
</Text>
|
|
|
<Text>
|
|
|
Note, that the layout in the second CS can (and most likely will) differ from the layout of the first CS.
|
|
|
Nevertheless, both models are parsed into the same AS model and are thus semantically equivalent.
|
|
|
</Text>
|
|
|
<Text>
|
|
|
- From now on, the user can edit the rountangles in the second CS and - if the auto parsing is switched on -
|
|
|
+ From now on, the user can edit the rountangles in the second CS and – if the auto parsing is switched on –
|
|
|
all changes are reflected in the AS.
|
|
|
At some point, the user can switch back to CS 1, likely involving another rendering step to enter missing
|
|
|
information.
|
|
|
</Text>
|
|
|
<Text>
|
|
|
- Since all models are built upon our versioning approach, all changes are kept in Deltas and thus, each step
|
|
|
- can be undone/redone, one can jump to any previous version on any side and all conflicts on any level are
|
|
|
- detected and properly handled. This includes simultaneous changes on both sides! That means, collaborative
|
|
|
- blended modeling is directly supported!
|
|
|
+ Since all models are built upon our versioning approach, all changes are kept in Deltas and, thus, each step
|
|
|
+ can be undone or redone: One can navigate to any previous version on any side and all conflicts on any level are
|
|
|
+ detected and properly handled. This includes simultaneous changes on both sides. That means, collaborative
|
|
|
+ blended modeling is directly supported.
|
|
|
</Text>
|
|
|
<Text>
|
|
|
Switching off the "auto parsing" simulates asynchronous collaboration where several changes are accumulated
|
|
|
@@ -79,18 +64,18 @@ export const demo_BM_description =
|
|
|
One possible walk-through of this demo is very similar to the steps of the Correspondence demo:
|
|
|
</Text>
|
|
|
<Actionblock>
|
|
|
- 1. Create a Rountangle!
|
|
|
+ 1. Create a rountangle!
|
|
|
</Actionblock>
|
|
|
<Resultblock>
|
|
|
Automatic parsing recognizes this rountangle as a state in the AS with ID = 2 and connects both via the
|
|
|
Correspondence model by introducing a "connection node" with ID = 1.
|
|
|
</Resultblock>
|
|
|
<Resultblock>
|
|
|
- As visualized in the above picture, the Correspondence model contains the complete CS and AS model plus some
|
|
|
+ As visualized in the picture above, the Correspondence model contains the complete CS and AS model plus some
|
|
|
more information.
|
|
|
</Resultblock>
|
|
|
<Actionblock>
|
|
|
- 2. Draw a second Rountangle and move and resize it such that the new rountangle completely surrounds the
|
|
|
+ 2. Draw a second rountangle and move and resize it such that the new rountangle completely surrounds the
|
|
|
first one!
|
|
|
</Actionblock>
|
|
|
<Resultblock>
|
|
|
@@ -105,7 +90,7 @@ export const demo_BM_description =
|
|
|
The rendering process detects missing information while it tries to create a model for the second CS.
|
|
|
</Resultblock>
|
|
|
<Resultblock>
|
|
|
- A new dialog appears where one can position/size the rectangles in the second CS.
|
|
|
+ A new dialog appears where one can position and resize the rectangles in the second CS.
|
|
|
</Resultblock>
|
|
|
<Actionblock>
|
|
|
4. Position the new state according to the given constraints!
|
|
|
@@ -124,7 +109,6 @@ export const demo_BM_description =
|
|
|
Any conflicting Deltas are identified and the user has to choose, which of the non-conflicting version he/she wants to apply.
|
|
|
A merging view that allows to combine changes (merge action) is in preparation.
|
|
|
</Resultblock>
|
|
|
- <Space h="20px"/>
|
|
|
</>;
|
|
|
|
|
|
export function getDemoBM() {
|
