GraphEditor add set/pointer classes by name and fix bug in reg lookup

src/components/GraphEditor/DefaultStyles.jsx

 /**
  * These are the styles for cytoscape defined by the GraphEditor.
  * You cannot overwrite the array, only append additional rules.
+ * For more info http://js.cytoscape.org/#style
+ * Note: " For simplicity and ease of use, specificity rules are completely ignored in stylesheets.
+ * For a given style property for a given element, the last matching selector wins. "
+ *
+ *
  */
 
 const DEFAULT_STYLES = [
@@ -33,6 +38,10 @@ const DEFAULT_STYLES = [
         selector: 'edge.pointer',
         style: {
             content: 'data(label)',
+            color: 'rgb(0,0,255)',
+            'font-size': 10,
+
+            width: 1,
             'line-color': 'rgb(0,0,255)',
             'curve-style': 'bezier',
             'target-arrow-color': 'rgb(0,0,255)',
@@ -43,6 +52,10 @@ const DEFAULT_STYLES = [
         selector: 'edge.set-member',
         style: {
             content: 'data(label)',
+            color: 'rgb(255,0,255)',
+            'font-size': 10,
+
+            width: 1,
             'curve-style': 'bezier',
             'line-color': 'rgb(255,0,255)',
             'target-arrow-color': 'rgb(255,0,255)',

src/components/GraphEditor/GraphEditor.jsx

@@ -187,16 +187,10 @@ export default class GraphEditor extends Component {
         const nodeIdsWithChildren = {};
 
         const getPosition = (id) => {
-            const parentNode = nodes[id];
+            const node = nodes[id];
 
-            // while (parentNode.parent &&
-            // parentNode.parent !== activeNode &&
-            // !parentNode[CONSTANTS.CYTOSCAPE_POS_REG_KEY]) {
-            //     parentNode = children[parentNode.parent];
-            // }
-
-            return JSON.parse(JSON.stringify(parentNode.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
-                || parentNode.registries.position));
+            return JSON.parse(JSON.stringify(node.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
+                || node.registries.position || {x: 100, y: 100}));
         };
 
         const isRenderedAsGmeConnection = (id) => {
@@ -242,7 +236,8 @@ export default class GraphEditor extends Component {
                             source: childData.pointers.src,
                             target: childData.pointers.dst,
                         },
-                        classes: `${activeSelection.includes(id) ? 'in-active-selection ' : ''}gme-connection`,
+                        classes: `gme-connection ${childData.attributes.name}-gme-connection\
+${activeSelection.includes(id) ? ' in-active-selection' : ''}`,
                     };
 
                     if (createPointer && createPointer.target === id) {
@@ -315,7 +310,7 @@ export default class GraphEditor extends Component {
                                     label: setName,
                                     memberAttrs: setMemberData.memberAttrs,
                                 },
-                                classes: `set-member ${activeSelection.includes(edgeId)
+                                classes: `set-member ${setName}-set-member ${activeSelection.includes(edgeId)
                                     ? 'in-active-selection' : ''}`,
                             };
 
@@ -345,7 +340,7 @@ export default class GraphEditor extends Component {
                                 target: targetId,
                                 label: pName,
                             },
-                            classes: `${pName === 'base' ? 'base-pointer' : 'pointer'}\
+                            classes: `${pName === 'base' ? 'base-pointer' : `pointer ${pName}-pointer`}\
 ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
                         };
 
@@ -371,7 +366,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
             } else {
                 result.elements.edges.push(edgeData);
             }
-        })
+        });
 
         return result;
     }
@@ -425,19 +420,27 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
     attachCytoscapeHandlers() {
         this.cy.on('position', ({target}) => {
             const {nodes} = this.props;
-            debugger;
-            const childNodeDesc = nodes[target.id()];
+            const nodeId = target.id();
+            const childNodeDesc = nodes[nodeId];
+
+            if (!childNodeDesc) {
+                return;
+            }
+
             const floorPos = {
                 x: Math.floor(target.position().x),
                 y: Math.floor(target.position().y),
             };
 
-            if (childNodeDesc
-                && (!childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
-                    || childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY].x !== floorPos.x
-                    || childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY].y !== floorPos.y)) {
-                this.reposition[target.id()] = {
-                    id: target.id(),
+            if (!childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]) {
+                this.reposition[nodeId] = {
+                    id: nodeId,
+                    position: floorPos,
+                };
+            } else if (floorPos.x !== childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY].x
+                || floorPos.y !== childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY].y) {
+                this.reposition[nodeId] = {
+                    id: nodeId,
                     position: floorPos,
                 };
             }
@@ -446,7 +449,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
         this.cy.on('free', ({target}) => {
             const {setActiveSelection} = this.props;
             if (typeof target.id === 'function' && target.hasClass('aux-node') === false) {
-                // console.log('free', cyNode.id(), JSON.stringify(this.reposition));
                 this.storePosition(target.id());
                 setTimeout(() => {
                     setActiveSelection([target.id()]);