support map state (#30)

Author: sakazuki

.eslintrc.json

@@ -11,9 +11,9 @@
   "globals": {
     "mxscript": false,
     "Draw": false,
-    "ui": false,
-    "graph": false,
+    "Graph": false,
     "Editor": false,
+    "EditDataDialog": true,
     "mxUtils": false,
     "mxEvent": false,
     "mxCellState": false,
@@ -32,10 +32,11 @@
     "mxMorphing": false,
     "mxForm": false,
     "mxCodecRegistry": false,
-    "EditDataDialog": true,
     "mxCodec": false,
     "mxClient": false,
     "mxCompactTreeLayout": false,
+    "mxCellRenderer": false,
+    "mxSwimlane": false,
     "AWS": false,
     "__listStateMachines": false,
     "__describeStateMachine": false,

dist/aws-step-functions.js

@@ -20,6 +20,7 @@ declare let WaitState
 declare let SucceedState
 declare let FailState
 declare let ParallelState
+declare let MapState
 
 declare let StartAtEdge
 declare let NextEdge

src/@types/awssf.d.ts

@@ -6,6 +6,7 @@ declare module Editor {
   const helpImage: string
 }
 
+declare let Graph
 declare let EditDataDialog
 
 declare namespace ui {

src/@types/draw-io.d.ts

@@ -17,8 +17,9 @@ declare namespace mxUtils {
   function findNode( node, attr, value)
   function getPrettyXml(node)
   function extend(ctor, superCtor)
-    
+  function getValue(array, key, defaultValue)
 }
+
 declare namespace mxEvent {
   function addGestureListeners( node, startListener, moveListener?, endListener? )
   function getClientX( e )
@@ -134,4 +135,11 @@ declare class mxMorphing extends mxAnimation{
 declare class mxAnimation {
   startAnimation()
   addListener(event, listener)
-}
+}
+declare class mxSwimlane {
+  isHorizontal: boolean | Function
+  paintVertexShape: Function
+}
+declare module mxCellRenderer {
+  function registerShape(key, shape)
+}

src/@types/mxgraph.d.ts

@@ -30,7 +30,10 @@ mxConnectionHandler.prototype.insertEdge = function (parent, id, value, source,
   if (awssfUtils.isParallelChild(source) || awssfUtils.isParallelChild(target)) {
     if (source.parent != target.parent) return null;
   }
-  if ((source == target) && (awssfUtils.isTask(source) || awssfUtils.isParallel(source))) {
+  if (awssfUtils.isMapChild(source) || awssfUtils.isMapChild(target)) {
+    if (source.parent != target.parent) return null;
+  }
+  if ((source == target) && (awssfUtils.isTask(source) || awssfUtils.isParallel(source) || awssfUtils.isMap(source))) {
     edge = RetryEdge.prototype.create();
   } else if (this.edgeState) {
     edge = this.edgeState.cell;

src/extend.ts

@@ -1,13 +1,13 @@
 import * as awssfUtils from "../utils";
 
 export const awssfImportDialog = function (editorUi, title) {
-  var graph = editorUi.editor.graph;
+  const graph = editorUi.editor.graph;
 
   function recurseStates (states) {
-    var res = {hash: {}, list: []};
-    var cell;
-    for (var name in states) {
-      var body = states[name];
+    const res = {hash: {}, list: []};
+    let cell;
+    for (const name in states) {
+      const body = states[name];
       if (body.Type === "Pass") {
         cell = PassState.prototype.create(name, body);
       } else if (body.Type === "Task") {
@@ -23,10 +23,15 @@ export const awssfImportDialog = function (editorUi, title) {
       } else if (body.Type === "Parallel") {
         cell = ParallelState.prototype.create(name, body);
         for(const branch in body.Branches) {
-          var _sub = recurseStates(body.Branches[branch].States);
+          const _sub = recurseStates(body.Branches[branch].States);
           for(const _cell of _sub.list) cell.insert(_cell);
           Object.assign(res.hash, _sub.hash);
         }
+      } else if (body.Type === "Map") {
+        cell = MapState.prototype.create(name, body);
+        const _sub = recurseStates(body.Iterator.States);
+        for(const _cell of _sub.list) cell.insert(_cell);
+        Object.assign(res.hash, _sub.hash);
       }
       res.hash[name] = cell;
       res.list.push(cell);
@@ -79,11 +84,16 @@ export const awssfImportDialog = function (editorUi, title) {
       }
       if (body.Type === "Parallel") {
         for(const branch of body.Branches) {
-          var _sp = vertexes[name].getChildAt(0);
-          var tmp = recurseEdges(branch, vertexes, _sp);
+          const _sp = vertexes[name].getChildAt(0);
+          const tmp = recurseEdges(branch, vertexes, _sp);
           tmp.map(v => vertexes[name].insert(v));
         }
       }
+      if (body.Type === "Map") {
+        const _sp = vertexes[name].getChildAt(0);
+        const tmp = recurseEdges(body.Iterator, vertexes, _sp);
+        tmp.map(v => vertexes[name].insert(v));
+      }
     }
     return res;
   }
@@ -122,7 +132,7 @@ export const awssfImportDialog = function (editorUi, title) {
     graph.setSelectionCells(cells);
     graph.getModel().beginUpdate();
     try {
-      var parallels = cells.filter(function (v) { return v.awssf.type === "Parallel"; });
+      var parallels = cells.filter(function (v) { return v.awssf.type.match(/Parallel|Map/); });
       var parallelLayout = new mxCompactTreeLayout(graph, false);
       parallelLayout.edgeRouting = false;
       parallelLayout.levelDistance = 30;

src/form/dialog.ts

@@ -96,8 +96,14 @@ export function setupEditData () {
         const datalist = document.createElement('datalist');
         datalist.id = "errors";
         var errors = [
-          "States.ALL", "States.Timeout", "States.TaskFailed", "States.Permissions",
-          "States.ResultPathMatchFailure", "States.BranchFailed", "States.NoChoiceMatched"
+          "States.ALL",
+          "States.Timeout",
+          "States.TaskFailed",
+          "States.Permissions",
+          "States.ResultPathMatchFailure",
+          "States.ParameterPathFailure",
+          "States.BranchFailed",
+          "States.NoChoiceMatched"
         ];
         for (const error of errors) {
           const opt = document.createElement('option');

src/form/editData.ts

@@ -0,0 +1,5 @@
+import { LayeredShape } from "./layered";
+
+export function init () {
+  const mapShape = LayeredShape;
+}

src/shapes/index.ts

@@ -0,0 +1,50 @@
+export const LayeredShape = function () {};
+LayeredShape.prototype = new mxSwimlane(); //mxActor();
+LayeredShape.prototype.constructor = LayeredShape;
+LayeredShape.prototype.isHorizontal = function () {return false;};
+LayeredShape.prototype.paintVertexShape = function (c, x, y, w, h) {
+  c.translate(x, y);
+  var dx = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'dx', this.dx))));
+  dx = Math.min(w * 0.5, h * 0.5, dx);
+  
+  c.begin();
+  c.moveTo(w - dx * 0.5, dx);
+  c.lineTo(w, dx);
+  c.lineTo(w, h);
+  c.lineTo(dx, h);
+  c.lineTo(dx, h - dx * 0.5);
+  c.lineTo(w - dx * 0.5, h - dx * 0.5);
+  c.close();
+  c.fillAndStroke();
+  
+  c.begin();
+  c.moveTo(w - dx, dx * 0.5);
+  c.lineTo(w - dx * 0.5, dx * 0.5);
+  c.lineTo(w - dx * 0.5, h - dx * 0.5);
+  c.lineTo(dx * 0.5, h - dx * 0.5);
+  c.lineTo(dx * 0.5, h - dx);
+  c.lineTo(w - dx, h - dx);
+  c.close();
+  c.fillAndStroke();
+  
+  c.begin();
+  c.moveTo(0, 0);
+  c.lineTo(w - dx, 0);
+  c.lineTo(w - dx, h - dx);
+  c.lineTo(0, h - dx);
+  c.close();
+  c.stroke();
+
+  c.begin();
+  c.moveTo(0, this.startSize);
+  c.lineTo(w - dx, this.startSize);
+  c.stroke();
+};
+
+mxCellRenderer.registerShape('awssf.layered', LayeredShape);
+Graph.handleFactory['awssf.layered'] = function (state) {
+  var handles = [];
+  handles.push(...Graph.handleFactory['swimlane'](state));
+  // handles.push(...Graph.handleFactory['mxgraph.basic.layered_rect'](state));
+  return handles;
+};