caixanegra 0.3.4 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 37e8a2fbf540c8bfe1f1c85cf1dd82638bde895abe10bf24369860a6996c1c7b
-  data.tar.gz: f65ae1c5c97c7cd8264c157d93748748ec7e8084e7baba2c3f3c7113adfd60d9
+  metadata.gz: 002efa6f5c1a220426d102e5f055b50eff9fb55e5742d6c2c33d6474f890fd8a
+  data.tar.gz: 03c265dbfa950af4d043bfc56711593b2cb1661f76fc2ca40327fbc7a7f5e309
 SHA512:
-  metadata.gz: 7eb792dd9e30f18921dd6ff8c4bab52a9c564f4f93204aeb8925bf5e0255093e64e00dfb9b16b9ac0f19991fccf9868157e17c788cafa66932ef5112f96b187d
-  data.tar.gz: '09b9f690181fd28e25f5a8cd25ee1e3588af0c9efdadcd3597676fb80d9b93cbec43563d73a4086314f73fab34b11c27653cab163f10521121dd04c85a53a756'
+  metadata.gz: da48c854b8646515af968b7c685cece267a5bed236f1f58d5331de39a2d75bded3f0896b84d09de7cbe70c0fad7f388ef5891684bc04f45995e0b1afdc9d1784
+  data.tar.gz: 28b98d23640368db0f32475c4cd6209fb39648e723e63d70ae2fd814e88c05ca6c9033dccc1accfa3c2c331413569fb54e1b52f115cc26841703019dec4fa0a2

data/README.md

@@ -46,7 +46,7 @@ This will give you the UID that **caixanegra** designer will understand, using t
 
 ```ruby
 my_flow = somewhere.get_flow # get from your own persistence or transport solution
-uid = Caixanegra::Manager.handler(my_flow || {})
+uid = Caixanegra::Manager.handler(flow_definition: my_flow || {})
 ```
 
 You can then safely navigate to the designer.

data/app/assets/javascripts/caixanegra/designer.js

@@ -303,6 +303,10 @@ window.Caixanegra.Designer = {
       document.querySelector("#console").addEventListener("click", this.toggleExecutionConsole.bind(this));
       document.querySelector("#clearCarryOverObject").addEventListener("click", this.clearCarryOverObject.bind(this));
       document.querySelector("#reset").addEventListener("click", this.resetExecution.bind(this));
+      document.querySelector("#duplicate").addEventListener("click", this.duplicateUnit.bind(this));
+      document.querySelector("#importFlow").addEventListener("click", this.#importFlow.bind(this));
+      document.querySelector("#exportFlow").addEventListener("click", this.#exportFlow.bind(this));
+      document.querySelector("#importFlowFile").addEventListener("change", this.#importFlowFileChanged.bind(this));
       this.toggleBlocker(true, "loading your flow");
       window.addEventListener("resize", this.#windowResized.bind(drawingSurface));
       drawingSurface.addEventListener("update_start", this.#engineUpdate.bind(this));
@@ -385,6 +389,8 @@ window.Caixanegra.Designer = {
       }
 
       container.append(wrapper);
+
+      return wrapper;
     }
 
     deleteUnit() {
@@ -394,6 +400,12 @@ window.Caixanegra.Designer = {
       this.toggleDeleteConfirmation();
     }
 
+    duplicateUnit() {
+      this.unitDetailPane.classList.remove("-open");
+      this.unitDebugHitsPane.classList.remove("-open");
+      this.cloneUnit(this.selectedUnit.oid);
+    }
+
     flushToConsole(entries) {
       const container = document.querySelector("#executionConsole");
       container.innerHTML = "";
@@ -468,7 +480,8 @@ window.Caixanegra.Designer = {
     flowSnapshot() {
       const snapshot = {
         entrypoint: this.#units.find((unit) => {return unit.type === "starter"})?.oid,
-        units: []
+        units: [],
+        initialCarryover: this.digInitialCarryOver(document.querySelector("#carryOverObject"))
       };
 
       this.#units.forEach((unit) => {
@@ -587,33 +600,81 @@ window.Caixanegra.Designer = {
         });
 
         this.#loadedComponents.catalog = true;
-        this.#reveal();
+        this.reveal();
       });
     }
 
     loadFlow() {
       this.api.getFlow(this.flowId).then((response) => {
         const flowData = response;
-        this.gre.clear();
-        this.#units = [];
 
-        (flowData?.units || []).forEach((unit) => {
-          this.createUnit(unit);
-        });
-
-        this.#units.forEach((unit) => {
-          (unit?.exits || []).forEach((exit) => {
-            const object = this.#units.find((targetUnit) => targetUnit.oid === exit.target);
-            if (object) { exit.target = object; }
-          });
-        });
+        this.#loadFlowFromJSON(flowData);
 
         this.#loadedComponents.flow = true;
-        this.#reveal();
+        this.reveal();
+      });
+    }
+
+    #loadFlowFromJSON(flowData) {
+      this.gre.clear();
+      this.#units = [];
+
+      (flowData?.units || []).forEach((unit) => {
+        this.createUnit(unit);
+      });
+
+      this.#units.forEach((unit) => {
+        (unit?.exits || []).forEach((exit) => {
+          const object = this.#units.find((targetUnit) => targetUnit.oid === exit.target);
+          if (object) { exit.target = object; }
+        });
       });
+
+      this.buildInitialCarryover(flowData.initialCarryover);
+    }
+
+    digBuildInitialCarryover(container, key, objectPointer) {
+      const lastChild = container.childNodes[container.childNodes.length -1];
+
+      if (key !== null) {
+        container.childNodes[0].querySelector("input").value = key;
+      }
+
+      if (Array.isArray(objectPointer)) {
+        this.coeAssignType(lastChild, "array");
+
+        for (let idx = 0; idx < objectPointer.length; idx++) {
+          this.digBuildInitialCarryover(
+            this.coeAddRow(container.querySelector(".rows")),
+            null,
+            objectPointer[idx]
+          );
+        }
+      } else if (typeof objectPointer === "object") {
+        this.coeAssignType(lastChild, "object");
+
+        for (const key in objectPointer) {
+          this.digBuildInitialCarryover(this.coeAddRow(container.querySelector(".rows")), key, objectPointer[key]);
+        }
+      } else if (typeof objectPointer === "number") {
+        this.coeAssignType(lastChild, "number");
+        lastChild.querySelector("input").value = objectPointer;
+      } else {
+        this.coeAssignType(lastChild, "string");
+        lastChild.querySelector("input").value = objectPointer;
+      }
+    }
+
+    buildInitialCarryover(initialCarryover) {
+      this.clearCarryOverObject();
+      const base = document.querySelector("#carryOverObject > .rows");
+
+      for (const key in initialCarryover) {
+        this.digBuildInitialCarryover(this.coeAddRow(base), key, initialCarryover[key]);
+      }
     }
 
-    #reveal() {
+    reveal() {
       if (this.#loadedComponents.flow && this.#loadedComponents.catalog) {
         this.toggleBlocker(false);
       }
@@ -713,6 +774,21 @@ window.Caixanegra.Designer = {
       });
     }
 
+    cloneUnit(oid) {
+      const unit = this.#units.find((unit) => unit.oid === oid);
+      const dup = this.#dupObject(unit);
+      
+      dup.oid = Sabertooth.Utils.generateOId();
+      dup.position = { x: unit.position.x + 25, y: unit.position.y + 25 };
+      dup.title = `${dup.title} (copy)`;
+      
+      dup.exits.forEach(exit => {
+        delete exit.target;
+      });
+
+      this.createUnit(dup);
+    }
+
     showError(message) {
       this.actionMessage(true, message, "error");
       setTimeout(() => {this.actionMessage(false)}, 5000);
@@ -762,6 +838,73 @@ window.Caixanegra.Designer = {
       this.unitDebugHitsPane.classList.remove("-open");
     }
 
+    #dupObject(obj) {
+      if (typeof obj !== 'object' || obj === null) {
+        return obj;
+      }
+    
+      const clonedObject = Array.isArray(obj) ? [] : {};
+      
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          clonedObject[key] = this.#dupObject(obj[key]);
+        }
+      }
+    
+      return clonedObject;
+    }
+
+    #importFlow() {
+       document.querySelector("#importFlowFile").click();
+    }
+
+    #importFlowFileChanged() {
+      const fileInput = document.querySelector("#importFlowFile");
+
+      if (fileInput.files.length === 0) {
+        return;
+      }
+
+      const selectedFile = fileInput.files[0];
+      const reader = new FileReader();
+    
+      reader.onload = (event) => {
+        this.toggleBlocker(true, "importing your flow");
+        this.gre.disable();
+        const flowBackup = this.flowSnapshot();
+
+        try {
+          this.#loadFlowFromJSON(JSON.parse(event.target.result));
+
+          this.actionMessage(true, "Flow imported", "ok");
+          setTimeout(() => {this.actionMessage(false)}, 4000);
+        } catch (error) {
+          this.#loadFlowFromJSON(flowBackup);
+
+          this.actionMessage(true, "Failed to import flow. Rolled back", "error");
+          setTimeout(() => {this.actionMessage(false)}, 4000);
+        }
+        
+        this.gre.enable();
+        this.reveal();
+      };
+    
+      reader.readAsText(selectedFile);
+    }
+
+    #exportFlow() {
+      const blob = new Blob([JSON.stringify(this.flowSnapshot())], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = "flow_definition.cxn";
+      link.click();
+      URL.revokeObjectURL(url);
+
+      this.actionMessage(true, "Flow exported", "ok");
+      setTimeout(() => {this.actionMessage(false)}, 4000);
+    }
+
     #executeFlow() {
       this.toggleBlocker(true, "saving your flow");
 

data/app/assets/stylesheets/caixanegra/designer.scss

@@ -3,6 +3,10 @@ $accent-color: rgb(105, 105, 105);
 $accent-highlight-color: lighten($accent-color, 20%);
 $accent-contrast-color: darken($accent-color, 20%);
 
+#importFlowFile {
+  display: none;
+}
+
 #execution {
   position: fixed;
   display: flex;
@@ -37,6 +41,33 @@ $accent-contrast-color: darken($accent-color, 20%);
   }
 }
 
+#io {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  bottom: 8px;
+  right: 8px;
+
+  div {
+    cursor: pointer;
+    transition: all 250ms ease-in-out;
+    height: 18px;
+    width: 18px;
+    margin-left: 8px;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    svg {
+      path, polygon, line, polyline {
+        fill: white;
+        stroke: white;
+      }
+    }
+  }
+}
+
 #addUnit {
   position: fixed;
   border-radius: 50%;
@@ -649,10 +680,25 @@ $accent-contrast-color: darken($accent-color, 20%);
       flex-direction: row;
       justify-content: space-between;
 
-      .name {
-        font-size: 1em;
-        font-weight: bold;
+      .name-holder {
         width: 100%;
+        display: flex;
+        flex-direction: row;
+
+        .name {
+          font-size: 1em;
+          font-weight: bold;
+        }
+
+        #duplicate {
+          margin-left: 5px;
+          width: 10px;
+          cursor: pointer;
+
+          svg path {
+            fill: $accent-contrast-color;
+          }
+        }
       }
 
       .delete {

data/app/views/caixanegra/designer/index.html.erb

@@ -25,11 +25,28 @@
     </svg>
   </div>
   <div id="console">
-    <svg version="1.1" id="XMLID_75_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
       <path d="M24,24H0V0h24V24z M2,22h20V2H6v2h16v2H2V22z M2,4h2V2H2V4z M16,16h-6v-2h6V16z M5.7,15.7l-1.4-1.4L6.6,12L4.3,9.7 l1.4-1.4L9.4,12L5.7,15.7z"/>
     </svg>
   </div>
 </div>
+<div id="io">
+  <input type="file" id="importFlowFile" accept=".cxn">
+  <div id="importFlow">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
+      <polyline id="primary" points="13 9 13 13 9 13" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline>
+      <line id="primary-2" data-name="primary" x1="3" y1="3" x2="13" y2="13" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+      <path id="primary-3" data-name="primary" d="M13.89,5H20a1,1,0,0,1,1,1V20a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V13.89" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+    </svg>
+  </div>
+  <div id="exportFlow">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
+      <polyline id="primary" points="17 3 21 3 21 7" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline>
+      <line id="primary-2" data-name="primary" x1="11" y1="13" x2="21" y2="3" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
+      <path id="primary-3" data-name="primary" d="M19,13.89V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V6A1,1,0,0,1,4,5h6.11" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
+    </svg>
+  </div>
+</div>
 <div id="addUnit"><span>+</span></div>
 <div id="save"><span>save</span></div>
 <div id="unitMenu"></div>
@@ -51,7 +68,14 @@
   <div class="color-code"></div>
   <div class="content">
     <div id="unitDetailClass" class="unit-detail-headers">
-      <div class="name"></div>
+      <div class="name-holder">
+        <div class="name"></div>
+        <span id="duplicate">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 6V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h4zm2 0h4a2 2 0 0 1 2 2v4h4V2H8v4zM2 8v10h10V8H2zm4 4v-2h2v2h2v2H8v2H6v-2H4v-2h2z"/>
+          </svg>
+        </span>
+      </div>
       <div class="delete">
         <div id="toggler">
           <svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">

data/app/views/layouts/caixanegra/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Caixanegra</title>
+  <title>caixanegra flow designer</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>

data/lib/caixanegra/manager.rb

@@ -3,7 +3,7 @@
 module Caixanegra
   class Manager
     class << self
-      def handler(flow_definition = {})
+      def handler(flow_definition: {})
         transient_store = Caixanegra.transient_store
         uid = transient_store.new_uid
 

data/lib/caixanegra/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Caixanegra
-  VERSION = '0.3.4'
+  VERSION = '0.4.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: caixanegra
 version: !ruby/object:Gem::Version
-  version: 0.3.4
+  version: 0.4.0
 platform: ruby
 authors:
 - sergiorribeiro
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-20 00:00:00.000000000 Z
+date: 2023-10-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails