From 428e3dcd58ae6b2cb47057feb5d30dd01613ffee Mon Sep 17 00:00:00 2001
From: GiordanoT <giordanotinella@gmail.com>
Date: Fri, 20 Oct 2023 08:46:36 +0200
Subject: [PATCH] tree editor and selected fixes

---
 src/App.tsx                                   |   2 +-
 src/components/abstract/DockLayout.tsx        |  32 +----
 src/components/abstract/tabs/TestTab.tsx      |  18 ++-
 src/components/contextMenu/ContextMenu.tsx    | 114 ++++++++----------
 src/components/forEndUser/Input.tsx           |   3 -
 src/components/forEndUser/Tree.tsx            |  16 ++-
 src/components/forEndUser/style.scss          |   5 +
 .../rightbar/structureEditor/Structure.tsx    |   4 +-
 .../structureEditor/StructureEditor.tsx       |  25 ++--
 .../rightbar/treeEditor/treeEditor.tsx        |  66 +++-------
 .../rightbar/treeEditor/treeEditorOLD.tsx     |  82 +++++++++++++
 src/components/toolbar/ToolBar.tsx            |  31 +++--
 src/graph/graphElement/graphElement.tsx       |  35 ++----
 src/graph/vertex/Vertex.tsx                   |  26 ++--
 src/joiner/classes.ts                         |  27 +++--
 src/joiner/types.ts                           |   4 +-
 src/model/dataStructure/GraphDataElements.tsx |   2 +-
 src/redux/selectors/selectors.ts              |   3 +-
 src/redux/store.tsx                           |   4 +-
 19 files changed, 248 insertions(+), 251 deletions(-)
 create mode 100644 src/components/rightbar/treeEditor/treeEditorOLD.tsx

diff --git a/src/App.tsx b/src/App.tsx
index cc7ecebba..b50e4b57a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ function App(props: AllProps) {
 
     return(<div className={'d-flex flex-column h-100 p-1 REACT-ROOT' + (props.debug ? " debug" : "")}
                 onClick={e => statehistory.globalcanundostate = true}>
-        {/*<Navbar />*/}
+        <Navbar />
         <Dock />
         <Loader />
     </div>);
diff --git a/src/components/abstract/DockLayout.tsx b/src/components/abstract/DockLayout.tsx
index d33621d18..b17c8f41f 100644
--- a/src/components/abstract/DockLayout.tsx
+++ b/src/components/abstract/DockLayout.tsx
@@ -16,7 +16,7 @@ import {
     Pointer,
     Selectors,
     U,
-    LPackage, SetRootFieldAction
+    LPackage, SetRootFieldAction, Dictionary, DUser
 } from '../../joiner';
 import StructureEditor from "../rightbar/structureEditor/StructureEditor";
 import TreeEditor from "../rightbar/treeEditor/treeEditor";
@@ -29,6 +29,7 @@ import ModelTab from "./tabs/ModelTab";
 import InfoTab from "./tabs/InfoTab";
 import TestTab from "./tabs/TestTab";
 import IotTab from "./tabs/IotTab";
+import {FakeStateProps} from "../../joiner/types";
 
 export class TabDataMaker {
     static metamodel (model: LModel | DModel): TabData {
@@ -88,7 +89,6 @@ class DockLayoutComponent extends PureComponent<AllProps, ThisState>{
     private viewpointEditor = { id: '6', title: 'Viewpoints', group: 'group2', closable: false, content: <ViewpointEditor /> };
     private console = { id: '7', title: 'Console', group: 'group2', closable: false, content: <Console /> };
 
-    private selected = this.props.selected;
     private views = this.props.views;
     private moveOnStructure = false;
     private moveOnViews = false;
@@ -116,7 +116,6 @@ class DockLayoutComponent extends PureComponent<AllProps, ThisState>{
 
     shouldComponentUpdate(newProps: Readonly<AllProps>, newState: Readonly<ThisState>, newContext: any): boolean {
         const oldProps = this.props;
-        // if(oldProps.selected !== newProps.selected) { this.moveOnStructure = true; return true; }
         if (oldProps.views !== newProps.views) { this.moveOnViews = true; return true; }
 
         const deltaM2 = U.arrayDifference(oldProps.m2, newProps.m2);
@@ -131,7 +130,7 @@ class DockLayoutComponent extends PureComponent<AllProps, ThisState>{
         for(let model of addedM1) this.OPEN(model);
         for(let pointer of removedM1) this.CLOSE(pointer);
 
-        return !!(deltaM2.added.length || deltaM1.added.length || this.props.iot);
+        return !!(deltaM2.added.length || deltaM1.added.length);
 
     }
 
@@ -147,20 +146,6 @@ class DockLayoutComponent extends PureComponent<AllProps, ThisState>{
                 this.moveOnStructure = false;
                 return;
             }
-            if(this.props.iot && !this.iotLoaded) {
-                const layout = this.dock.getLayout();
-                const tabs = [
-                    this.iotEditor,
-                    this.structureEditor,
-                    this.treeEditor,
-                    this.viewsEditor,
-                    this.viewpointEditor,
-                    this.console,
-                ];
-                layout.dockbox.children[1] = {tabs};
-                this.dock.setLayout(layout);
-                this.iotLoaded = true;
-            }
         }
     }
 
@@ -197,15 +182,13 @@ class DockLayoutComponent extends PureComponent<AllProps, ThisState>{
 
     async addMetamodel(evt: undefined|React.MouseEvent<HTMLButtonElement>, context: DockContext, panelData: PanelData, model?: DModel) {
         let name = 'metamodel_' + 0;
-        let names: (string)[] = Selectors.getAllMetamodels().map(m => m.name);
+        let names: string[] = Selectors.getAllMetamodels().map(m => m.name);
         name = U.increaseEndingNumber(name, false, false, (newName) => names.indexOf(newName) >= 0)
         const dModel = model || DModel.new(name, undefined, true);
         const lModel: LModel = LModel.fromD(dModel);
         const dPackage = lModel.addChild('package');
         const lPackage: LPackage = LPackage.fromD(dPackage);
         lPackage.name = 'default';
-        SetRootFieldAction.new('selected', lPackage.id, '', true);
-        SetRootFieldAction.new('_lastSelected', {modelElement: lPackage.id});
         this.OPEN(dModel);
     }
     addModel(evt: React.MouseEvent<HTMLButtonElement>, context: DockContext, panelData: PanelData) {
@@ -268,24 +251,19 @@ class DockLayoutComponent extends PureComponent<AllProps, ThisState>{
 
 interface OwnProps { }
 interface StateProps {
-    selected: Pointer<DModelElement, 0, 1, LModelElement>;
     views: number;
     m2: Pointer<DModel, 0, 'N', LModel>;
     m1: Pointer<DModel, 0, 'N', LModel>;
-    iot: null|boolean;
 }
 interface DispatchProps {}
 type AllProps = OwnProps & StateProps & DispatchProps;
 
 
 function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
-    const ret: StateProps = {} as any;
-    const selected = state._lastSelected?.modelElement;
-    if(selected) ret.selected = selected;
+    const ret: StateProps = {} as FakeStateProps;
     ret.views = state.viewelements.length;
     ret.m2 = state.m2models;
     ret.m1 = state.m1models;
-    ret.iot = state.iot;
     return ret;
 }
 
diff --git a/src/components/abstract/tabs/TestTab.tsx b/src/components/abstract/tabs/TestTab.tsx
index a231af376..c19e1547e 100644
--- a/src/components/abstract/tabs/TestTab.tsx
+++ b/src/components/abstract/tabs/TestTab.tsx
@@ -1,29 +1,25 @@
 import React, {Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
-import {DState, DUser, GObject, LModelElement, Selectors, U} from "../../../joiner";
-import {useStateIfMounted} from "use-state-if-mounted";
+import {DState} from "../../../joiner";
+import {FakeStateProps, Selected} from "../../../joiner/types";
 
 function TestTabComponent(props: AllProps) {
 
     const selected = props.selected;
 
-    const click = () => {
-    }
-
-    return(<div>
-        <button onClick={click}>click</button>
-        {selected?.id}
+    return(<div className={'p-2 border border-dark'}>
+        {JSON.stringify(selected)}
     </div>);
 }
 interface OwnProps {}
-interface StateProps {selected: LModelElement|null}
+interface StateProps {selected: Selected}
 interface DispatchProps {}
 type AllProps = OwnProps & StateProps & DispatchProps;
 
 
 function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
-    const ret: StateProps = {} as any;
-    ret.selected = null;
+    const ret: StateProps = {} as FakeStateProps;
+    ret.selected = state.selected;
     return ret;
 }
 
diff --git a/src/components/contextMenu/ContextMenu.tsx b/src/components/contextMenu/ContextMenu.tsx
index bc35c2e21..c19ad9fba 100644
--- a/src/components/contextMenu/ContextMenu.tsx
+++ b/src/components/contextMenu/ContextMenu.tsx
@@ -3,35 +3,36 @@ import {connect} from 'react-redux';
 import './style.scss';
 import {CreateElementAction, SetRootFieldAction} from '../../redux/action/action';
 import {
+    DState,
+    DUser,
     DValue,
     DViewElement,
     GObject,
     LClass,
-    LGraphElement,
-    LNamedElement,
+    LGraphElement, LNamedElement,
     LPackage,
     LUser,
-    LValue, DState, U,
+    LValue,
+    Selectors,
+    U,
 } from '../../joiner';
 import MemoRec from '../../memorec/api';
 import {useStateIfMounted} from 'use-state-if-mounted';
 import ModellingIcon from "../forEndUser/ModellingIcon";
+import {FakeStateProps} from "../../joiner/types";
 
 function ContextMenuComponent(props: AllProps) {
 
     const user = props.user;
     const display = props.display;
     const position = props.position;
-    const me = props.me; //refer to selected
     const node = props.node;
+    const data: LNamedElement = LNamedElement.fromPointer(node?.model?.id);
     const jsxList: ReactNode[] = [];
     const [memorec, setMemorec] = useStateIfMounted<{data:GObject[], type:'class'|'package'}|null>(null);
     const [suggestedName, setSuggestedName] = useStateIfMounted('');
 
-
-    useEffect(() => {
-        if(!display) close();
-    },[display])
+    if(!node || !data) return(<></>);
 
     const close = () => {
         setSuggestedName('');
@@ -39,78 +40,69 @@ function ContextMenuComponent(props: AllProps) {
         SetRootFieldAction.new('contextMenu', {display: false, x: 0, y: 0});
     }
     const addView = async() => {
-        if(me) {
-            const jsx =`<div className={'root bg-white'}>Hello World!</div>`;
-            const dView: DViewElement = DViewElement.new(me.name + 'View', jsx);
-            switch(me.className) {
-                case 'DClass':
-                    dView.query = `context DObject inv: self.instanceof.id = '${me.id}'`;
-                    break;
-                case 'DAttribute':
-                case 'DReference':
-                    dView.query = `context DValue inv: self.instanceof.id = '${me.id}'`;
-                    break;
-                default:
-                    dView.query = `context ${me.className} inv: self.id = '${me.id}'`;
-                    break;
-            }
-            CreateElementAction.new(dView);
-            SetRootFieldAction.new('stackViews', [], '', false);
-            await U.sleep(1);
-            SetRootFieldAction.new('stackViews', dView.id, '+=', true);
+        const jsx =`<div className={'root bg-white'}>Hello World!</div>`;
+        const dView: DViewElement = DViewElement.new(data.name + 'View', jsx);
+        switch(data.className) {
+            case 'DClass':
+                dView.query = `context DObject inv: self.instanceof.id = '${data.id}'`;
+                break;
+            case 'DAttribute':
+            case 'DReference':
+                dView.query = `context DValue inv: self.instanceof.id = '${data.id}'`;
+                break;
+            default:
+                dView.query = `context ${data.className} inv: self.id = '${data.id}'`;
+                break;
         }
-    }
-    const structuralFeature = async () => {
-        if(!me) return;
-        const data = await MemoRec.structuralFeature(me);
-        setMemorec(data);
+        CreateElementAction.new(dView);
+        SetRootFieldAction.new('stackViews', [], '', false);
+        await U.sleep(1);
+        SetRootFieldAction.new('stackViews', dView.id, '+=', true);
     }
 
-    const classifier = async() => {
-        if (!me) return;
-        const data = await MemoRec.classifier(me);
-        setMemorec(data);
-    }
+    const structuralFeature = async () => {setMemorec(await MemoRec.structuralFeature(data))}
+
+    const classifier = async() => {setMemorec(await MemoRec.classifier(data))}
 
     const suggestOnClass = (isAttribute:boolean) => {
-        if(!me) return;
-        const lClass: LClass = LClass.fromPointer(me.id);
+        const lClass: LClass = LClass.fromPointer(data.id);
         if(isAttribute) lClass.addAttribute(suggestedName);
         else lClass.addReference(suggestedName);
-        //add attribute/refence to class
         close();
 
     }
     const suggestOnPackage = () => {
-        if(!me) return;
-        const lPackage: LPackage = LPackage.fromPointer(me.id);
+        const lPackage: LPackage = LPackage.fromPointer(data.id);
         lPackage.addClass(suggestedName);
-        //add class to package
         close();
     }
-    if(display && me && node) {
-        jsxList.push(<div className={'mt-1 col text-center'}><b>{me.className}</b></div>);
+    if(display) {
+        jsxList.push(<div className={'mt-1 col text-center'}><b>{data.className}</b></div>);
         jsxList.push(<hr className={'my-1'} />);
 
         /* Memorec */
-        if(me.className === 'DClass')
+        if(data.className === 'DClass')
             jsxList.push(<div onClick={structuralFeature} className={'col item'}>AI Suggest <i
                 className='bi bi-arrow-right-short'></i></div>);
-        if(me.className === 'DPackage')
+        if(data.className === 'DPackage')
             jsxList.push(<div onClick={classifier} className={'col item'}>
                 AI Suggest
                 <i className={'ms-1 bi bi-arrow-right'}></i>
             </div>);
+        jsxList.push(<div onClick={() => {
+            close();
+            SetRootFieldAction.new(`selected.${DUser.current}`, '', '', false);
+        }} className={'col item'}>Deselect</div>);
         jsxList.push(<div onClick={() => {close(); node.zIndex += 1;}} className={'col item'}>Up</div>);
         jsxList.push(<div onClick={() => {close(); node.zIndex -= 1;}} className={'col item'}>Down</div>);
-        jsxList.push(<div onClick={() => {close(); addView();}} className={'col item'}>Add View</div>);
-        jsxList.push(<div onClick={() => {close(); me?.delete();}} className={'col item'}>Delete</div>);
-        switch (me.className) {
-            case 'DValue': if ((me as any as LValue).instanceof) jsxList.pop(); break;
+        jsxList.push(<div onClick={async () => {close(); await addView();}} className={'col item'}>Add View</div>);
+        jsxList.push(<div onClick={() => {close(); data.delete(); node.delete();}} className={'col item'}>Delete</div>);
+        switch (data.className) {
+            case 'DValue': if ((data as any as LValue).instanceof) jsxList.pop(); break;
             case 'DClass':
                 jsxList.push(<div onClick={() => {
                     close();
-                    SetRootFieldAction.new('isEdgePending', {user: user.id, source: me.id});
+                    SetRootFieldAction.new('isEdgePending', {user: user.id, source: data.id});
                 }} className={'col item'}>Extend</div>);
                 break;
         }
@@ -161,22 +153,20 @@ interface StateProps {
     user: LUser,
     display: boolean,
     position: {x: number, y: number},
-    me?: LNamedElement,
-    node?: LGraphElement,
+    node: LGraphElement|null,
 }
 interface DispatchProps {}
 type AllProps = OwnProps & StateProps & DispatchProps;
 
 
 function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
-    const user = LUser.from(state.currentUser);
-    const display = state.contextMenu.display;
-    const position = {x: state.contextMenu.x, y: state.contextMenu.y}
-    const mePointer = state._lastSelected?.modelElement;
-    const me: LNamedElement | undefined = mePointer ? LNamedElement.fromPointer(mePointer) : undefined;
-    const nodePointer = state._lastSelected?.node;
-    const node: LGraphElement | undefined = nodePointer ? LGraphElement.fromPointer(nodePointer) : undefined;
-    const ret: StateProps = { user, display, position, me, node };
+    const ret: StateProps = {} as FakeStateProps;
+    ret.user = LUser.from(state.currentUser);
+    ret.display = state.contextMenu.display;
+    ret.position = {x: state.contextMenu.x, y: state.contextMenu.y};
+    const nodeid = state.selected[DUser.current];
+    if(nodeid) ret.node = LGraphElement.fromPointer(nodeid);
+    else ret.node = null;
     return ret;
 }
 
diff --git a/src/components/forEndUser/Input.tsx b/src/components/forEndUser/Input.tsx
index c2ef9d0a2..7a7f70cf9 100644
--- a/src/components/forEndUser/Input.tsx
+++ b/src/components/forEndUser/Input.tsx
@@ -41,8 +41,6 @@ function InputComponent(props: AllProps) {
         }
     })
 
-
-    if (!data) return(<></>);
     const readOnly = (props.readonly !== undefined) ? props.readonly : data.id.indexOf("Pointer_View") !== -1 // more efficient than U.getDefaultViewsID().includes(data.id);
     const type = (props.type) ? props.type : 'text';
     const label: string|undefined = props.label;
@@ -105,7 +103,6 @@ function InputComponent(props: AllProps) {
                        type={type} value={value} onChange={change} onBlur={blur}
                        checked={(['checkbox', 'radio'].includes(type)) ? !!value : undefined} />
 
-    // style={{cursor: (tooltip) ? 'help' : 'auto'}}
     return(<label className={'p-1'} {...otherprops}
                   style={{display: (jsxLabel || label) ? 'flex' : 'block', cursor: tooltip ? 'help' : 'auto', ...((props as any).style || {})}}>
 
diff --git a/src/components/forEndUser/Tree.tsx b/src/components/forEndUser/Tree.tsx
index ff0974da4..80e8b732b 100644
--- a/src/components/forEndUser/Tree.tsx
+++ b/src/components/forEndUser/Tree.tsx
@@ -1,5 +1,5 @@
 import React, {ReactNode, useEffect} from "react";
-import {GObject, LModelElement, LNamedElement, U} from '../../joiner';
+import {DUser, GObject, LModelElement, LNamedElement, SetRootFieldAction, U} from '../../joiner';
 import {useStateIfMounted} from 'use-state-if-mounted';
 import './style.scss';
 import {useEffectOnce} from "usehooks-ts";
@@ -34,15 +34,23 @@ function DataTree(props: DataTreeProps) {
     const depth = props.depth;
     const setFilter = props.setFilter;
 
+    const click = (e: React.MouseEvent) => {
+        const nodeid = data.node?.id;
+        if(!nodeid) return;
+        SetRootFieldAction.new(`selected.${DUser.current}`, nodeid, '', true);
+    }
+
     return(<div>
         <div className={'d-flex tree'}>
             <button className={'btn'} onClick={setFilter}>
-                {(hide) ? <i className={'bi bi-eye-slash'}></i> : <i className={'bi bi-eye'}></i>}
+                {(data.children.length > 0 && hide) ? <i className={'bi bi-chevron-up'} /> : <i className={'bi bi-chevron-down'} />}
             </button>
             <label className={data.className + ' ms-1 text-capitalize my-auto'}>
                 <b>{data.className}</b>:
             </label>
-            <label className={'ms-1 my-auto'}>{(data.name) ? data.name : 'unnamed'}</label>
+            <label tabIndex={-1} role={'button'} onClick={click} className={'name ms-1 my-auto'}>
+                {(data.name) ? data.name : 'unnamed'}
+            </label>
         </div>
         {!hide && data.children.map((child: LModelElement) => {
             return(<div className={'ms-2'}>
@@ -66,7 +74,7 @@ function HtmlTree(props: HtmlTreeProps) {
             return(<>
                 <div className={'d-flex'}>
                     <button className={'btn'} onClick={setFilter}>
-                        {(hide) ? <i className={'bi bi-eye-slash'}></i> : <i className={'bi bi-eye'}></i>}
+                        {(children.length > 0 && hide) ? <i className={'bi bi-chevron-up'} /> : <i className={'bi bi-chevron-down'} />}
                     </button>
                     <label className={'ms-1 my-auto'}>
                         {element.props['label'] ? element.props['label'] : 'unnamed'}
diff --git a/src/components/forEndUser/style.scss b/src/components/forEndUser/style.scss
index 513bf1b9f..a86bde4d6 100644
--- a/src/components/forEndUser/style.scss
+++ b/src/components/forEndUser/style.scss
@@ -10,8 +10,13 @@
   & > .DEnumLiteral > b {color: $literal-color}
   & > .DOperation > b {color: $operation-color}
   & > .DParameter > b {color: $parameter-color}
+  & > label.name:hover {
+    text-decoration: underline;
+  }
 }
 
+
+
 .my-tooltip {
   position: absolute;
   z-index: 999;
diff --git a/src/components/rightbar/structureEditor/Structure.tsx b/src/components/rightbar/structureEditor/Structure.tsx
index dfac4ff40..27a04d323 100644
--- a/src/components/rightbar/structureEditor/Structure.tsx
+++ b/src/components/rightbar/structureEditor/Structure.tsx
@@ -194,10 +194,9 @@ export default class Structure {
             <Value value={lValue} />
         </div>);
     }
-    public static Editor(lModelElement: LModelElement|undefined) : ReactNode {
+    public static Editor(lModelElement: LModelElement|null) : ReactNode {
         if(lModelElement){
             switch (lModelElement.className){
-                default: break;
                 case "DModel": return Structure.ModelEditor(lModelElement);
                 case "DPackage": return Structure.PackageEditor(lModelElement);
                 case "DClass": return Structure.ClassEditor(lModelElement);
@@ -208,6 +207,7 @@ export default class Structure {
                 case "DOperation": return Structure.OperationEditor(lModelElement);
                 case "DObject" : return Structure.ObjectEditor(lModelElement);
                 case "DValue" : return Structure.ValueEditor(lModelElement);
+                default: break;
             }
         }
         return <div></div>;
diff --git a/src/components/rightbar/structureEditor/StructureEditor.tsx b/src/components/rightbar/structureEditor/StructureEditor.tsx
index b0e6fcdd9..bf8dd2285 100644
--- a/src/components/rightbar/structureEditor/StructureEditor.tsx
+++ b/src/components/rightbar/structureEditor/StructureEditor.tsx
@@ -9,7 +9,7 @@ import {
     LGraphElement,
     LModelElement,
     LViewElement,
-    Pointer, U,
+    Pointer, U, DUser,
 } from "../../../joiner";
 import Structure from "./Structure";
 
@@ -23,27 +23,18 @@ class StructureEditorComponent extends PureComponent<AllProps, ThisState> {
     }
 
     render(): ReactNode{
-        const lModelElement: LModelElement | undefined = this.props.selected?.modelElement;
+        const data: LModelElement|null = (this.props.node?.model) ? this.props.node?.model : null;
         return <div className={"px-4"}>
             <div className={"mt-3"}>
-                {Structure.Editor(lModelElement)}
+                {Structure.Editor(data)}
             </div>
-            {/*
-            <hr className={'mt-5'} />
-            <div>Exportable Json</div>
-            <span style={{whiteSpace: "pre"}}>{JSON.stringify(lModelElement?.generateEcoreJson(), null, "\t")}</span>
-            <hr className={'mt-5'} />
-            <div>Internal state</div>
-            <span style={{whiteSpace: "pre"}}>{JSON.stringify(lModelElement, null, '\t')}</span>
-            */}
         </div>;
     }
 }
 
 interface OwnProps {}
 interface StateProps {
-    selectedid?: { node: Pointer<DGraphElement, 1, 1>; view: Pointer<DViewElement, 1, 1>; modelElement: Pointer<DModelElement, 0, 1> };
-    selected?: { node: LGraphElement; view: LViewElement; modelElement?: LModelElement };
+    node: LGraphElement|null
 }
 interface DispatchProps {}
 
@@ -51,11 +42,9 @@ type AllProps = OwnProps & StateProps & DispatchProps;
 
 function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
     const ret: StateProps = {} as any;
-    ret.selectedid = state._lastSelected;
-    ret.selected = ret.selectedid && {
-        node: DPointerTargetable.wrap(state.idlookup[ret.selectedid.node]) as LGraphElement,
-        view: DPointerTargetable.wrap(state.idlookup[ret.selectedid.view]) as LViewElement,
-        modelElement: ret.selectedid.modelElement ? DPointerTargetable.wrap<DPointerTargetable, LModelElement>(state.idlookup[ret.selectedid.modelElement]) : undefined };
+    const nodeid = state.selected[DUser.current];
+    if(nodeid) ret.node = LGraphElement.fromPointer(nodeid);
+    else ret.node = null;
     return ret;
 }
 
diff --git a/src/components/rightbar/treeEditor/treeEditor.tsx b/src/components/rightbar/treeEditor/treeEditor.tsx
index dcd151718..773f8345c 100644
--- a/src/components/rightbar/treeEditor/treeEditor.tsx
+++ b/src/components/rightbar/treeEditor/treeEditor.tsx
@@ -1,63 +1,29 @@
 import React, {Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
-import {DState, GObject, LModelElement, SetRootFieldAction} from "../../../joiner";
-
-interface Props {data: LModelElement}
-function Child(props: Props) {
-    const data = props.data;
-    const classname = data.className.slice(1).toLowerCase();
-    const css = classname + '-name';
-
-    const click = (evt: React.MouseEvent<HTMLButtonElement>) => {
-        const selected = { node: undefined, view: undefined, modelElement: data.id };
-        SetRootFieldAction.new('selected', data.id, '', true);
-        SetRootFieldAction.new('_lastSelected', selected, '', false);
-    }
-    // I got problems with operation's exception
-    return <div className={'mt-1 ms-3'}>
-        <div className={'d-flex'}>
-            <button className={'btn'} onClick={click}>
-                <i className={'bi bi-eye'}></i>
-            </button>
-            <label className={css + ' ms-1 text-capitalize my-auto'}>{classname}:</label>
-            <label className={'ms-1 my-auto'}>{((data as GObject).name) ? (data as GObject).name : 'unnamed'}</label>
-        </div>
-        {data.className !== 'DOperation' && data.children.map((child, i) => {
-            return <Child key={i} data={child} />
-        })}
-    </div>
-}
+import {DState, DUser, LGraphElement} from "../../../joiner";
+import {FakeStateProps} from "../../../joiner/types";
+import Tree from "../../forEndUser/Tree";
 
 function TreeEditorComponent(props: AllProps) {
-    const data = props.data;
-    if(data) {
-        const classname = data.className.slice(1).toLowerCase();
-        const css = classname + '-name';
-        // I got problems with operation's exception
-        return <div className={'p-2'}>
-            <div className={'d-flex'}>
-                <button className={'btn'}>
-                    <i className={'bi bi-eye-slash'}></i>
-                </button>
-                <label className={css + ' ms-1 text-capitalize my-auto'}>{classname}:</label>
-                <label className={'ms-1 my-auto'}>{((data as GObject).name) ? (data as GObject).name : 'unnamed'}</label>
-            </div>
-            {data.className !== 'DOperation' && data.children.map((child, i) => {
-                return <Child key={i} data={child} />
-            })}
-        </div>
-    } else return <></>
+    const node = props.node;
+    const data = node?.model;
+    if(!data) return(<></>);
+    return(<div className={'p-2'}>
+        <Tree data={data} />
+    </div>)
 }
 interface OwnProps { }
-interface StateProps { data: LModelElement|undefined }
+interface StateProps {
+    node: LGraphElement|null;
+}
 interface DispatchProps { }
 type AllProps = OwnProps & StateProps & DispatchProps;
 
-
 function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
-    const ret: StateProps = {} as any;
-    const pointer = state._lastSelected?.modelElement;
-    if(pointer) ret.data = LModelElement.fromPointer(pointer);
+    const ret: StateProps = {} as FakeStateProps;
+    const nodeid = state.selected[DUser.current];
+    if(nodeid) ret.node = LGraphElement.fromPointer(nodeid);
+    else ret.node = null;
     return ret;
 }
 
diff --git a/src/components/rightbar/treeEditor/treeEditorOLD.tsx b/src/components/rightbar/treeEditor/treeEditorOLD.tsx
new file mode 100644
index 000000000..d61388ddf
--- /dev/null
+++ b/src/components/rightbar/treeEditor/treeEditorOLD.tsx
@@ -0,0 +1,82 @@
+import React, {Dispatch, ReactElement} from "react";
+import {connect} from "react-redux";
+import {DState, DUser, GObject, LGraphElement, LModelElement, Selectors, SetRootFieldAction} from "../../../joiner";
+
+interface Props {data: LModelElement}
+function Child(props: Props) {
+    const data = props.data;
+    const classname = data.className.slice(1).toLowerCase();
+    const css = classname + '-name';
+
+    const click = (evt: React.MouseEvent<HTMLButtonElement>) => {
+        const nodeid = data.node?.id;
+        if(!nodeid) return;
+        SetRootFieldAction.new(`selected.${DUser.current}`, nodeid, '', true);
+    }
+    // I got problems with operation's exception
+    return <div className={'mt-1 ms-3'}>
+        <div className={'d-flex'}>
+            <button className={'btn'} onClick={click}>
+                <i className={'bi bi-eye'}></i>
+            </button>
+            <label className={css + ' ms-1 text-capitalize my-auto'}>{classname}:</label>
+            <label className={'ms-1 my-auto'}>{((data as GObject).name) ? (data as GObject).name : 'unnamed'}</label>
+        </div>
+        {data.className !== 'DOperation' && data.children.map((child, i) => {
+            return <Child key={i} data={child} />
+        })}
+    </div>
+}
+
+function TreeEditorComponent(props: AllProps) {
+    const node = props.node;
+    const data = node?.model;
+    if(!data) return(<></>);
+    const classname = data.className.slice(1).toLowerCase();
+    const css = classname + '-name';
+    // I got problems with operation's exception
+    return <div className={'p-2'}>
+        <div className={'d-flex'}>
+            <button className={'btn'}>
+                <i className={'bi bi-eye-slash'}></i>
+            </button>
+            <label className={css + ' ms-1 text-capitalize my-auto'}>{classname}:</label>
+            <label className={'ms-1 my-auto'}>{((data as GObject).name) ? (data as GObject).name : 'unnamed'}</label>
+        </div>
+        {data.className !== 'DOperation' && data.children.map((child, i) => {
+            return <Child key={i} data={child} />
+        })}
+    </div>
+
+}
+interface OwnProps { }
+interface StateProps {
+    node: LGraphElement|null;
+}
+interface DispatchProps { }
+type AllProps = OwnProps & StateProps & DispatchProps;
+
+
+function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
+    const ret: StateProps = {} as any;
+    const nodeid = state.selected[DUser.current];
+    if(nodeid) ret.node = LGraphElement.fromPointer(nodeid);
+    else ret.node = null;
+    return ret;
+}
+
+function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    const ret: DispatchProps = {};
+    return ret;
+}
+
+
+export const TreeEditorConnected = connect<StateProps, DispatchProps, OwnProps, DState>(
+    mapStateToProps,
+    mapDispatchToProps
+)(TreeEditorComponent);
+
+export const TreeEditor = (props: OwnProps, children: (string | React.Component)[] = []): ReactElement => {
+    return <TreeEditorConnected {...{...props, children}} />;
+}
+export default TreeEditor;
diff --git a/src/components/toolbar/ToolBar.tsx b/src/components/toolbar/ToolBar.tsx
index 234a4d6e0..873944c41 100644
--- a/src/components/toolbar/ToolBar.tsx
+++ b/src/components/toolbar/ToolBar.tsx
@@ -30,7 +30,7 @@ import {
     Constructors,
     WVoidEdge,
     Log,
-    LEdgePoint
+    LEdgePoint, DUser
 } from "../../joiner";
 import {InitialVertexSizeObj} from "../../joiner/types";
 import ModellingIcon from "../forEndUser/ModellingIcon";
@@ -117,13 +117,14 @@ function selectNode(d: DGraphElement|{id: string}): any {
     return d; }
 
 function ToolBarComponent(props: AllProps, state: ThisState) {
-    const lModelElement: LModelElement = props.selected?.modelElement ? props.selected?.modelElement : MyProxyHandler.wrap(props.model);
-    const node: LGraphElement | undefined = props.selected?.node;
+    const node = props.node;
+    if(!node) return(<div className={'toolbar'}></div>);
+    const data: LModelElement|LModel = (node.model) ? node.model : LModel.fromPointer(props.model);
+
     const isMetamodel: boolean = props.isMetamodel;
     const metamodel: LModel|undefined = props.metamodel;
-    // const myDictValidator: Map<string, ReactNode[]> = new Map();
     const downward: Dictionary<DocString<"DClassName">, DocString<"hisChildren">[]> = {}
-    const addChildren = (items: string[]) => items ? getItems(lModelElement, downward, [...new Set(items)], node) : [];
+    const addChildren = (items: string[]) => items ? getItems(data, downward, [...new Set(items)], node) : [];
 
     downward["DModel"] = ["DPackage"];
     downward["DPackage"] = ["DPackage", "DClass", "DEnumerator"];
@@ -156,11 +157,11 @@ function ToolBarComponent(props: AllProps, state: ThisState) {
     if (isMetamodel) {
         return(<div className={"toolbar mt-2"}>
             <b className={'d-block text-center text-uppercase mb-1'}>Add sibling</b>
-            {lModelElement && addChildren(upward[lModelElement.className])}
+            {data && addChildren(upward[data.className])}
             {node && addChildren(upward[node.className])}
             <hr className={'my-2'} />
             <b className={'d-block text-center text-uppercase mb-1'}>Add sublevel</b>
-            {lModelElement && addChildren(downward[lModelElement.className])}
+            {data && addChildren(downward[data.className])}
             {node && addChildren(downward[node.className])}
             {/*<div className={"toolbar-item annotation"} onClick={() => select(lModelElement.addChild("annotation"))}>+annotation</div>*/}
             <hr className={'my-2'} />
@@ -169,8 +170,8 @@ function ToolBarComponent(props: AllProps, state: ThisState) {
     else {
         const classes = metamodel?.classes;
         const model: LModel = LModel.fromPointer(props.model);
-        const lobj: LObject | undefined = lModelElement.className === "DObject" ? lModelElement as LObject : undefined;
-        const lfeat: LValue | undefined = lModelElement.className === "DValue" ? lModelElement as LValue : undefined;
+        const lobj: LObject | undefined = data.className === "DObject" ? data as LObject : undefined;
+        const lfeat: LValue | undefined = data.className === "DValue" ? data as LValue : undefined;
 
         return(<div className={"toolbar mt-2"}>
             <b className={'d-block text-center text-uppercase mb-1'}>Add root level</b>
@@ -205,8 +206,7 @@ interface OwnProps {
 }
 
 interface StateProps {
-    selectedid?: { node: Pointer<DGraphElement, 1, 1>; view: Pointer<DViewElement, 1, 1>; modelElement: Pointer<DModelElement, 0, 1> };
-    selected?: { node: LGraphElement; view: LViewElement; modelElement?: LModelElement };
+    node: LGraphElement|null;
     metamodel?: LModel;
 }
 interface DispatchProps {}
@@ -214,12 +214,9 @@ type AllProps = OwnProps & StateProps & DispatchProps;
 
 function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
     const ret: StateProps = {} as any;
-    ret.selectedid = state._lastSelected;
-    ret.selected = ret.selectedid && {
-        node: DPointerTargetable.wrap(state.idlookup[ret.selectedid.node]) as LGraphElement,
-        view: DPointerTargetable.wrap(state.idlookup[ret.selectedid.view]) as LViewElement,
-        modelElement: ret.selectedid.modelElement ? DPointerTargetable.wrap<DPointerTargetable, LModelElement>(state.idlookup[ret.selectedid.modelElement]) : undefined
-    };
+    const nodeid = state.selected[DUser.current];
+    if(nodeid) ret.node = LGraphElement.fromPointer(nodeid);
+    else ret.node = null;
     if(ownProps.metamodelId) { ret.metamodel = LModel.fromPointer(ownProps.metamodelId); }
     return ret;
 }
diff --git a/src/graph/graphElement/graphElement.tsx b/src/graph/graphElement/graphElement.tsx
index 3d6ad4bf0..ac0b257c7 100644
--- a/src/graph/graphElement/graphElement.tsx
+++ b/src/graph/graphElement/graphElement.tsx
@@ -276,24 +276,10 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
         return true;
     }
 
-    select(forUser:Pointer<DUser, 0, 1> = null) {
-        const id = this.props.data?.id;
-        if (!forUser) forUser = DUser.current;
-        // if (forUser === DUser.current && this.html.current) this.html.current.focus();
-        // this.props.node.isSelected[forUser] = true;
-
-        //BEGIN();
-        const selected = Selectors.getSelected();
-        if (id) {
-            //selected[forUser] = id;
-            SetRootFieldAction.new('selected', id, '', true);
-        }
-        SetRootFieldAction.new('_lastSelected', {
-            node: this.props.nodeid,
-            view: this.props.view.id,
-            modelElement: this.props.data?.id
-        });
-        //END();
+    select() {
+        const nodeid = this.props.nodeid
+        if(!nodeid) return;
+        SetRootFieldAction.new(`selected.${DUser.current}`, nodeid, '', true);
     }
 
     constructor(props: AllProps, context: any) {
@@ -471,10 +457,10 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
     }
 
     doContextMenu(e: React.MouseEvent<Element>){
-        const selected = Selectors.getSelected();
-        const id = this.props.dataid;
-        const alreadySelected = selected === id;
-        if (!alreadySelected) { this.select(); if (this.html.current) this.html.current.focus(); }
+        const selected = Selectors.getSelected()[DUser.current];
+        const nodeid = this.props.nodeid;
+        const alreadySelected = selected === nodeid;
+        if (!alreadySelected) this.select();
         SetRootFieldAction.new("contextMenu", {
             display: true,
             x: e.clientX,
@@ -511,13 +497,8 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
         this.onClick(e);
     }
     onClick(e: React.MouseEvent): void {
-        // (e.target as any).focus();
         e.stopPropagation();
-        const selected = Selectors.getSelected();
-        const id = this.props.dataid;
-        // const alreadySelected = selected === id;
         SetRootFieldAction.new("contextMenu", {display: false, x: 0, y: 0});
-        // 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 8fc435bfe..b02f18498 100644
--- a/src/graph/vertex/Vertex.tsx
+++ b/src/graph/vertex/Vertex.tsx
@@ -5,7 +5,7 @@ import {
     DGraph,
     DGraphElement,
     DGraphVertex,
-    DState,
+    DState, DUser,
     DVertex,
     DVoidVertex,
     EMeasurableEvents,
@@ -17,7 +17,7 @@ import {
     GraphElementStatee,
     GraphPoint,
     GraphSize,
-    LClass,
+    LClass, LGraphElement,
     LModelElement, LNamedElement,
     Log,
     LPointerTargetable,
@@ -321,12 +321,10 @@ export class VertexComponent<AllProps extends AllPropss = AllPropss, ThisState e
     }
 
     render(): ReactNode {
-        if (!this.props.node) return 'Loading...';
-
+        if (!this.props.node) return 'Loading Node...';
 
         const cssOverride: string[] = [];
-        const selected = this.props.selected;
-        if(selected && selected.id === this.props.dataid) cssOverride.push('selected-by-me');
+        if(this.props.selected?.id === this.props.nodeid) cssOverride.push('selected-by-me');
 
         // if(!windoww.cpts) windoww.cpts = {};
         // windoww.cpts[this.props.nodeid]=this;
@@ -346,7 +344,7 @@ export class VertexComponent<AllProps extends AllPropss = AllPropss, ThisState e
         const classesOverride = [nodeType, ...cssOverride, (named.name && named.name === 'default') ? 'default' : ''];
         const styleOverride: React.CSSProperties = {};
         // set classes end
-        const size: Readonly<GraphSize> = this.getSize() as any;
+        const size: Readonly<GraphSize> = this.getSize();
 
         switch (nodeType){
             case 'GraphVertex':
@@ -381,9 +379,9 @@ class OwnProps extends GraphElementOwnProps {
 
 class StateProps extends GraphElementReduxStateProps {
     node!: LVoidVertex;
-    lastSelected!: LModelElement | null;
-    //selected!: Dictionary<Pointer<DUser>, LModelElement|null>;
-    selected!: LModelElement|null;
+    // lastSelected!: LModelElement | null;
+    // selected!: Dictionary<Pointer<DUser>, LModelElement|null>;
+    selected!: LGraphElement|null;
     isEdgePending!: { user: LUser, source: LClass };
     viewpoint!: LViewPoint
 }
@@ -403,10 +401,12 @@ function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
 
     if (DGraphElementClass === DVertex && ownProps.isVoid) DGraphElementClass = DVoidVertex;
     const superret: StateProps = GraphElementComponent.mapStateToProps(state, ownProps, DGraphElementClass) as StateProps;
-    //superret.lastSelected = state._lastSelected?.modelElement;
-    superret.lastSelected = state._lastSelected ? LPointerTargetable.from(state._lastSelected.modelElement) : null;
+    // superret.lastSelected = state._lastSelected?.modelElement;
+    // superret.lastSelected = state._lastSelected ? LPointerTargetable.from(state._lastSelected.modelElement) : null;
 
-    superret.selected = (state.selected) ? LModelElement.fromPointer(state.selected) : null;
+    // todo: change current to correct user ID when authentication is implemented.
+    const selected = state.selected[DUser.current];
+    superret.selected = (selected) ? LGraphElement.fromPointer(selected) : null;
     /*  Uncomment this when we have user authentication.
     superret.selected = {};
     for(let user of Object.keys(selected)) {
diff --git a/src/joiner/classes.ts b/src/joiner/classes.ts
index c2a2d0cb4..5ab65f6e9 100644
--- a/src/joiner/classes.ts
+++ b/src/joiner/classes.ts
@@ -538,7 +538,7 @@ export class Constructors<T extends DPointerTargetable>{
 
         // update father's collections (pointedby's here are set automatically)
         if (this.persist && instanceoff) {
-            SetFieldAction.new(thiss.id, "instanceof", instanceoff, undefined, true);
+            SetFieldAction.new(thiss.id, "instanceof", instanceoff, "", true);
             SetFieldAction.new(instanceoff as Pointer<DAttribute>, "instances", thiss.id, '+=', true);
         }
         else thiss.instanceof = instanceoff;
@@ -1477,9 +1477,7 @@ export class LPointerTargetable<Context extends LogicContext<DPointerTargetable>
         }
     }
     */
-    public dependencies(): Dependency[] {
-        return [];
-    }
+    public dependencies(): Dependency[] { return []; }
     protected get_dependencies(context: Context): () => Dependency[] {
         const data = context.proxyObject;
         const dependencies: Dependency[] = [];
@@ -1490,9 +1488,10 @@ export class LPointerTargetable<Context extends LogicContext<DPointerTargetable>
                 const obj = raw[1] || '';
                 let field = raw[2] || '';
 
-                // Improve this whit regex (delete chars from end that are not in azAZ)
-                if (root.endsWith('+=') || root.endsWith('[]')) root = root.slice(0, -2);
-                if (field && (field.endsWith('+=') || field.endsWith('[]'))) field = field.slice(0, -2);
+                // Delete chars from end that are not in [azAZ].
+                const regex = /[^a-zA-Z]+$/;
+                root = root.replace(regex, '');
+                field = field.replace(regex, '');
 
                 let op: ''|'-=' = (field && field.endsWith('s')) ? '-=' : '';
                 if(!field && root.endsWith('s')) op = '-=';
@@ -1509,6 +1508,12 @@ export class LPointerTargetable<Context extends LogicContext<DPointerTargetable>
     protected get_delete(context: Context): () => void {
         const data: LPointerTargetable & GObject = context.proxyObject;
         const dependencies = data.dependencies();
+
+        for(let child of data.children) {
+            child.delete();
+            child.node?.delete();
+        }
+
         const ret = () => {
             BEGIN();
             for (let dependency of dependencies) {
@@ -1518,14 +1523,14 @@ export class LPointerTargetable<Context extends LogicContext<DPointerTargetable>
                 const op = dependency.op;
                 const val = (op === '-=') ? data.id : '';
                 if((root === 'idlookup') && obj && field) {
-                    console.log(`SetFieldAction.new('${obj}', '${field}', '${val}', '${op}', false); //debug`);
+                    console.log(`SetFieldAction.new('${obj}', '${field}', '${val}', '${op}'); // delete`);
                     SetFieldAction.new(obj, field, val, op, false);
-                }
-                else {
-                    console.log(`SetRootFieldAction.new('${root}', '${val}', '${op}', false); //debug`);
+                } else {
+                    console.log(`SetRootFieldAction.new('${root}', '${val}', '${op}'); // delete`);
                     SetRootFieldAction.new(root, val, op, false);
                 }
             }
+            // data.node?.delete(); <-- this is NOT working here, IDK why, on contextMenu it works.
             DeleteElementAction.new(data.id);
             END();
         };
diff --git a/src/joiner/types.ts b/src/joiner/types.ts
index 0c0b315af..d792fdbf8 100644
--- a/src/joiner/types.ts
+++ b/src/joiner/types.ts
@@ -3,7 +3,7 @@ import type {ShortAttribETypes, Pointer, RuntimeAccessibleClass, EdgeSegment} fr
 import type React from "react";
 import {
     AttribETypes,
-    CoordinateMode, DPointerTargetable, DState,
+    CoordinateMode, DGraphElement, DPointerTargetable, DState, DUser,
     EdgeHead,
     EGraphElements, EModelElements,
     LEdgePoint,
@@ -180,3 +180,5 @@ export type Dependency = {
     field: keyof DPointerTargetable|'',
     op: ''|'-='
 };
+export type Selected = Dictionary<Pointer<DUser>, Pointer<DGraphElement, 0, 1>>;
+export type FakeStateProps = any;
diff --git a/src/model/dataStructure/GraphDataElements.tsx b/src/model/dataStructure/GraphDataElements.tsx
index a105df56f..69ce65eb2 100644
--- a/src/model/dataStructure/GraphDataElements.tsx
+++ b/src/model/dataStructure/GraphDataElements.tsx
@@ -986,7 +986,7 @@ export class LEdgePoint<Context extends LogicContext<DEdgePoint> = any, C extend
         return ret;
     }
 
-    /* 13/10/2023 Giordano comment
+    /* 13/10/2023 Giordano comment (defined in LPointerTargetable
     public get_delete(context: Context): () => void {
         // careful: pointedBy might be broken due to comment x984 (search it)
         return super.get_delete(context);
diff --git a/src/redux/selectors/selectors.ts b/src/redux/selectors/selectors.ts
index 8959eb164..39f85631a 100644
--- a/src/redux/selectors/selectors.ts
+++ b/src/redux/selectors/selectors.ts
@@ -36,6 +36,7 @@ import {
     U, windoww, Pointers, DViewPoint, LViewPoint, Dictionary, DUser, AttribETypes, ShortAttribETypes, toShortEType
 } from "../../joiner";
 import {EdgeOptions} from "../store";
+import {Selected} from "../../joiner/types";
 
 enum ViewEClassMatch { // this acts as a multiplier for explicit priority
     MISMATCH = 0,
@@ -48,7 +49,7 @@ enum ViewEClassMatch { // this acts as a multiplier for explicit priority
 export class Selectors{
     public static cname: string = "Selectors";
 
-    static getSelected(): Pointer<DModelElement, 0, 1, LModelElement> {
+    static getSelected(): Selected {
         const state = store.getState();
         return state.selected;
     }
diff --git a/src/redux/store.tsx b/src/redux/store.tsx
index bd282e0a9..b05b0165a 100644
--- a/src/redux/store.tsx
+++ b/src/redux/store.tsx
@@ -72,6 +72,7 @@ import {
 import React from "react";
 import {DV} from "../common/DV";
 import LeaderLine from "leader-line-new";
+import {Selected} from "../joiner/types";
 
 console.warn('ts loading store');
 
@@ -172,8 +173,7 @@ export class DState extends DPointerTargetable{
     room: string = '';
     isCleaning: boolean = false;    // check if a room is being cleaned
 
-    //selected: Dictionary<Pointer<DUser>, Pointer<DModelElement, 0, 1, LModelElement>> = {};
-    selected: Pointer<DModelElement, 0, 1, LModelElement> = '';
+    selected: Selected = {};
     iot: null|boolean = null;
     topics: string[] = [];