[gh-88] Improved flow addon name.

source/WebApp/js/ui/codemirror/addon-jump-arrows.js

@@ -26,12 +26,12 @@
     return element;
   }
 
-  class FlowLayer {
+  class ArrowLayer {
     constructor(cm) {
       const sizer = cm.getWrapperElement()
         .querySelector(".CodeMirror-sizer");
       const svg = createSVG("svg", {
-        "class": "CodeMirror-flow-layer",
+        "class": "CodeMirror-jump-arrow-layer",
         width:  sizer.offsetWidth,
         height: sizer.offsetHeight
       });
@@ -70,20 +70,21 @@
       const fromY = from.y + offsetY;
       const toY = to.y - offsetY;
 
-      const g = this.renderSVG("g", {
-        "class": "CodeMirror-flow-jump" + (up ? " CodeMirror-flow-jump-up" : "") + (options.throw ? " CodeMirror-flow-jump-throw" : ""),
-        "data-debug": key
-      });
+      const groupClassName = "CodeMirror-jump-arrow"
+        + (up ? " CodeMirror-jump-arrow-up" : "")
+        + (options.throw ? " CodeMirror-jump-arrow-throw" : "");
+
+      const g = this.renderSVG("g", { class: groupClassName });
       this.renderSVG(g, "path", {
-        "class": "CodeMirror-flow-jump-line",
+        class: "CodeMirror-jump-arrow-line",
         d: `M ${from.x} ${fromY} H ${left} V ${toY} H ${to.x}`
       });
       this.renderSVG(g, "circle", {
-        "class": "CodeMirror-flow-jump-start",
+        class: "CodeMirror-jump-arrow-start",
         cx: from.x, cy: fromY, r: 1.5
       });
       this.renderSVG(g, "path", {
-        "class": "CodeMirror-flow-jump-arrow",
+        class: "CodeMirror-jump-arrow-end",
         d: `M ${to.x} ${toY} l -2 -1 v 2 z`
       });
       this.rendered[key] = true;
@@ -136,21 +137,22 @@
     }
   }
 
-  CodeMirror.defineExtension("addFlowJump", function(fromLine, toLine, options) {
+  const STATE_KEY = "jumpArrowLayer";
+  CodeMirror.defineExtension("addJumpArrow", function(fromLine, toLine, options) {
     /* eslint-disable no-invalid-this */
-    let flow = this.state.flow;
-    if (!flow) {
-      flow = new FlowLayer(this);
-      this.state.flow = flow;
+    let layer = this.state[STATE_KEY];
+    if (!layer) {
+      layer = new ArrowLayer(this);
+      this.state[STATE_KEY] = layer;
     }
-    flow.renderJump(fromLine, toLine, options);
+    layer.renderJump(fromLine, toLine, options);
   });
 
-  CodeMirror.defineExtension("clearFlowPoints", function() {
+  CodeMirror.defineExtension("clearJumpArrows", function() {
     /* eslint-disable no-invalid-this */
-    const flow = this.state.flow;
-    if (!flow)
+    const layer = this.state[STATE_KEY];
+    if (!layer)
       return;
-    flow.clear();
+    layer.clear();
   });
 });

source/WebApp/js/ui/components/app-mirrorsharp.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import mirrorsharp from 'mirrorsharp';
 import 'codemirror/mode/mllike/mllike';
-import '../codemirror/addon-flow.js';
+import '../codemirror/addon-jump-arrows.js';
 import groupToMap from '../../helpers/group-to-map.js';
 
 Vue.component('app-mirrorsharp', {
@@ -68,7 +68,7 @@ Vue.component('app-mirrorsharp', {
                 }
 
                 const cm = instance.getCodeMirror();
-                cm.clearFlowPoints();
+                cm.clearJumpArrows();
                 if (!steps)
                     return;
 
@@ -84,7 +84,7 @@ Vue.component('app-mirrorsharp', {
 
                     const important = (lastLineNumber != null && (lineNumber < lastLineNumber || lineNumber - lastLineNumber > 2)) || lastException;
                     if (important)
-                        cm.addFlowJump(lastLineNumber - 1, lineNumber - 1, { throw: !!lastException });
+                        cm.addJumpArrow(lastLineNumber - 1, lineNumber - 1, { throw: !!lastException });
                     lastLineNumber = lineNumber;
                     lastException = exception;
                 }

source/WebApp/less/imports/codemirror.less

@@ -6,7 +6,7 @@
 @import (inline) '../../node_modules/codemirror-addon-lint-fix/dist/lint-fix.css';
 @import (inline) '../../node_modules/mirrorsharp/mirrorsharp.css';
 @import (inline) 'codemirror/addon-infotip.css';
-@import (inline) 'codemirror/addon-flow.css';
+@import (inline) 'codemirror/addon-jump-arrows.css';
 
 textarea, .CodeMirror {
     .code-text();

source/WebApp/less/imports/codemirror/addon-flow.css

@@ -1,34 +0,0 @@
-.CodeMirror-flow-layer {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-}
-
-.CodeMirror-flow-jump {
-    fill: #b4cdce;
-    stroke: #b4cdce;
-}
-
-.CodeMirror-flow-jump-up {
-    fill: #f7d1c5;
-    stroke: #f7d1c5;
-}
-
-.CodeMirror-flow-jump-throw {
-    fill: #dc3912;
-    stroke: #dc3912;
-}
-
-.CodeMirror-flow-jump-line {
-    fill: none;
-}
-
-.CodeMirror-flow-jump-start {
-    fill: #fff;
-}
-
-.CodeMirror-flow-jump-throw .CodeMirror-flow-jump-start {
-    fill: inherit;
-}

source/WebApp/less/imports/codemirror/addon-jump-arrows.css

@@ -0,0 +1,34 @@
+.CodeMirror-jump-arrow-layer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.CodeMirror-jump-arrow {
+    fill: #b4cdce;
+    stroke: #b4cdce;
+}
+
+.CodeMirror-jump-arrow-up {
+    fill: #f7d1c5;
+    stroke: #f7d1c5;
+}
+
+.CodeMirror-jump-arrow-throw {
+    fill: #dc3912;
+    stroke: #dc3912;
+}
+
+.CodeMirror-jump-arrow-line {
+    fill: none;
+}
+
+.CodeMirror-jump-arrow-start {
+    fill: #fff;
+}
+
+.CodeMirror-jump-arrow-throw .CodeMirror-jump-arrow-start {
+    fill: inherit;
+}