stuff

- node editor v1 - examples - many bugfixes - warning: edgepoints are still bugged
DamianoNaraku · Dec 12, 2023 · 2e70cd3 · 2e70cd3
1 parent a83b96e
commit 2e70cd3
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 56 deletions.
diff --git a/src/components/abstract/Dock.tsx b/src/components/abstract/Dock.tsx
@@ -8,7 +8,7 @@ import TestTab from './tabs/TestTab';
 import StructureEditor from '../rightbar/structureEditor/StructureEditor';
 import TreeEditor from '../rightbar/treeEditor/treeEditor';
 import ViewsEditor from '../rightbar/viewsEditor/ViewsEditor';
-import StyleEditor from '../rightbar/styleEditor/StyleEditor';
+import NodeEditor from '../rightbar/styleEditor/StyleEditor';
 import ViewpointEditor from '../rightbar/viewpointsEditor/ViewpointsEditor';
 import Console from '../rightbar/console/Console';
 import InfoTab from './tabs/InfoTab';
@@ -25,19 +25,19 @@ function DockComponent(props: AllProps) {
 
     /* Editors */
     const test = {id: '999', title: 'Test', group: 'editors', closable: false, content: <TestTab />};
-    const structure = {id: '1', title: 'Structure', group: 'editors', closable: false, content: <StructureEditor />};
+    const structure = {id: '1', title: 'Data', group: 'editors', closable: false, content: <StructureEditor />};
     const tree = {id: '2', title: 'Tree View', group: 'editors', closable: false, content: <TreeEditor />};
     const views = {id: '3', title: 'Views', group: 'editors', closable: false, content: <ViewsEditor />};
-    const style = {id: '4', title: 'Node', group: 'editors', closable: false, content: <StyleEditor />};
+    const style = {id: '4', title: 'Node', group: 'editors', closable: false, content: <NodeEditor />};
     const viewpoints = {id: '6', title: 'Viewpoints', group: 'editors', closable: false, content: <ViewpointEditor />};
     const console = {id: '7', title: 'Console', group: 'editors', closable: false, content: <Console />};
 
     const layout: LayoutData = {dockbox: {mode: 'horizontal', children: []}};
     layout.dockbox.children.push({tabs: [info]});
     layout.dockbox.children.push({tabs: [
-        // test,
         structure,
         tree,
+        style,
         views,
         viewpoints,
         console

diff --git a/src/components/forEndUser/GenericInput.tsx b/src/components/forEndUser/GenericInput.tsx
@@ -36,6 +36,10 @@ class GenericInputComponent extends PureComponent<AllProps, ThisState/*undefined
             let singleton: GObject<LPointerTargetable> = DConstructor.singleton;
             info = singleton['__info_of__' + this.props.field] ;
         } else info = this.props.info;
+        if (!info) {
+            Log.eDevv("<GenericInput/> could not find info of " + this.props.field, {props:this.props});
+            return <></>;
+        }
 
         let type: string;
         let enumOptions: Dic<String<'optgroup'>, Dic<String<'options'>, String<'values'>>> = {}; // 'Options' entry is a fallback for items without an optgroup
@@ -113,7 +117,7 @@ class GenericInputComponent extends PureComponent<AllProps, ThisState/*undefined
             case 'text': case 'Function':
                 return <TextArea inputClassName={'input my-auto ms-auto '} {...otherProps} className={this.props.rootClassName}
                                  data={this.props.data} field={this.props.field}
-                                 jsxLabel={label} tooltip={this.props.tooltip}></TextArea>;
+                                 jsxLabel={label} tooltip={this.props.tooltip} />;
             case 'EEnum':
                 return <Select inputClassName={'my-auto ms-auto select'} {...otherProps} className={this.props.rootClassName}
                                data={this.props.data} field={this.props.field} options={enumOptionsJSX}
@@ -179,7 +183,7 @@ interface _OwnProps {
     // propsRequestedFromJSX_AsAttributes: string;
     data: DPointerTargetable | LPointerTargetable;
     field: string;
-    info: Info | undefined;
+    info?: Info | undefined;
     tooltip?: boolean|string;
 
     className?: string;

diff --git a/src/components/forEndUser/TextArea.tsx b/src/components/forEndUser/TextArea.tsx
@@ -68,7 +68,7 @@ function TextAreaComponent(props: AllProps) {
         </div>}
 
         <textarea spellCheck={false} readOnly={readOnly} className={props.inputClassName || css} style={props.inputStyle}
-                  onChange={change} onBlur={blur} value={value} />
+                  onChange={change} onBlur={blur} value={value} placeholder={props.placeholder}/>
     </div>);
 }
 
@@ -87,6 +87,7 @@ export interface TextAreaOwnProps {
     inputClassName?: string;
     style?: GObject;
     inputStyle?: GObject;
+    placeholder?: string;
 }
 
 interface StateProps {

diff --git a/src/components/navbar/tabs/Examples.tsx b/src/components/navbar/tabs/Examples.tsx
@@ -32,7 +32,7 @@ function loadOldState(obj: GObject, name: string = "oldSave"): void {
         project.models = obj.models;
         project.views = obj.viewelements;
         }), 1);
-
+    // NB: might also be needed to add "context DModel inv: true" or DClass... to all default views got back from old state.
 }
 // for new saves
 function loadState(obj: GObject, name: string = "oldSave"): void { LoadAction.new(obj); }
@@ -61,8 +61,8 @@ function ExamplesComponent(props: AllProps) {
                 <li tabIndex={-1} onClick={e => setExample(1)} className={'dropdown-item'}>Simplified Class Diagram</li>
                 <li tabIndex={-1} onClick={e => setExample(2)} className={'dropdown-item'}>Nodes & Edges</li>
                 <li tabIndex={-1} onClick={e => loadOldState(statechartplus, "Statechart+")} className={'dropdown-item'}>Student statechart++</li>
-                <li tabIndex={-1} onClick={e => loadOldState(viewAsEdge, "View as edge")} className={'dropdown-item'}>View Object as Edge</li>
-                <li tabIndex={-1} onClick={e => loadOldState(conflictsimulation, "Conflict simulation")} className={'dropdown-item'}>Conflict simulation</li>
+                <li tabIndex={-1} onClick={e => loadState(viewAsEdge, "View as edge")} className={'dropdown-item'}>View Object as Edge</li>
+                <li tabIndex={-1} onClick={e => loadState(conflictsimulation, "Conflict simulation")} className={'dropdown-item'}>Conflict simulation</li>
                 {false && <li tabIndex={-1} onClick={e => loadOldState(sequence, "Sequence diagram")} className={'dropdown-item'}>Sequence</li>}
             </ul>
         </li>)

diff --git a/src/components/rightbar/styleEditor/StyleEditor.tsx b/src/components/rightbar/styleEditor/StyleEditor.tsx
@@ -1,20 +1,49 @@
 import React, {Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
 import {DState} from "../../../redux/store";
-import {LModelElement, LViewElement, LGraphElement, Input}  from "../../../joiner";
+import {
+    LModelElement,
+    LViewElement,
+    LGraphElement,
+    Input,
+    RuntimeAccessibleClass,
+    LVoidVertex,
+    LVoidEdge, LGraph, GenericInput, TextArea
+} from "../../../joiner";
 
-function StyleEditorComponent(props: AllProps) {
+function NodeEditorComponent(props: AllProps) {
     const selected = props.selected;
     const editable = true;
-    if(!selected) return(<></>);
+    if (!selected || !selected.node) return(<></>);
+    let cname = selected.node.className
+    let isGraph = ["DGraph", "DGraphVertex"].includes(cname); // RuntimeAccessibleClass.extends(cname, "DGraph");
+    let isVertex = ["DVoidVertex", "DVertex", "DEdgePoint"].includes(cname); // RuntimeAccessibleClass.extends(cname, "DVoidVertex");
+    let isEdge = ["DVoidEdge", "DEdge"].includes(cname); // RuntimeAccessibleClass.extends(cname, "DVoidEdge");
+    console.log("Style editor", {cname, isVertex, isGraph, isEdge, selected})
+    let asGraph: LGraph | undefined = isGraph && selected.node as any;
+    let asVertex: LVoidVertex | undefined  = isVertex && selected.node as any;
+    let asEdge: LVoidEdge | undefined = isEdge && selected.node as any;
     return(<div className={'p-3'}>
         {/*<Input obj={selected.node} field={"id"} label={"ID"} type={"text"} readonly={true}/>*/}
-        <Input data={selected.node} field={"x"} label={"X Position"} type={"number"} readonly={!editable} />
-        <Input data={selected.node} field={"y"} label={"Y Position"} type={"number"} readonly={!editable} />
-        <Input data={selected.node} field={"width"} label={"Width"} type={"number"} readonly={!editable} />
-        <Input data={selected.node} field={"height"} label={"Height"} type={"number"} readonly={!editable} />
         <Input data={selected.node} field={"zIndex"} label={"Z Index"} type={"number"} readonly={!editable} />
-        {/*<Input data={selected.node} field={"selectedBy"} label={"Selected By"} type={"text"} readonly={!editable} />*/}
+        {asGraph && <><h3>Graph</h3>
+            <GenericInput data={asGraph} field={"zoom"} />
+            <GenericInput data={asGraph} field={"offset"} />
+            /*graphSize readonly on LGraph but not on DGraph, = internal graph size. put it for info.*/
+        </>}
+        {asVertex && <><h3>Vertex</h3>
+            <Input data={asVertex} field={"x"} label={"X Position"} type={"number"} readonly={!editable} />
+            <Input data={asVertex} field={"y"} label={"Y Position"} type={"number"} readonly={!editable} />
+            <Input data={asVertex} field={"width"} label={"Width"} type={"number"} readonly={!editable} />
+            <Input data={asVertex} field={"height"} label={"Height"} type={"number"} readonly={!editable} />
+        </>}
+        {asEdge && <><h3>Edge</h3>
+            <GenericInput data={asEdge} field={"longestLabel"} />
+            <TextArea data={asEdge} field={"labels"} label={"labels"}
+                   placeholder={'(edge/*LEdge*/, segment/*EdgeSegment*/, subNodes/*: LGraphElement[]*/, allSegments/*: EdgeSegment[]*/) => {' +
+                       '\n\t return (edge.start.model)?.name + " ~ " + (e.end.model)?.name + "(" + segment.length.toFixed(1) + ")";' +
+                       '\n}'} readonly={!editable} />
+        </>}
     </div>);
 
 }
@@ -54,13 +83,13 @@ function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
 }
 
 
-export const StyleEditorConnected = connect<StateProps, DispatchProps, OwnProps, DState>(
+export const NodeEditorConnected = connect<StateProps, DispatchProps, OwnProps, DState>(
     mapStateToProps,
     mapDispatchToProps
-)(StyleEditorComponent);
+)(NodeEditorComponent);
 
-export const StyleEditor = (props: OwnProps, children: (string | React.Component)[] = []): ReactElement => {
-    return <StyleEditorConnected {...{...props, children}} />;
+export const NodeEditor = (props: OwnProps, children: (string | React.Component)[] = []): ReactElement => {
+    return <NodeEditorConnected {...{...props, children}} />;
 }
-export default StyleEditor;
+export default NodeEditor;
 
diff --git a/src/examples/conflictsimulation.ts b/src/examples/conflictsimulation.ts
diff --git a/src/graph/graphElement/graphElement.tsx b/src/graph/graphElement/graphElement.tsx
@@ -142,16 +142,18 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
     static mapViewStuff(state: DState, ret: GraphElementReduxStateProps, ownProps: GraphElementOwnProps) {
         // let dnode: DGraphElement | undefined = ownProps?.nodeid && DPointerTargetable.from(ownProps.nodeid, state) as any;
         if (ownProps.view) {
-            ret.views = [];
             ret.view = LPointerTargetable.fromD(Selectors.getViewByIDOrNameD(Pointers.from(ownProps.view), state) as DViewElement);
+            ret.views = [ret.view];
             Log.w(!ret.view, "Requested view "+ownProps.view+" not found. Another view got assigned.", {requested: ownProps.view, props: ownProps, state: ret});
         }
         if (!ret.view) {
             const viewScores = Selectors.getAppliedViews(ret.data,
                 (ownProps.view as LViewElement)?.id || (ownProps.view as string) || null,
                 ownProps.parentViewId || null);
-            ret.views = viewScores.map(e => LViewElement.fromD(e.element));
+            ret.views = viewScores.map<LViewElement>(e => LViewElement.fromD(e.element)).filter(v => !!v);
+            // console.log("debug",  {...this.props, data: this.props.data?.id, view: this.props.view?.id, v0: this.props.views, views: this.props.views?.map( v => v?.id )})
             ret.view = ret.views[0];
+            Log.ex(!ret.view, "Could not find any view appliable to element.", {data:ret.data, props: ownProps, state: ret});
             (ret as any).viewScores = viewScores; // debug only
         }
 

diff --git a/src/joiner/classes.ts b/src/joiner/classes.ts
@@ -965,7 +965,7 @@ export class DPointerTargetable extends RuntimeAccessibleClass {
                     let meta = LPointerTargetable.from(metaptr as Pointer);
                     startingPrefix = startingPrefix(meta as L);
                 }
-                const childrenNames: (string)[] = lfather.children.map(c => (c as LNamedElement).name);
+                const childrenNames: (string)[] = lfather.children.map(c => (c as LNamedElement)?.name);
                 return U.increaseEndingNumber(startingPrefix + '0', false, false, (newname) => childrenNames.indexOf(newname) >= 0);
             }
             else {

diff --git a/src/model/dataStructure/GraphDataElements.tsx b/src/model/dataStructure/GraphDataElements.tsx
@@ -320,6 +320,7 @@ export class LGraphElement<Context extends LogicContext<DGraphElement> = any, C
         return GraphElementComponent.map[context.data.id]; }
     // get_view(context: Context): this["view"] { return this.get_component(context).props.view; }
     get_view(context: Context): this["view"] {
+        if (windoww.debugview5) return windoww.debugview5 as any;
         return (this.get_component(context)?.props.view as this["view"]);
         // return LPointerTargetable.fromPointer(context.data.view);
     }
@@ -723,8 +724,8 @@ export class LGraph<Context extends LogicContext<DGraph> = any, D extends DGraph
     state!: LMap;
     // personal attributes
     zoom!: GraphPoint;
-    graphSize!: GraphSize; // derived attribute: bounding rect containing all subnodes
-    offset!: GraphPoint; //  size internal to the graph, while "size" is instead external size of the vertex holding the graph in GraphVertexes
+    graphSize!: GraphSize; // derived attribute: bounding rect containing all subnodes, while "size" is instead external size of the vertex holding the graph in GraphVertexes
+    offset!: GraphPoint; // Scrolling position inside the graph
 
     // get_graphSize(context: LogicContext<DGraph>):  Readonly<GraphSize> { return todo: get bounding rect containing all subnodes.; }
     get_offset(context: LogicContext<DGraph>):  Readonly<GraphSize> {
@@ -756,8 +757,9 @@ export class LGraph<Context extends LogicContext<DGraph> = any, D extends DGraph
     translateSize<T extends GraphSize|GraphPoint>(ret: T, innerGraph: LGraph): T { return this.wrongAccessMessage("translateSize()"); }
     translateHtmlSize<T extends Size|Point, G = T extends Size ? GraphSize : GraphPoint>(size: T): G { return this.wrongAccessMessage("translateHtmlSize()"); }
 
-    __info_of__offset: Info = {type:GraphSize.cname, txt:"In-graph scrolling position."};
-    __info_of__graphSize: Info = {type:GraphSize.cname, txt:"size internal to the graph, including internal scroll and panning."};
+    __info_of__zoom: Info = {type:GraphPoint.cname, label:"zoom", txt:"Scales the graph and all subelements by a factor."};
+    __info_of__offset: Info = {type:GraphPoint.cname, label:"offset", txt:"In-graph scrolling position."};
+    __info_of__graphSize: Info = {type:GraphSize.cname, label:"graphSize", txt:"size internal to the graph, including internal scroll and panning."};
     __info_of__translateSize: Info = {type:"(T, Graph)=>T where T is GraphSize | GraphPoint", txt:"Translates a coordinate set from the local coordinates of a SubGraph to this Graph containing it."};
     __info_of__translateHtmlSize: Info = {type:"(Size|Point) => GraphSize|GraphPoint", txt:"Translate page\'s viewport coordinate set to this graph coordinate set."};
     get_translateHtmlSize<T extends Size|Point, G = T extends Size ? GraphSize : GraphPoint>(c: Context): ((size: T) => G) {
@@ -1540,22 +1542,25 @@ replaced by startPoint
 */
 
 
-//    label!: PrimitiveType; should never be read change their documentation in write only. their values is "read" in this.segments
-//    longestLabel!: PrimitiveType;
-//    labels!: PrimitiveType[];
-    allNodes!: [LGraphElement, ...Array<LEdgePoint>, LGraphElement]
-
-
-    /*    ___info_of__longestLabel: Info = {readType: "PrimitiveType", writeType:"PrimitiveType | " +
-                "(e:this, curr: LGraphElement, next: LGraphElement, curr_index: number, allNodes: LGraphElement[]) => PrimitiveType)", txt: <span>Label assigned to the longest path segment.</span>}
-        ___info_of__label: Info = {type: "", txt: <span>Alias for longestLabel</span>};
-        ___info_of__labels: Info = {type: "type of label or Array<type of label>", txt: <span>Instructions to label to multiple or all path segments in an edge</span>};
-    */
-    ___info_of__allNodes: Info = {type: "[LGraphElement, ...Array<LEdgePoint>, LGraphElement]", txt: <span>first element is this.start. then all this.midnodes. this.end as last element</span>};
-
-
-    // get_label(c: Context): this["label"] { return this.get_longestLabel(c); }
-    // get_longestLabel(c: Context): this["label"] { return this.get_label_impl(c.data, c.proxyObject); }
+    label!: PrimitiveType;  // should never be read change their documentation in write only. their values is "read" in this.segments
+    longestLabel!: PrimitiveType;
+    labels!: PrimitiveType[];
+    allNodes!: [LGraphElement, ...Array<LEdgePoint>, LGraphElement];
+    __info_of__longestLabel: Info = {label:"longest label", type:"text", readType: "PrimitiveType",
+        writeType:"PrimitiveType | (e:this, curr: LGraphElement, next: LGraphElement, curr_index: number, allNodes: LGraphElement[]) => PrimitiveType)",
+        txt: <span>Label assigned to the longest path segment.</span>}
+    __info_of__label: Info = {type: "", txt: <span>Alias for longestLabel</span>};
+    __info_of__labels: Info = {label:"multple labels", type: "text",
+        writeType: "type of label or Array<type of label>",
+        txt: <span>Instructions to label to multiple or all path segments in an edge</span>};
+    __info_of__allNodes: Info = {type: "[LGraphElement, ...Array<LEdgePoint>, LGraphElement]", txt: <span>first element is this.start. then all this.midnodes. this.end as last element</span>};
+
+
+    get_label(c: Context): this["longestLabel"] { return this.get_longestLabel(c); }
+    get_longestLabel(c: Context): this["longestLabel"] { return c.data.longestLabel as any; }
+    set_longestLabel(val: this["longestLabel"], c: Context): boolean { return SetFieldAction.new(c.data, "longestLabel", val); }
+    get_labels(c: Context): this["labels"] { return c.data.labels as any; }
+    set_labels(val: this["labels"], c: Context): boolean { return SetFieldAction.new(c.data, "labels", val); }
     public headPos_impl(c: Context, isHead: boolean, headSize0?: GraphPoint, segment0?: EdgeSegment, zoom0?: GraphPoint): GraphSize & {rad: number} {
         let segment: EdgeSegment = segment0 || this.get_segments(c).segments[0];
         // let v: LViewElement = this.get_view(c);