added mermaid and a lot of cmap changes

static/cmap/cmap.js

@@ -1,5 +1,5 @@
 /**
- * racket-wiki cmap component 0.2.95
+ * racket-wiki cmap component 0.2.122
  * Based on cmap v0.1.3.
  * (c) 2015 iOnStage
  * Released under the MIT License.
@@ -596,6 +596,7 @@
     this.parentElement = this.prop(null);
     this.cache = this.prop({});
     this.relations = this.prop([]);
+    this.connectionChangeHandler = null;
   }, Component);
 
   Link.prototype.straighten = function(sx, sy, tx, ty) {
@@ -1241,25 +1242,30 @@
 
   ComponentList.prototype.fromPoint = function(ctor, x, y) {
     var data = this.data;
-    var closeComponent = null;
+    // The visual stack is connector controls, concepts and finally relations.
+    // Use that same priority for coordinate hit testing so a relation that is
+    // hidden behind a concept can never steal the concept's click.
+    var types = (ctor === Component) ? [Connector, Node, Link] : [ctor];
 
-    for (var i = data.length - 1; i >= 0; i--) {
-      var component = data[i];
+    for (var toleranceIndex = 0; toleranceIndex < 2; toleranceIndex++) {
+      var tolerance = toleranceIndex === 0 ? 0 : 8;
+      for (var typeIndex = 0; typeIndex < types.length; typeIndex++) {
+        for (var i = data.length - 1; i >= 0; i--) {
+          var component = data[i];
 
-      if (!(component instanceof ctor))
-        continue;
+          if (!(component instanceof types[typeIndex]))
+            continue;
 
-      if (component.visible === false)
-        continue;
+          if (component.visible === false)
+            continue;
 
-      if (component.contains(x, y, 0))
-        return component;
-
-      if (!closeComponent && component.contains(x, y, 8))
-        closeComponent = component;
+          if (component.contains(x, y, tolerance))
+            return component;
+        }
+      }
     }
 
-    return closeComponent;
+    return null;
   };
 
   var DisabledConnectorList = helper.inherits(function() {
@@ -1308,6 +1314,10 @@
     this.markDirty();
   }, Component);
 
+  Cmap.LINK_Z_INDEX_BASE = 100;
+  Cmap.NODE_Z_INDEX_BASE = 100000;
+  Cmap.CONNECTOR_Z_INDEX_BASE = 200000;
+
   Cmap.prototype.add = function(component) {
     component.parentElement(this.element());
     this.componentList().add(component);
@@ -1331,12 +1341,17 @@
   };
 
   Cmap.prototype.updateZIndex = function() {
-    this.componentList().toArray().forEach(function(component, index) {
+    var linkIndex = 0;
+    var nodeIndex = 0;
+    this.componentList().toArray().forEach(function(component) {
       if (component instanceof Connector)
         return;
 
-      // update z-index of node/link
-      var zIndex = index * 10;
+      // Relations always occupy a lower band than concept nodes. Reordering a
+      // selected component therefore only changes its order inside that band.
+      var zIndex = component instanceof Link ?
+        Cmap.LINK_Z_INDEX_BASE + linkIndex++ :
+        Cmap.NODE_Z_INDEX_BASE + nodeIndex++;
       component.zIndex(zIndex);
 
       if (!(component instanceof Link))
@@ -1344,7 +1359,7 @@
 
       // update connector z-index of link
       helper.eachInstance(component.relations(), LinkConnectorRelation, function(relation, index) {
-        relation.connector().zIndex(zIndex + index + 1);
+        relation.connector().zIndex(Cmap.CONNECTOR_Z_INDEX_BASE + index);
       });
     });
   };
@@ -1756,6 +1771,15 @@
     if (component instanceof Node && typeof component.moveEndHandler === 'function')
       component.moveEndHandler(component.x(), component.y(), event);
 
+    if (component instanceof Connector) {
+      var link = context.link;
+      var triple = helper.firstInstance(link.relations(), Triple);
+      var connectedNode = triple ? triple[context.type + 'Node']() : null;
+
+      if (typeof link.connectionChangeHandler === 'function')
+        link.connectionChangeHandler(context.type, connectedNode, event);
+    }
+
     this.unfixScrollSize();
   };
 
@@ -2037,6 +2061,18 @@
     return LinkModule.connectNode(this, Cmap.CONNECTION_TYPE_TARGET, node);
   };
 
+  LinkModule.prototype.onConnectionChange = function(handler) {
+    var module = this;
+
+    if (handler !== null && typeof handler !== 'function')
+      throw TypeError('Invalid connection-change handler');
+
+    this.component.connectionChangeHandler = handler ? function(type, node, event) {
+      var nodeModule = node ? module.cmap.nodeModuleList.fromComponent(node) : null;
+      handler(module.wrapper, type, nodeModule ? nodeModule.wrapper : null, event);
+    } : null;
+  };
+
   LinkModule.prototype.straighten = function() {
     var link = this.component;
     var triple = helper.firstInstance(link.relations(), Triple);