From e730ec2b0802500c198062201ad785b32a0fa896 Mon Sep 17 00:00:00 2001 From: GiordanoT Date: Thu, 21 Sep 2023 11:43:56 +0200 Subject: [PATCH] memore UI --- src/common/U.ts | 8 ++ src/components/abstract/DockLayout.tsx | 2 +- src/components/abstract/tabs/InfoTab.tsx | 2 +- src/components/abstract/tabs/MetamodelTab.tsx | 2 +- src/components/abstract/tabs/ModelTab.tsx | 2 +- src/components/abstract/tabs/TestTab.tsx | 2 +- .../{toolbar => contextMenu}/ContextMenu.tsx | 95 +++++++++++-------- src/components/contextMenu/style.scss | 52 ++++++++++ src/components/forEndUser/Input.tsx | 77 ++++++++------- .../{toolbar => forEndUser}/ModellingIcon.tsx | 5 +- .../rightbar/styleEditor/StyleEditor.tsx | 13 +-- .../rightbar/viewsEditor/data/InfoData.tsx | 2 +- src/components/room/RoomAttacher.tsx | 2 +- src/components/room/RoomChecker.tsx | 2 +- src/components/toolbar/ToolBar.tsx | 4 +- src/components/toolbar/style.scss | 69 ++++++++------ src/components/toolbar/toolbar.scss | 41 -------- src/graph/graphElement/graphElement.tsx | 20 ++-- src/graph/vertex/Vertex.tsx | 23 ++--- src/memorec/api.ts | 6 +- src/model/logicWrapper/LModelElement.tsx | 4 +- src/redux/action/action.ts | 3 +- src/redux/reducer/reducer.ts | 5 +- src/redux/selectors/selectors.ts | 2 +- src/redux/store.tsx | 7 +- src/styles/view.scss | 3 +- 26 files changed, 246 insertions(+), 207 deletions(-) rename src/components/{toolbar => contextMenu}/ContextMenu.tsx (59%) create mode 100644 src/components/contextMenu/style.scss rename src/components/{toolbar => forEndUser}/ModellingIcon.tsx (85%) delete mode 100644 src/components/toolbar/toolbar.scss diff --git a/src/common/U.ts b/src/common/U.ts index 7134a3150..3c7629570 100644 --- a/src/common/U.ts +++ b/src/common/U.ts @@ -83,6 +83,14 @@ export class U { views.push('Pointer_ViewObject'); views.push('Pointer_ViewValue'); views.push('Pointer_ViewDefaultPackage'); + views.push('Pointer_ViewVoid'); + views.push('Pointer_ViewEdgeAssociation'); + views.push('Pointer_ViewEdgeDependency'); + views.push('Pointer_ViewEdgeInheritance'); + views.push('Pointer_ViewEdgeAggregation'); + views.push('Pointer_ViewEdgeComposition'); + views.push('Pointer_ViewEdgePoint'); + views.push('Pointer_ViewEdgePointSVG'); return views; } diff --git a/src/components/abstract/DockLayout.tsx b/src/components/abstract/DockLayout.tsx index 3cc7f81a5..ca10182d2 100644 --- a/src/components/abstract/DockLayout.tsx +++ b/src/components/abstract/DockLayout.tsx @@ -235,10 +235,10 @@ class DockLayoutComponent extends PureComponent{ // this.test, // this.iotEditor, this.structureEditor, + this.styleEditor, this.treeEditor, this.viewsEditor, this.viewpointEditor, - // this.styleEditor, this.console ]; layout.dockbox.children.push({tabs}); diff --git a/src/components/abstract/tabs/InfoTab.tsx b/src/components/abstract/tabs/InfoTab.tsx index 3a18b6755..6b8c89d20 100644 --- a/src/components/abstract/tabs/InfoTab.tsx +++ b/src/components/abstract/tabs/InfoTab.tsx @@ -5,7 +5,7 @@ import {DState, LGraph, LModel, DGraph, DModelElement, LModelElement} from "../. import {DefaultNode} from "../../../joiner/components"; import ToolBar from "../../toolbar/ToolBar"; import PendingEdge from "../../../graph/edge/PendingEdge"; -import ContextMenu from "../../toolbar/ContextMenu"; +import ContextMenu from "../../contextMenu/ContextMenu"; import EdgesManager from "../../../graph/edges/EdgesManager"; diff --git a/src/components/abstract/tabs/MetamodelTab.tsx b/src/components/abstract/tabs/MetamodelTab.tsx index 1d4dcdc8d..b8a67fd0d 100644 --- a/src/components/abstract/tabs/MetamodelTab.tsx +++ b/src/components/abstract/tabs/MetamodelTab.tsx @@ -5,7 +5,7 @@ import {DState, CreateElementAction, DGraph, LGraph, LModel} from "../../../join import {DefaultNode} from "../../../joiner/components"; import ToolBar from "../../toolbar/ToolBar"; import PendingEdge from "../../../graph/edge/PendingEdge"; -import ContextMenu from "../../toolbar/ContextMenu"; +import ContextMenu from "../../contextMenu/ContextMenu"; import EdgesManager from "../../../graph/edges/EdgesManager"; function MetamodelTabComponent(props: AllProps) { diff --git a/src/components/abstract/tabs/ModelTab.tsx b/src/components/abstract/tabs/ModelTab.tsx index 8fc2cf118..051a12040 100644 --- a/src/components/abstract/tabs/ModelTab.tsx +++ b/src/components/abstract/tabs/ModelTab.tsx @@ -5,7 +5,7 @@ import {DState, LGraph, LModel, DGraph, DModelElement, LModelElement, CreateElem import {DefaultNode} from "../../../joiner/components"; import ToolBar from "../../toolbar/ToolBar"; import PendingEdge from "../../../graph/edge/PendingEdge"; -import ContextMenu from "../../toolbar/ContextMenu"; +import ContextMenu from "../../contextMenu/ContextMenu"; import EdgesManager from "../../../graph/edges/EdgesManager"; diff --git a/src/components/abstract/tabs/TestTab.tsx b/src/components/abstract/tabs/TestTab.tsx index 2072414bf..a231af376 100644 --- a/src/components/abstract/tabs/TestTab.tsx +++ b/src/components/abstract/tabs/TestTab.tsx @@ -23,7 +23,7 @@ type AllProps = OwnProps & StateProps & DispatchProps; function mapStateToProps(state: DState, ownProps: OwnProps): StateProps { const ret: StateProps = {} as any; - ret.selected = LModelElement.fromPointer(state.selected[DUser.current] as any); + ret.selected = null; return ret; } diff --git a/src/components/toolbar/ContextMenu.tsx b/src/components/contextMenu/ContextMenu.tsx similarity index 59% rename from src/components/toolbar/ContextMenu.tsx rename to src/components/contextMenu/ContextMenu.tsx index 18bc9be17..7f0ee92f7 100644 --- a/src/components/toolbar/ContextMenu.tsx +++ b/src/components/contextMenu/ContextMenu.tsx @@ -1,7 +1,7 @@ -import React, {Dispatch, ReactElement, ReactNode, useEffect} from "react"; -import {connect} from "react-redux"; -import "./style.scss"; -import {CreateElementAction, SetRootFieldAction} from "../../redux/action/action"; +import React, {Dispatch, ReactElement, ReactNode, useEffect} from 'react'; +import {connect} from 'react-redux'; +import './style.scss'; +import {CreateElementAction, SetRootFieldAction} from '../../redux/action/action'; import { DValue, DViewElement, @@ -12,9 +12,10 @@ import { LPackage, LUser, LValue, DState, -} from "../../joiner"; -import MemoRec from "../../memorec/api"; -import {useStateIfMounted} from "use-state-if-mounted"; +} from '../../joiner'; +import MemoRec from '../../memorec/api'; +import {useStateIfMounted} from 'use-state-if-mounted'; +import ModellingIcon from "../forEndUser/ModellingIcon"; function ContextMenuComponent(props: AllProps) { @@ -35,7 +36,7 @@ function ContextMenuComponent(props: AllProps) { const close = () => { setSuggestedName(''); setMemorec(null); - SetRootFieldAction.new("contextMenu", {display: false, x: 0, y: 0}); + SetRootFieldAction.new('contextMenu', {display: false, x: 0, y: 0}); } const addView = () => { if(me) { @@ -43,14 +44,14 @@ function ContextMenuComponent(props: AllProps) { const dView: DViewElement = DViewElement.new(me.name + 'View', jsx); switch(me.className) { case 'DClass': - dView.query = `context DObject inv: self.instanceof.name = '${me.name}'`; + dView.query = `context DObject inv: self.instanceof.id = '${me.id}'`; break; case 'DAttribute': case 'DReference': - dView.query = `context DValue inv: self.instanceof.name = '${me.name}'`; + dView.query = `context DValue inv: self.instanceof.id = '${me.id}'`; break; - case 'DObject': - dView.query = `context DObject inv: self.id = '${me.id}'`; + default: + dView.query = `context ${me.className} inv: self.id = '${me.id}'`; break; } CreateElementAction.new(dView); @@ -86,55 +87,71 @@ function ContextMenuComponent(props: AllProps) { close(); } if(display && me && node) { - jsxList.push(
{me.className}
); - jsxList.push(
); + jsxList.push(
{me.className}
); + jsxList.push(
); /* Memorec */ if(me.className === 'DClass') - jsxList.push(
AI Suggest
); + jsxList.push(
AI Suggest
); if(me.className === 'DPackage') - jsxList.push(
AI Suggest
); - jsxList.push(
{close(); node.zIndex += 1;}} className={"col item"}>Up
); - jsxList.push(
{close(); node.zIndex -= 1;}} className={"col item"}>Down
); - jsxList.push(
{close(); addView();}} className={"col item"}>Add View
); - jsxList.push(
{close(); me?.delete();}} className={"col item"}>Delete
); + jsxList.push(
+ AI Suggest + +
); + jsxList.push(
{close(); node.zIndex += 1;}} className={'col item'}>Up
); + jsxList.push(
{close(); node.zIndex -= 1;}} className={'col item'}>Down
); + jsxList.push(
{close(); addView();}} className={'col item'}>Add View
); + jsxList.push(
{close(); me?.delete();}} className={'col item'}>Delete
); switch (me.className) { case 'DValue': if ((me as any as LValue).instanceof) jsxList.pop(); break; case 'DClass': jsxList.push(
{ close(); SetRootFieldAction.new('isEdgePending', {user: user.id, source: me.id}); - }} className={"col item"}>Extend
); + }} className={'col item'}>Extend); break; } } return(<> - -
- {jsxList.map((jsx, index) => { return
{jsx}
; })} +
+ {jsxList.map((jsx, index) => {return
{jsx}
})}
- - {(memorec) &&
- + {(memorec) &&
{(memorec && memorec.data?.map((obj, index) => { return (
-
setSuggestedName(obj.recommendedItem)}> - {obj.recommendedItem} : {Math.round(obj.score * 100) / 100} +
setSuggestedName(obj.recommendedItem)}> + {obj.recommendedItem} : + {Math.round(obj.score * 100) / 100}
) - })) } - + }))}
} - {(memorec && suggestedName) &&
- {(memorec?.type === 'class') ? <> -
suggestOnClass(true)} >attribute
-
suggestOnClass(false)} >reference
- :
suggestOnPackage()}> class
} -
- } + {(memorec && suggestedName) &&
+
close()} className={'memorec-popup'}> +
Add {suggestedName} as:
+ {(memorec.type === 'class') ? <> +
suggestOnClass(true)} className={'d-flex memorec-button'}> + + Attribute +
+
suggestOnClass(false)} className={'d-flex memorec-button mt-1'}> + + Reference +
+ : +
suggestOnPackage()} className={'d-flex memorec-button mt-1'}> + + Class +
+ } +
close()}> + Close +
+
+
} ); } interface OwnProps {} diff --git a/src/components/contextMenu/style.scss b/src/components/contextMenu/style.scss new file mode 100644 index 000000000..1fd637466 --- /dev/null +++ b/src/components/contextMenu/style.scss @@ -0,0 +1,52 @@ +.context-menu { + position: absolute; + z-index: 999; top: 9%; + box-shadow: 0 0 2px #C0C0C0; + background: whitesmoke; + border-radius: 4px; + border-style: solid; + border-width: 1px; + border-color: lightgray; + padding: 3px; +} + +.context-menu > div >.item { + cursor: pointer; + padding: 7px 30px 7px 30px; + font-size: 12px; +} + +.context-menu > div > .item:hover { + background-color: #e0e0e0; +} + +.memorec-overlay { + position: absolute; + height: 100%; + width: 100%; + top: 0; left: 0; + z-index: 999; + background-color: rgba(0, 0, 0, 0.4); +} +.memorec-popup { + position: absolute; + z-index: 999; + background: whitesmoke; + border-radius: 4px; + border-style: solid; + border-width: 1px; + border-color: lightgray; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + padding: 25px; +} +.memorec-button { + cursor: pointer; + background: white; + border-radius: 4px; + border-style: solid; + border-width: 1px; + border-color: lightgray; + padding: 5px; +} diff --git a/src/components/forEndUser/Input.tsx b/src/components/forEndUser/Input.tsx index 25e900275..bacf0b8bf 100644 --- a/src/components/forEndUser/Input.tsx +++ b/src/components/forEndUser/Input.tsx @@ -19,14 +19,17 @@ import {useStateIfMounted} from "use-state-if-mounted"; function InputComponent(props: AllProps) { // todo: data can be injected with UX, if field is present, can take type from a metainfo like __info_of__ const data = props.data; - const selected = props.selected; + // const selected = props.selected; const fathers = U.fatherChain(data as LModelElement); let editable = true; + + /* Uncomment this when we have user authentication: if a user is on a ME, it cannot be edited. for(let father of fathers) { const user = Object.keys(selected).find(key => selected[key]?.id === father); if(user && user !== DUser.current) editable = false; if(!editable) break; } + */ const getter = props.getter; const setter = props.setter; @@ -101,7 +104,7 @@ function InputComponent(props: AllProps) { let className = (props as any).className || ''; let style = (props as any).style || {}; props = {...props, className:'', style:{}} as any; - let input = @@ -130,58 +133,60 @@ function InputComponent(props: AllProps) { } InputComponent.cname = "InputComponent"; export interface InputOwnProps { -data: LPointerTargetable | DPointerTargetable | Pointer; -field: string; -getter?: (data: LPointerTargetable) => string; -setter?: (value: string|boolean) => void; -label?: string; -jsxLabel?: ReactNode; -type?: 'checkbox'|'color'|'date'|'datetime-local'|'email'|'file'|'image'|'month'| -'number'|'password'|'radio'|'range'|'tel'|'text'|'time'|'url'|'week'; -readonly?: boolean; -tooltip?: string | boolean | ReactElement; -hidden?: boolean; -autosize?: boolean; -inputClassName?: string; -asLabel?: boolean; -key?: React.Key | null; + data: LPointerTargetable | DPointerTargetable | Pointer; + field: string; + getter?: (data: LPointerTargetable) => string; + setter?: (value: string|boolean) => void; + label?: string; + jsxLabel?: ReactNode; + type?: 'checkbox'|'color'|'date'|'datetime-local'|'email'|'file'|'image'|'month'| + 'number'|'password'|'radio'|'range'|'tel'|'text'|'time'|'url'|'week'; + readonly?: boolean; + tooltip?: string | boolean | ReactElement; + hidden?: boolean; + autosize?: boolean; + inputClassName?: string; + asLabel?: boolean; + key?: React.Key | null; } interface StateProps { -data: LPointerTargetable & GObject; -selected: Dictionary, LModelElement|null>; - + data: LPointerTargetable & GObject; + // selected: Dictionary, LModelElement|null>; } interface DispatchProps { } type AllProps = Overlap>; function mapStateToProps(state: DState, ownProps: InputOwnProps): StateProps { -const ret: StateProps = {} as any; -const pointer: Pointer = typeof ownProps.data === 'string' ? ownProps.data : ownProps.data.id; -ret.data = LPointerTargetable.fromPointer(pointer); -const selected = state.selected; -ret.selected = {}; -for(let user of Object.keys(selected)) { -const pointer = selected[user]; -if(pointer) ret.selected[user] = LModelElement.fromPointer(pointer); -else ret.selected[user] = null; -} -return ret; + const ret: StateProps = {} as any; + const pointer: Pointer = typeof ownProps.data === 'string' ? ownProps.data : ownProps.data.id; + ret.data = LPointerTargetable.fromPointer(pointer); + /* + const selected = state.selected; + ret.selected = {}; + for(let user of Object.keys(selected)) { + const pointer = selected[user]; + if(pointer) ret.selected[user] = LModelElement.fromPointer(pointer); + else ret.selected[user] = null; + } + + */ + return ret; } function mapDispatchToProps(dispatch: Dispatch): DispatchProps { -const ret: DispatchProps = {}; -return ret; + const ret: DispatchProps = {}; + return ret; } export const InputConnected = connect( -mapStateToProps, -mapDispatchToProps + mapStateToProps, + mapDispatchToProps )(InputComponent); export function Input(props: InputOwnProps, children: (string | React.Component)[] = []): ReactElement { -return ; + return ; } InputComponent.cname = "InputComponent"; diff --git a/src/components/toolbar/ModellingIcon.tsx b/src/components/forEndUser/ModellingIcon.tsx similarity index 85% rename from src/components/toolbar/ModellingIcon.tsx rename to src/components/forEndUser/ModellingIcon.tsx index 3252e83ad..ef5ee8d32 100644 --- a/src/components/toolbar/ModellingIcon.tsx +++ b/src/components/forEndUser/ModellingIcon.tsx @@ -7,9 +7,10 @@ import EOperation from '../../static/icon/modelling/operation.png'; import EEnumerator from '../../static/icon/modelling/enumerator.png'; import ELiteral from '../../static/icon/modelling/literal.png'; -interface Props {name: string} +interface Props {name: string, className?: string} function ModellingIcon(props: Props) { const name = props.name; + const className = props.className ? props.className : ''; switch (name) { case 'package': return(); case 'object': @@ -21,7 +22,7 @@ function ModellingIcon(props: Props) { case 'literal': return(); case 'value': default: - return(); + return(); } } diff --git a/src/components/rightbar/styleEditor/StyleEditor.tsx b/src/components/rightbar/styleEditor/StyleEditor.tsx index 928b29ab6..1710ce9ab 100644 --- a/src/components/rightbar/styleEditor/StyleEditor.tsx +++ b/src/components/rightbar/styleEditor/StyleEditor.tsx @@ -5,15 +5,16 @@ import {LModelElement, LViewElement, LGraphElement, Input} from "../../../joine function StyleEditorComponent(props: AllProps) { const selected = props.selected; + const editable = true; if(!selected) return(<>); return(
{/**/} - - - - - - + + + + + + {/**/}
); } diff --git a/src/components/rightbar/viewsEditor/data/InfoData.tsx b/src/components/rightbar/viewsEditor/data/InfoData.tsx index 32b23b70c..303a8f702 100644 --- a/src/components/rightbar/viewsEditor/data/InfoData.tsx +++ b/src/components/rightbar/viewsEditor/data/InfoData.tsx @@ -37,7 +37,7 @@ function InfoData(props: Props) {
diff --git a/src/components/room/RoomAttacher.tsx b/src/components/room/RoomAttacher.tsx index 8dfec6bd3..d4126ff90 100644 --- a/src/components/room/RoomAttacher.tsx +++ b/src/components/room/RoomAttacher.tsx @@ -32,7 +32,7 @@ function RoomAttacherComponent(props: AllProps) { for(let action of data.actions.filter((item: GObject) => !actions[item.id])) { const receivedAction = Action.fromJson(action); if(action.token === DUser.token) continue; - console.log('FB: Executing Action:' + action.id + ' from ' + action.token); + console.log('FB: Executing Action', action); receivedAction.hasFired = receivedAction.hasFired - 1; receivedAction.fire(); actions[action.id] = true; setActions(actions); diff --git a/src/components/room/RoomChecker.tsx b/src/components/room/RoomChecker.tsx index e7e66478d..ce344241b 100644 --- a/src/components/room/RoomChecker.tsx +++ b/src/components/room/RoomChecker.tsx @@ -28,7 +28,7 @@ function RoomChecker() { ); - return(
Invalid code
) + else return(
Invalid code
) } export default RoomChecker; diff --git a/src/components/toolbar/ToolBar.tsx b/src/components/toolbar/ToolBar.tsx index cfcead740..2a79e8a5a 100644 --- a/src/components/toolbar/ToolBar.tsx +++ b/src/components/toolbar/ToolBar.tsx @@ -1,6 +1,6 @@ import React, {Dispatch, ReactElement, ReactNode} from "react"; import {connect} from "react-redux"; -import "./toolbar.scss"; +import "./style.scss"; import { DState, DGraphElement, @@ -33,7 +33,7 @@ import { LEdgePoint } from "../../joiner"; import {InitialVertexSizeObj} from "../../joiner/types"; -import ModellingIcon from "./ModellingIcon"; +import ModellingIcon from "../forEndUser/ModellingIcon"; interface ThisState {} diff --git a/src/components/toolbar/style.scss b/src/components/toolbar/style.scss index 665ebde39..32acde28a 100644 --- a/src/components/toolbar/style.scss +++ b/src/components/toolbar/style.scss @@ -1,32 +1,41 @@ -.context-menu { - position: absolute; - background: white; - width: 130px; - right: 0; - z-index: 9999; - border: 1px solid black; -} - -.context-menu > div >.item2 { - text-align: left; - cursor: pointer; - font-size: .8rem; -} -.context-menu > div >.item2:hover { - background:#f1f3f7; - color: #3f51b5; -} - -.context-menu > div > .title { - font-size: .8rem; - font-weight: bold; -} -.context-menu > div >.item { - text-align: center; - cursor: pointer; - font-size: .8rem; -} +@import "src/styles/variables"; -.context-menu > div > .item:hover { - background-color: whitesmoke; +.toolbar { + width: 10em; + background: whitesmoke; + z-index: 1; + box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999; + b { + font-size: 0.75rem; + color: rgba(0, 0, 0, 0.75); + } + >.toolbar-item { + display: flex; + cursor: pointer; + padding: 2px; + // border-left: 2px solid; + } + /* + .package { + border-left-color: $package-color; + } + .class { + border-left-color: $class-color; + } + .enumerator { + border-left-color: $enum-color; + } + .attribute, .reference, .operation, .feature, .parameter, .exception, .literal { + border-left-color: $feature-color; + } + .edgepoint, .edge, .vertex, .voidvertex, .voidedge{ + border-left-color: $vertex-color; + } + .annotation { + border-left-color: $annotation-color; + } + .object, .LObject { + border-left: 2px solid $object-color; + } + */ } diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss deleted file mode 100644 index 32acde28a..000000000 --- a/src/components/toolbar/toolbar.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import "src/styles/variables"; - -.toolbar { - width: 10em; - background: whitesmoke; - z-index: 1; - box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999; - b { - font-size: 0.75rem; - color: rgba(0, 0, 0, 0.75); - } - >.toolbar-item { - display: flex; - cursor: pointer; - padding: 2px; - // border-left: 2px solid; - } - /* - .package { - border-left-color: $package-color; - } - .class { - border-left-color: $class-color; - } - .enumerator { - border-left-color: $enum-color; - } - .attribute, .reference, .operation, .feature, .parameter, .exception, .literal { - border-left-color: $feature-color; - } - .edgepoint, .edge, .vertex, .voidvertex, .voidedge{ - border-left-color: $vertex-color; - } - .annotation { - border-left-color: $annotation-color; - } - .object, .LObject { - border-left: 2px solid $object-color; - } - */ -} diff --git a/src/graph/graphElement/graphElement.tsx b/src/graph/graphElement/graphElement.tsx index 515654f10..1217dd1fd 100644 --- a/src/graph/graphElement/graphElement.tsx +++ b/src/graph/graphElement/graphElement.tsx @@ -267,18 +267,18 @@ export class GraphElementComponent 0) return; + if(alreadySelected) return; const isEdgePending = (this.props.isEdgePending?.source); if (!isEdgePending) { this.select(); e.stopPropagation(); return; } if (!this.props.data) return; diff --git a/src/graph/vertex/Vertex.tsx b/src/graph/vertex/Vertex.tsx index d26920ea4..8ba0337ae 100644 --- a/src/graph/vertex/Vertex.tsx +++ b/src/graph/vertex/Vertex.tsx @@ -272,20 +272,8 @@ export class VertexComponent, LModelElement|null>; + //selected!: Dictionary, LModelElement|null>; + selected!: LModelElement|null; isEdgePending!: { user: LUser, source: LClass }; viewpoint!: LViewPoint } @@ -362,13 +351,15 @@ function mapStateToProps(state: DState, ownProps: OwnProps): StateProps { //superret.lastSelected = state._lastSelected?.modelElement; superret.lastSelected = state._lastSelected ? LPointerTargetable.from(state._lastSelected.modelElement) : null; - const selected = state.selected; + superret.selected = (state.selected) ? LModelElement.fromPointer(state.selected) : null; + /* Uncomment this when we have user authentication. superret.selected = {}; for(let user of Object.keys(selected)) { const pointer = selected[user]; if (pointer) superret.selected[user] = LModelElement.fromPointer(pointer); else superret.selected[user] = null; } + */ superret.isEdgePending = { diff --git a/src/memorec/api.ts b/src/memorec/api.ts index f41cc3cdd..a2b19fc22 100644 --- a/src/memorec/api.ts +++ b/src/memorec/api.ts @@ -5,8 +5,6 @@ import {MemoRecModel, MemoRecNamed, MemoRecObject} from "./types"; export default class MemoRec { static async post(path: string, obj: MemoRecObject): Promise { - console.clear(); - console.log(obj); return await axios.post('/memorec/' + path, obj); } @@ -32,7 +30,7 @@ export default class MemoRec { const response = await MemoRec.post('structuralFeatures', memorecObject); console.log(response); - const data: GObject[] = response.data.slice(0, 10); + const data: GObject[] = response.data; data.sort((a,b) => b.score - a.score); return {data: data, type: 'class'}; @@ -59,7 +57,7 @@ export default class MemoRec { const response = await MemoRec.post('classes', memorecObject); console.log(response); - const data:GObject[] = response.data.slice(0, 10); + const data:GObject[] = response.data; data.sort((a,b) => b.score - a.score); return {data: data, type: 'package'}; } diff --git a/src/model/logicWrapper/LModelElement.tsx b/src/model/logicWrapper/LModelElement.tsx index 6fe7cb350..503148103 100644 --- a/src/model/logicWrapper/LModelElement.tsx +++ b/src/model/logicWrapper/LModelElement.tsx @@ -2552,7 +2552,7 @@ export class DReference extends DPointerTargetable { // DStructuralFeature transient: boolean = false; unsettable: boolean = false; derived: boolean = false; - defaultValueLiteral!: string; + defaultValueLiteral: string = ''; parent: Pointer = []; father!: Pointer; instances: Pointer = []; @@ -2774,7 +2774,7 @@ export class DAttribute extends DPointerTargetable { // DStructuralFeature transient: boolean = false; unsettable: boolean = false; derived: boolean = false; - defaultValueLiteral!: string; + defaultValueLiteral: string = ''; //@obsolete_attribute() parent: Pointer = []; diff --git a/src/redux/action/action.ts b/src/redux/action/action.ts index d29e6dbbd..1ab80a7ad 100644 --- a/src/redux/action/action.ts +++ b/src/redux/action/action.ts @@ -13,7 +13,7 @@ import { store, U, unArr, - windoww + windoww, GObject } from "../../joiner"; // transactional-like start of storage modification @@ -212,6 +212,7 @@ export class Action extends RuntimeAccessibleClass { static fromJson(json: Json): Action{ let action = new Action('dummy', 'dummy'); + for(let key in action) delete (action as GObject)[key]; // resetting the action for(let key in json) (action as any)[key] = json[key]; return action; } diff --git a/src/redux/reducer/reducer.ts b/src/redux/reducer/reducer.ts index a0f71cbf4..76addd719 100644 --- a/src/redux/reducer/reducer.ts +++ b/src/redux/reducer/reducer.ts @@ -288,10 +288,9 @@ export function reducer(oldState: DState = initialState, action: Action): DState const ret = _reducer(oldState, action); if(ret === oldState) return oldState; if(!oldState?.room) return ret; - // action.sender === DUser.current - const ignoredFields = ['contextMenu', '_lastSelected', 'isCleaning']; + const ignoredFields = ['contextMenu', '_lastSelected', 'selected', 'isLoading', 'isCleaning']; if(action.token === DUser.token && !ignoredFields.includes(action.field)) { - console.log('FB: Sending Action:' + action.id + ' from ' + action.token); + console.log('FB: Sending Action', action); const parsedAction: JSON = JSON.parse(JSON.stringify(action)); Firebase.addAction(ret.room, parsedAction).then(); } diff --git a/src/redux/selectors/selectors.ts b/src/redux/selectors/selectors.ts index 6b9a8f1a4..4222e77e2 100644 --- a/src/redux/selectors/selectors.ts +++ b/src/redux/selectors/selectors.ts @@ -48,7 +48,7 @@ enum ViewEClassMatch { // this acts as a multiplier for explicit priority export class Selectors{ public static cname: string = "Selectors"; - static getSelected(): Dictionary, Pointer> { + static getSelected(): Pointer { const state = store.getState(); return state.selected; } diff --git a/src/redux/store.tsx b/src/redux/store.tsx index 2f49d66bc..64654bc74 100644 --- a/src/redux/store.tsx +++ b/src/redux/store.tsx @@ -104,7 +104,7 @@ export class DState extends DPointerTargetable{ return new Constructors(new DState('dwc'), undefined, false, undefined).DPointerTargetable().DState().end(); } - debug: boolean = false; + debug: boolean = true; logs: Pointer = []; models: Pointer = []; // Pointer[] = []; currentUser!: DUser; @@ -172,7 +172,8 @@ export class DState extends DPointerTargetable{ room: string = ''; isCleaning: boolean = false; // check if a room is being cleaned - selected: Dictionary, Pointer> = {}; + //selected: Dictionary, Pointer> = {}; + selected: Pointer = ''; iot: null|boolean = null; topics: string[] = []; @@ -290,7 +291,7 @@ function makeDefaultGraphViews(): DViewElement[] { let valueView: DViewElement = DViewElement.new('Value', DV.valueView(), undefined, '', '', '', [DValue.cname]); const defaultPackage: DViewElement = DViewElement.new('DefaultPackage', DV.defaultPackage()); - defaultPackage.query = `context DPackage inv: self.name = 'todo default pkg'`; + defaultPackage.query = `context DPackage inv: self.name = 'defaultPKG'`; return [modelView, packageView, classView, enumView, attributeView, referenceView, operationView, literalView, objectView, valueView, defaultPackage, voidView, ...edgeViews, edgePointView, edgePointViewSVG]; } diff --git a/src/styles/view.scss b/src/styles/view.scss index 32c1c1367..2b3178b9f 100644 --- a/src/styles/view.scss +++ b/src/styles/view.scss @@ -16,6 +16,7 @@ .Graph.DModel { //damiano: was just .model and breaking things position: absolute; + margin: 3px; height: $fill; width: $fill; background-image: @@ -131,7 +132,7 @@ } .selected-by-me { - outline: 1px dashed black; + outline: 1px dashed rgba(0, 0, 0, 0.3); } .selected-by-others {