more optimizations on edges, renamed damedge

src/common/DV.tsx

@@ -160,10 +160,8 @@ class DefaultView {
         return `<div className={'root'}>
     {!data && "Model data missing."}
     <div className="edges" style={{zIndex:101, position: "absolute", height:0, width:0, overflow: "visible"}}>{[
-            refEdges.map( <DamEdge start={se.start.father} end={se.end} view={"Pointer_ViewEdge" + ( se.start.containment && "Composition" || "Association")} key={se.start.node.id+"~"+se.end.node.id}/>)
-                 ,
-            extendEdges.map(
-                 && <DamEdge start={se.start} end={se.end} view={"Pointer_ViewEdgeInheritance"} key={"EXT_"+se.start.node.id+"~"+se.end.node.id}/>)]
+            refEdges.map(se=> <Edge start={se.start.father.node} end={se.end.node} view={"Pointer_ViewEdge" + ( se.start.containment && "Composition" || "Association")} key={se.start.node.id+"~"+se.end.node.id}/>)
+            , extendEdges.map(se=><Edge start={se.start} end={se.end} view={"Pointer_ViewEdgeInheritance"} key={"EXT_"+se.start.node.id+"~"+se.end.node.id}/>)]
         }
     </div>
     {otherPackages.map(pkg => <DefaultNode key={pkg.id} data={pkg} />)}

src/common/UX.tsx

@@ -99,7 +99,7 @@ export class UX{
                     case windoww.Components.EdgePoint.cname:
                         idbasename = injectProps.parentnodeid + "^" + (dataid || re.props.startingSize?.id || indices.join(",")) + "EP";
                         break;
-                    case EdgeComponent.cname: case "DamEdge":
+                    case EdgeComponent.cname: case "Edge":
                         let edgeProps:EdgeOwnProps = re.props;
                         let edgestart_id: Pointer<DGraphElement> | Pointer<DModelElement> = (edgeProps.start as any).id || edgeProps.start;
                         let edgeend_id: Pointer<DGraphElement> | Pointer<DModelElement> = (edgeProps.end as any).id || edgeProps.end;

src/components/abstract/tabs/MetamodelTab.tsx

@@ -1,7 +1,7 @@
 import React, {Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
 import type {DModel, Pointer} from "../../../joiner";
-import {DState, CreateElementAction, DGraph, LGraph, LModel, DamEdge} from "../../../joiner";
+import {DState, CreateElementAction, DGraph, LGraph, LModel, Edge} from "../../../joiner";
 import {DefaultNode} from "../../../joiner/components";
 import ToolBar from "../../toolbar/ToolBar";
 import ContextMenu from "../../contextMenu/ContextMenu";

src/components/topbar/Topbar.tsx

@@ -1,23 +1,11 @@
 import React, {Dispatch, ReactElement, useState} from "react";
 import {connect} from "react-redux";
 import './style.scss';
+import type { GObject } from "../../joiner";
 import {
     DState,
-    CreateElementAction,
-    DEdgePoint,
-    DViewElement,
-    DVoidEdge,
-    EdgeBendingMode,
-    GObject,
-    GraphSize,
-    Input,
-    Selectors,
-    SetFieldAction,
-    SetRootFieldAction,
-    store
-} from "../../joiner";
+    SetRootFieldAction,} from "../../joiner";
 import {SaveManager} from "./SaveManager";
-import {DamEdge} from "../../graph/damedges/damedge";
 import toast from "react-hot-toast";
 import Undoredocomponent from "./undoredocomponent";
 import RoomManager from "../room/RoomManager";
@@ -116,63 +104,4 @@ export const TopBar = (props: OwnProps, children: (string | React.Component)[] =
     return <TopBarConnected {...{...props, children}} />;
 }
 
-
-
-
-
-//             <ellipse stroke={"black"} fill={"red"} cx={this.props.node.end.x} cy={this.props.node.end.y}
-//                         rx={this.props.node.end.w} ry={this.props.node.end.h} />
-//             <ellipse stroke={"black"} fill={"red"} cx={this.props.node.start.x} cy={this.props.node.start.y}
-//                         rx={this.props.node.start.w} ry={this.props.node.start.h} />
-function edgetestclick(){
-    let jsxmn_svg = `<ellipse stroke={"black"} fill={"red"} cx={this.props.node.x} cy={this.props.node.y} rx={this.props.node.w} ry={this.props.node.h} />`;
-    let jsxmn_html = `<div style={{borderRadius:"999px", border: "2px solid black", background:"red", width:(this.props.node.w+50)+"px", height:(this.props.node.h+50)+"px"}} y={this.props.node.y}/>`;
-    let jsxmn_html_nonodeaccess = `<div style={{borderRadius:"999px", border: "2px solid black", background:"red", width:"100%", height:"100%"}} />`;
-
-    let jsxmn_html_manualpos = `<div style={{borderRadius:"999px", border: "2px solid black", position:"absolute", background:"red",
-top:(this.props.node.y-this.props.node.h/2+50)+"px", left:(this.props.node.x-this.props.node.w/2+50)+"px",
-width:(this.props.node.w+50)+"px", height:(this.props.node.h+50)+"px"}} y={this.props.node.y}/>`;
-    let midnodeviewsvg = DViewElement.new2("edgepoint view svg", jsxmn_svg, (d)=>{d.defaultVSize=new GraphSize(0, 0, 5, 5);  d.adaptHeight=true; d.adaptWidth=true; });
-    let midnodeview = DViewElement.new2("edgepoint view html", jsxmn_html_nonodeaccess, (d)=>{d.defaultVSize=new GraphSize(0, 0, 25, 25); /*d.adaptHeight=true; d.adaptWidth=true;*/ });
-    let dataid = store.getState().models[0];
-    // <g>{this.props.node.midnodes.map((mn) => <VoidVertex nodeid={mn.id+"_svg"} view={"`+midnodeviewsvg.id+`"} />)}</g>
-    let jsx =
-        `<svg>
-            <path stroke={"black"} fill={"none"} d={this.props.path()}></path>
-            {
-                
-                <foreignObject style={{overflow:"visible"}}>
-                    <VoidVertex key={"midnode1"} view={"` + midnodeview.id + `"} />
-                    <VoidVertex />
-                </foreignObject>
-            }
-        </svg>`;
-
-    let view = DViewElement.new2("edge view", jsx, (d)=> { d.bendingMode = EdgeBendingMode.Line; });
-    // let node: DVoidEdge = DVoidEdge.new();
-    /*function makeep(x:number, y:number, w=5, h=5) {
-        // return new GraphSize(x, y, w, h);
-        let e = DEdgePoint.new(undefined, node.id, undefined, undefined, new GraphSize(x, y, w, h));
-        return e.id;
-    }*/
-    // let makeedgepoints = [makeep(50, 100), makeep(80, 100), makeep(120, 120), makeep(150,120), makeep(150, 80)];
-    // SetFieldAction.new(node.id, "midnodes",  makeedgepoints, '', true);
-    // node.midnodes = [makeep(50, 100), makeep(80, 100), makeep(120, 120), makeep(150,120), makeep(150, 80)];
-    // CreateElementAction.new(view); CreateElementAction.new(midnodeview); CreateElementAction.new(node);
-    let graphid = store.getState().graphs[0];
-    return <div style={{position:"absolute", zIndex:1000, top:"50px", left:"50px", width:"500px", height:"500px", background:"white", border:"4px solid black"}}>
-        <div style={{height:"100%", width:"100%", position:"relative"}}>
-            {/*<DamEdge view={view.id} graphid={graphid} />*/}
-        </div>
-    </div>
-
-}
-
-
-
-
-
-
-
-
 export default TopBar;

src/graph/damedges/damedge.tsx

@@ -21,7 +21,7 @@ import {
     RuntimeAccessibleClass,
     U,
     EdgeOwnProps, EdgeStateProps,
-    LViewPoint
+    LViewPoint, DModelElement
 } from "../../joiner";
 
 let groupingsize: Dictionary<EdgeBendingMode, number> = {} as any;
@@ -84,28 +84,17 @@ class DispatchProps extends GraphElementDispatchProps {
 type AllPropss = Overlap<Overlap<EdgeOwnProps, EdgeStateProps>, DispatchProps>;
 
 function mapStateToProps(state: DState, ownProps: EdgeOwnProps): EdgeStateProps {
-    let ret: EdgeStateProps = GraphElementComponent.mapStateToProps(state, ownProps, DEdge, {...new EdgeStateProps(), ...ownProps}) as EdgeStateProps;
+    let ret: EdgeStateProps = new EdgeStateProps();
+    if (!ownProps.data) {
+        let lstart = LPointerTargetable.from(ownProps.start);
+        if (RuntimeAccessibleClass.extends(lstart.className, DModelElement.cname)) ret.data = lstart as any;
+    }
+    ret = GraphElementComponent.mapStateToProps(state, ownProps, DEdge, ret) as EdgeStateProps;
     // superret.lastSelected = state._lastSelected ? LPointerTargetable.from(state._lastSelected.modelElement) : null;
     ret.isEdgePending = {
         user: LPointerTargetable.from(state.isEdgePending.user),
         source: LPointerTargetable.from(state.isEdgePending.source)
     };
-    ret.viewpoint = LViewPoint.fromPointer(state.viewpoint);
-    // ret.key = ownProps.key || (startnodeid || (ownProps.start as any)?.id || ownProps.start) + "~" + (endnodeid || (ownProps.end as any)?.id || ownProps.end);
-    // key is already used as key || nodeid on super.render()
-    // console.log("edge", {ret, ownProps});
-
-    let startnodeid = LGraphElement.getNodeId(ownProps.start);
-    let endnodeid = LGraphElement.getNodeId(ownProps.end);
-
-    if (!startnodeid) {
-        startnodeid = LGraphElement.getNodeId(ret.data);
-    }
-    ret.start = LPointerTargetable.fromPointer(startnodeid)
-    ret.end = LPointerTargetable.fromPointer(endnodeid);
-    // U.objectMergeInPlace(superret, ret);
-    // U.removeEmptyObjectKeys(superret);
-    // console.error(superret, ret); throw Error("aaa");
     return ret;
 }
 
@@ -123,10 +112,10 @@ export const EdgeConnected = connect<EdgeStateProps, DispatchProps, EdgeOwnProps
     mapDispatchToProps
 )(EdgeComponent as any);
 
-export const DamEdge = (props: EdgeOwnProps, children: (string | React.Component)[] = []): ReactElement => {
+export const Edge = (props: EdgeOwnProps, children: (string | React.Component)[] = []): ReactElement => {
     return <EdgeConnected {...{...props, children}} isGraph={false} isVertex={true} />;
 }
 
 EdgeComponent.cname = "EdgeComponent";
 EdgeConnected.cname = "EdgeConnected";
-DamEdge.cname = "DamEdge";
+Edge.cname = "Edge";

src/graph/graphElement/graphElement.tsx

@@ -48,6 +48,7 @@ import {DefaultUsageDeclarations, EdgeOwnProps} from "./sharedTypes/sharedTypes"
 export function makeEvalContext(view: LViewElement, state: DState, ownProps: GraphElementOwnProps, stateProps: GraphElementReduxStateProps): GObject {
     let component = GraphElementComponent.map[ownProps.nodeid as Pointer<DGraphElement>];
     let allProps = {...ownProps, ...stateProps};
+    let parsedConstants = stateProps.view._parsedConstants;
     let evalContext: GObject = {
         model: stateProps.data,
         ...ownProps,
@@ -58,24 +59,12 @@ export function makeEvalContext(view: LViewElement, state: DState, ownProps: Gra
         stateProps,
         props: allProps,
         component,
-        constants:(stateProps.view?._parsedConstants || {}),
+        constants: parsedConstants,
         // getSize:vcomponent?.getSize, setSize: vcomponent?.setSize,
-        ...(stateProps.view?._parsedConstants || {}),
+        ...parsedConstants,
         // ...stateProps.usageDeclarations, NOT because they are not evaluated yet. i need a basic eval context to evaluate them
     };
     evalContext.__proto__ = windoww.defaultContext;
-
-    // todo: move them out of component, make it parse in view.set_constants and save the result in a LView variable along with parsed JSX string "React.createElement(...)"
-    if (view.constants) {
-        try {
-            // priority 0: eval constants
-            let constants = U.evalInContextAndScope(view.constants, evalContext, evalContext);
-            U.objectMergeInPlace(evalContext, constants);
-        }
-        catch (e) {
-            Log.ee("Invalid view.constants: " + view.constants, {error:e, view, allProps, constants: view.constants});
-        }
-    }
     return evalContext;
 }
 
@@ -108,7 +97,6 @@ function setTemplateString(stateProps: InOutParam<GraphElementReduxStateProps>,
         // ret.evalContext.usageDeclarations = ret.usageDeclarations;
         let tempContext: GObject = {__param: stateProps.usageDeclarations};
         tempContext.__proto__ = evalContext;
-        Log.exDev(!tempContext.data, "missing data", tempContext, stateProps);
         U.evalInContextAndScopeNew("("+stateProps.view.usageDeclarations+")(this.__param)", tempContext, true, false);
         U.objectMergeInPlace(evalContext, stateProps.usageDeclarations);
         // ret.evalContext.props = ret; mo more needed since UD doesn't update props anymore // hotfix to update context props after usageDeclaration mapping
@@ -125,7 +113,7 @@ function setTemplateString(stateProps: InOutParam<GraphElementReduxStateProps>,
     let jsxCodeString: DocString<ReactNode>;
     let jsxparsedfunc: () => React.ReactNode;
     try {
-        jsxCodeString = JSXT.fromString(view.jsxString, {factory: 'React.createElement'});
+        jsxCodeString = JSXT.fromString(view.jsxString, {factory: 'React.createElement'}); // todo: questa cosa va spostata nel render, non nel mapstate
     }
     catch (e: any) {
         // Log.eDevv();
@@ -202,7 +190,8 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
     }
 
     static mapLModelStuff(state: DState, ownProps: GraphElementOwnProps, ret: GraphElementReduxStateProps): void {
-        ret.data = LPointerTargetable.wrap(ownProps.data);
+        // NB: Edge constructor might have set it from props.start, so keep the check before overwriting.
+        if (!ret.data?.__isProxy) ret.data = LPointerTargetable.wrap(ownProps.data);
         /*
         const meid: string = (typeof ownProps.data === 'string' ? ownProps.data as string : (ownProps.data as any as DModelElement)?.id) as string;
         // Log.exDev(!meid, "model element id not found in GE.mapstatetoprops", {meid, ret, ownProps, state});
@@ -255,14 +244,19 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
             } else*/
             if (dGraphElementDataClass === DEdge) {
                 // set start and end from ownprops;
-                let edgeProps: EdgeStateProps = ret as EdgeStateProps;
                 let edgeOwnProps: EdgeOwnProps = ownProps as EdgeOwnProps;
-                let start = edgeProps.start.id; //typeof edgeProps.start === "string" ? edgeProps.start : (edgeProps.start as any).id; // at runtime i found proxy wrapped instead of id, no idea why
-                let end = edgeProps.end.id; // typeof edgeProps.end === "string" ? edgeProps.end : (edgeProps.end as any).id;
+                let edgeStateProps: EdgeStateProps = ret as EdgeStateProps;
+                let startnodeid = LGraphElement.getNodeId(edgeOwnProps.start);
+                let endnodeid = LGraphElement.getNodeId(edgeOwnProps.end);
+                if (!startnodeid) {
+                    startnodeid = LGraphElement.getNodeId(ret.data);
+                }
+                edgeStateProps.start = LPointerTargetable.fromPointer(startnodeid)
+                edgeStateProps.end = LPointerTargetable.fromPointer(endnodeid);
                 let longestLabel = undefined; // edgeOwnProps.label;
                 let labels: DEdge["labels"] = []; // edgeOwnProps.labels || [];
-                dge = DEdge.new(ownProps.htmlindex as number, ret.data?.id, parentnodeid, graphid, nodeid, start, end, longestLabel, labels);
-                ret.node = (ret as any).edge = MyProxyHandler.wrap(dge);
+                dge = DEdge.new(ownProps.htmlindex as number, ret.data?.id, parentnodeid, graphid, nodeid, startnodeid, endnodeid, longestLabel, labels);
+                edgeStateProps.node = edgeStateProps.edge = MyProxyHandler.wrap(dge);
             }
             else {
                 let initialSize = ownProps.initialSize;
@@ -278,7 +272,7 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
     ////// mapper func
     static mapStateToProps(state: DState, ownProps: GraphElementOwnProps, dGraphDataClass: (typeof DGraphElement | typeof DEdge) = DGraphElement, startingobj?: GObject): GraphElementReduxStateProps {
         // console.log('dragx GE mapstate', {dGraphDataClass});
-        let ret: GraphElementReduxStateProps = (startingobj || {...ownProps}) as GraphElementReduxStateProps; // NB: cannot use a constructor, must be pojo
+        let ret: GraphElementReduxStateProps = (startingobj || {}) as GraphElementReduxStateProps; // NB: cannot use a constructor, must be pojo
         GraphElementComponent.mapLModelStuff(state, ownProps, ret);
         if (Debug.lightMode && (!ret.data || !(lightModeAllowedElements.includes(ret.data.className)))){
             return ret;
@@ -503,7 +497,10 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
         try {
             if (this.props.preRenderFunc) {
                 // eval prerender
-                let obj = U.evalInContextAndScope<GObject>("("+this.props.preRenderFunc+")()", context);
+                let obj: GObject = {};
+                let tempContext: GObject = {__param: obj};
+                tempContext.__proto__ = context;
+                U.evalInContextAndScopeNew("("+this.props.preRenderFunc+")(this.__param)", tempContext, true, false);
                 U.objectMergeInPlace(context, obj);
             }
         }

src/graph/graphElement/sharedTypes/sharedTypes.tsx

@@ -90,6 +90,7 @@ export class EdgeOwnProps extends GraphElementOwnProps {
 
 export class EdgeStateProps extends GraphElementReduxStateProps {
     node!: LEdge;
+    edge!: LEdge; // just alias for node
     //lastSelected!: LModelElement | null;
     isEdgePending!: { user: LUser, source: LClass };
     viewpoint!: LViewPoint;

src/joiner/components.tsx

@@ -24,7 +24,7 @@ export {DefaultNode, DefaultNodeComponent} from "../graph/defaultNode/DefaultNod
 export {Graph, Vertex, VoidVertex, GraphVertex, Field, EdgePoint, VertexComponent} from "../graph/vertex/Vertex"; // require overlap, graphelement
 export {GraphsContainer, GraphsContainerComponent} from "../graph/graph/graphContainer"; // require vertex, graph
 //export {DockLayoutComponent} from "../components/abstract/DockLayoutComponent";
-export {DamEdge, EdgeComponent,} from "../graph/damedges/damedge";
+export {Edge, EdgeComponent,} from "../graph/damedges/damedge";
 export {GenericInput} from "../components/forEndUser/GenericInput"
 
 

src/joiner/index.ts

@@ -241,7 +241,7 @@ w.GraphPoint = GraphPoint;
 w.$s = $s;
 */
 export {
-    TextArea, Select, Input, Image, DamEdge,
+    TextArea, Select, Input, Image, Edge,
     GraphsContainerComponent,
     Overlap as OverlapComponent,
     GraphsContainer,