|
@@ -5,8 +5,8 @@ import {OnionContext} from "../onion_context";
|
|
|
import {PrimitiveRegistry} from 'onion/primitive_delta';
|
|
|
import {mockUuid} from 'onion/test_helpers';
|
|
|
import {InfoHoverCard} from '../info_hover_card';
|
|
|
-import {newVersionedModel, undoButtonHelpText, VersionedModelState} from '../versioned_model/single_model';
|
|
|
-import {newCorrespondence, undoButtonHelpTextCorr} from '../versioned_model/correspondence';
|
|
|
+import {newOnion, undoButtonHelpText} from "../versioned_model/single_model2";
|
|
|
+import {newCorrespondence, undoButtonHelpTextCorr} from '../versioned_model/correspondence2';
|
|
|
import {ManualRendererProps, ModalManualRenderer} from '../versioned_model/manual_renderer';
|
|
|
import {Actionblock, Resultblock} from './blocks';
|
|
|
|
|
@@ -113,85 +113,52 @@ export const demo_BM_description =
|
|
|
</>;
|
|
|
|
|
|
export function getDemoBM() {
|
|
|
- const as = newVersionedModel({readonly: false});
|
|
|
- const cs1 = newVersionedModel({readonly: false});
|
|
|
- const cs2 = newVersionedModel({readonly: false});
|
|
|
- const corr1 = newCorrespondence({cs: cs1, as});
|
|
|
- const corr2 = newCorrespondence({cs: cs2, as});
|
|
|
+ const primitiveRegistry = new PrimitiveRegistry();
|
|
|
+ const generateUUID = mockUuid();
|
|
|
|
|
|
- // const {getModalManualRenderer} = newManualRenderer();
|
|
|
+ const as = newOnion({readonly: false, primitiveRegistry});
|
|
|
|
|
|
- // returns functional react component
|
|
|
- return function () {
|
|
|
- const [asState, setAsState] = React.useState<VersionedModelState>(as.initialState);
|
|
|
- const [cs1State, setCs1State] = React.useState<VersionedModelState>(cs1.initialState);
|
|
|
- const [cs2State, setCs2State] = React.useState<VersionedModelState>(cs2.initialState);
|
|
|
- const [corr1State, setCorr1State] = React.useState<VersionedModelState>(corr1.initialState);
|
|
|
- const [corr2State, setCorr2State] = React.useState<VersionedModelState>(corr2.initialState);
|
|
|
-
|
|
|
- const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
|
|
|
+ function createCs() {
|
|
|
+ const cs = newOnion({readonly: false, primitiveRegistry});
|
|
|
+ const corr = newCorrespondence({cs, as, primitiveRegistry, generateUUID});
|
|
|
+ return {cs, corr};
|
|
|
+ }
|
|
|
|
|
|
- const [autoParse1, setAutoParse1] = React.useState<boolean>(true);
|
|
|
- const [autoParse2, setAutoParse2] = React.useState<boolean>(true);
|
|
|
- const [autoRender1, setAutoRender1] = React.useState<boolean>(false);
|
|
|
- const [autoRender2, setAutoRender2] = React.useState<boolean>(false);
|
|
|
+ const css = [createCs(), createCs()];
|
|
|
|
|
|
- const onionContext = React.useContext(OnionContext);
|
|
|
+ // returns functional react component
|
|
|
+ return function () {
|
|
|
|
|
|
- const asReducer = as.getReducer(setAsState);
|
|
|
- const cs1Reducer = cs1.getReducer(setCs1State);
|
|
|
- const cs2Reducer = cs2.getReducer(setCs2State);
|
|
|
- const corr1Reducer = corr1.getReducer(setCorr1State, cs1Reducer, asReducer);
|
|
|
- const corr2Reducer = corr2.getReducer(setCorr2State, cs2Reducer, asReducer);
|
|
|
+ // const [autoParse, setAutoParse] = React.useState(css.map(()=>true));
|
|
|
+ // const [autoRender, setAutoRender] = React.useState(css.map(()=>false));
|
|
|
|
|
|
- const asComponents = as.getReactComponents(asState, setAsState, {
|
|
|
+ const onionAs = as.useOnion(reducer => ({
|
|
|
onUserEdit: (deltas, description) => {
|
|
|
- const newVersion = asReducer.createAndGotoNewVersion(deltas, description);
|
|
|
- if (autoRender1) {
|
|
|
- corr1Reducer.renderExistingVersion(newVersion, setManualRendererState, onionContext);
|
|
|
- }
|
|
|
- if (autoRender2) {
|
|
|
- corr2Reducer.renderExistingVersion(newVersion, setManualRendererState, onionContext);
|
|
|
- }
|
|
|
+ const newVersion = onionAs.reducer.createAndGotoNewVersion(deltas, description);
|
|
|
+ onions.forEach(o => {
|
|
|
+ if (o.autoRender) {
|
|
|
+ o.onionCorr.reducer.renderExistingVersion(newVersion, setManualRendererState);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- onUndoClicked: asReducer.undo,
|
|
|
- onRedoClicked: asReducer.redo,
|
|
|
- onVersionClicked: asReducer.gotoVersion,
|
|
|
- });
|
|
|
+ }));
|
|
|
+ const onions = css.map(({cs, corr}, i) => {
|
|
|
+ const [autoParse, setAutoParse] = React.useState(true);
|
|
|
+ const [autoRender, setAutoRender] = React.useState(false);
|
|
|
|
|
|
- const cs1Components = cs1.getReactComponents(cs1State, setCs1State, {
|
|
|
- onUserEdit: (deltas, description) => {
|
|
|
- const newVersion = cs1Reducer.createAndGotoNewVersion(deltas, description);
|
|
|
- if (autoParse1) {
|
|
|
- corr1Reducer.parseExistingVersion(newVersion, onionContext);
|
|
|
- }
|
|
|
- },
|
|
|
- onUndoClicked: cs1Reducer.undo,
|
|
|
- onRedoClicked: cs1Reducer.redo,
|
|
|
- onVersionClicked: cs1Reducer.gotoVersion,
|
|
|
- });
|
|
|
- const cs2Components = cs2.getReactComponents(cs2State, setCs2State, {
|
|
|
- onUserEdit: (deltas, description) => {
|
|
|
- const newVersion = cs2Reducer.createAndGotoNewVersion(deltas, description);
|
|
|
- if (autoParse2) {
|
|
|
- corr2Reducer.parseExistingVersion(newVersion, onionContext);
|
|
|
- }
|
|
|
- },
|
|
|
- onUndoClicked: cs2Reducer.undo,
|
|
|
- onRedoClicked: cs2Reducer.redo,
|
|
|
- onVersionClicked: cs2Reducer.gotoVersion,
|
|
|
+ const onionCs = cs.useOnion(reducer => ({
|
|
|
+ onUserEdit: (deltas, description) => {
|
|
|
+ const newVersion = reducer.createAndGotoNewVersion(deltas, description);
|
|
|
+ if (autoParse) {
|
|
|
+ onionCorr.reducer.parseExistingVersion(newVersion);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }));
|
|
|
+ const onionCorr = corr.useCorrespondence(onionCs.reducer, onionAs.reducer);
|
|
|
+ return {onionCs, onionCorr, autoParse, setAutoParse, autoRender, setAutoRender};
|
|
|
});
|
|
|
|
|
|
- const corr1Components = corr1.getReactComponents(corr1State, setCorr1State, {
|
|
|
- onUndoClicked: corr1Reducer.gotoVersion,
|
|
|
- onRedoClicked: corr1Reducer.gotoVersion,
|
|
|
- onVersionClicked: corr1Reducer.gotoVersion,
|
|
|
- });
|
|
|
- const corr2Components = corr2.getReactComponents(corr2State, setCorr2State, {
|
|
|
- onUndoClicked: corr2Reducer.gotoVersion,
|
|
|
- onRedoClicked: corr2Reducer.gotoVersion,
|
|
|
- onVersionClicked: corr2Reducer.gotoVersion,
|
|
|
- });
|
|
|
+ const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
|
|
|
|
|
|
const csTabs = ["editor", "state", "history", "deltaL1", "deltaL0"];
|
|
|
const corrTabs = ["state", "history", "deltaL1", "deltaL0"];
|
|
@@ -202,52 +169,52 @@ export function getDemoBM() {
|
|
|
}
|
|
|
|
|
|
return (<div style={{minWidth: 2200}}>
|
|
|
+ <OnionContext.Provider value={{generateUUID, primitiveRegistry}}>
|
|
|
<ModalManualRenderer manualRendererState={manualRendererState}/>
|
|
|
-
|
|
|
<Grid columns={5} grow>
|
|
|
<Grid.Col span={1}>
|
|
|
- {centeredCaption("Concrete Syntax 1")}
|
|
|
+ {centeredCaption("Concrete Syntax 0")}
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
- {centeredCaption("Correspondence 1")}
|
|
|
+ {centeredCaption("Correspondence 0")}
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
{centeredCaption("Abstract Syntax")}
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
- {centeredCaption("Correspondence 2")}
|
|
|
+ {centeredCaption("Correspondence 1")}
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
- {centeredCaption("Concrete Syntax 2")}
|
|
|
+ {centeredCaption("Concrete Syntax 1")}
|
|
|
</Grid.Col>
|
|
|
|
|
|
<Grid.Col span={1}>
|
|
|
<Group position="right">
|
|
|
- {corr1Reducer.getCaptionWithParseButton(autoParse1, setAutoParse1, cs1.getCurrentVersion())}
|
|
|
+ {onions[0].onionCorr.components.getCaptionWithParseButton(onions[0].autoParse, onions[0].setAutoParse, css[0].cs.getCurrentVersion())}
|
|
|
</Group>
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
<Group position="apart">
|
|
|
- {corr1Reducer.getCaptionWithRenderButton(autoRender1, setAutoRender1, as.getCurrentVersion(), setManualRendererState)}
|
|
|
- {corr2Reducer.getCaptionWithRenderButton(autoRender2, setAutoRender2, as.getCurrentVersion(), setManualRendererState, "right")}
|
|
|
+ {onions[0].onionCorr.components.getCaptionWithRenderButton(onions[0].autoRender, onions[0].setAutoRender, as.getCurrentVersion(), setManualRendererState)}
|
|
|
+ {onions[1].onionCorr.components.getCaptionWithRenderButton(onions[1].autoRender, onions[1].setAutoRender, as.getCurrentVersion(), setManualRendererState, "right")}
|
|
|
</Group>
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
<Group position="left">
|
|
|
- {corr2Reducer.getCaptionWithParseButton(autoParse2, setAutoParse2, cs2.getCurrentVersion(), "left")}
|
|
|
+ {onions[1].onionCorr.components.getCaptionWithParseButton(onions[1].autoParse, onions[1].setAutoParse, css[1].cs.getCurrentVersion(), "left")}
|
|
|
</Group>
|
|
|
</Grid.Col>
|
|
|
|
|
|
<Grid.Col span={1}>
|
|
|
<Stack>
|
|
|
- {cs1Components.makeTabs("editor", csTabs)}
|
|
|
- {cs1Components.makeTabs("history", csTabs)}
|
|
|
+ {onions[0].onionCs.components.makeTabs("editor", csTabs)}
|
|
|
+ {onions[0].onionCs.components.makeTabs("history", csTabs)}
|
|
|
<Center>
|
|
|
- {cs1Components.undoRedoButtons}
|
|
|
+ {onions[0].onionCs.components.undoRedoButtons}
|
|
|
<Space w="sm"/>
|
|
|
<InfoHoverCard>
|
|
|
{undoButtonHelpText}
|
|
@@ -257,10 +224,10 @@ export function getDemoBM() {
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
<Stack>
|
|
|
- {corr1Components.makeTabs("state", corrTabs)}
|
|
|
- {corr1Components.makeTabs("history", corrTabs)}
|
|
|
+ {onions[0].onionCorr.components.makeTabs("state", corrTabs)}
|
|
|
+ {onions[0].onionCorr.components.makeTabs("history", corrTabs)}
|
|
|
<Center>
|
|
|
- {corr1Components.undoRedoButtons}
|
|
|
+ {onions[0].onionCorr.components.undoRedoButtons}
|
|
|
<Space w="sm"/>
|
|
|
<InfoHoverCard>
|
|
|
{undoButtonHelpText}
|
|
@@ -272,10 +239,10 @@ export function getDemoBM() {
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
<Stack>
|
|
|
- {asComponents.makeTabs("state", asTabs)}
|
|
|
- {asComponents.makeTabs("history", asTabs)}
|
|
|
+ {onionAs.components.makeTabs("state", asTabs)}
|
|
|
+ {onionAs.components.makeTabs("history", asTabs)}
|
|
|
<Center>
|
|
|
- {asComponents.undoRedoButtons}
|
|
|
+ {onionAs.components.undoRedoButtons}
|
|
|
<Space w="sm"/>
|
|
|
<InfoHoverCard>
|
|
|
{undoButtonHelpText}
|
|
@@ -285,10 +252,10 @@ export function getDemoBM() {
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
<Stack>
|
|
|
- {corr2Components.makeTabs("state", corrTabs)}
|
|
|
- {corr2Components.makeTabs("history", corrTabs)}
|
|
|
+ {onions[1].onionCorr.components.makeTabs("state", corrTabs)}
|
|
|
+ {onions[1].onionCorr.components.makeTabs("history", corrTabs)}
|
|
|
<Center>
|
|
|
- {corr2Components.undoRedoButtons}
|
|
|
+ {onions[1].onionCorr.components.undoRedoButtons}
|
|
|
<Space w="sm"/>
|
|
|
<InfoHoverCard>
|
|
|
{undoButtonHelpText}
|
|
@@ -300,10 +267,10 @@ export function getDemoBM() {
|
|
|
</Grid.Col>
|
|
|
<Grid.Col span={1}>
|
|
|
<Stack>
|
|
|
- {cs2Components.makeTabs("editor", csTabs)}
|
|
|
- {cs2Components.makeTabs("history", csTabs)}
|
|
|
+ {onions[1].onionCs.components.makeTabs("editor", csTabs)}
|
|
|
+ {onions[1].onionCs.components.makeTabs("history", csTabs)}
|
|
|
<Center>
|
|
|
- {cs2Components.undoRedoButtons}
|
|
|
+ {onions[1].onionCs.components.undoRedoButtons}
|
|
|
<Space w="sm"/>
|
|
|
<InfoHoverCard>
|
|
|
{undoButtonHelpText}
|
|
@@ -312,6 +279,7 @@ export function getDemoBM() {
|
|
|
</Stack>
|
|
|
</Grid.Col>
|
|
|
</Grid>
|
|
|
+ </OnionContext.Provider>
|
|
|
</div>);
|
|
|
}
|
|
|
}
|