Integrated action events from draw io. Added ViewContext for action e…

…vents

src/action_sequencer/ActionEvent.js

@@ -1,12 +1,15 @@
+import ViewContext from '../view_components/ViewContext';
+
 export default class ActionEvent
 {
-  constructor()
+  constructor(name, method)
   {
-
+    this.name = name;
+    this.method = method;
   }
 
-  trigger(context)
+  trigger()
   {
-
+    ViewContext.properties[this.name][this.method]();
   }
 }

src/action_sequencer/ActionSequencer.js

@@ -73,6 +73,9 @@ export default class ActionSequencer
       trigger_time: trigger_time,
       action: action
     });
+
+    this.duration = Math.max(this.duration, trigger_time);
+
   }
 
   add_action_interpolator(from, to, interpolator, use_dynamic_from_value = false)
@@ -131,7 +134,7 @@ export default class ActionSequencer
           this.action_events[i].trigger_time < to)
       {
         // console.log("Play event: " + this.action_events[i].action.constructor.name + " at "+  this.action_events[i].trigger_time);
-        this.action_events[i].action.trigger(this.context);
+        this.action_events[i].action.trigger();
       }
     }
     let channel_names = Object.keys(this.initial_context);

src/index.js

@@ -37,6 +37,7 @@ import UI from './UI';
 import ViewComponent from './view_components/ViewComponent';
 import ViewComponentManager from './view_components/ViewComponentManager';
 import ViewManager from './view_components/ViewManager';
+import ViewContext from './view_components/ViewContext';
 import TransitionTable from './view_components/transition/TransitionTable';
 
 import ArrayUtilities from './utilities/ArrayUtilities';
@@ -143,6 +144,7 @@ export {
   ActionInterpolator,
   NumberInterpolator,
   VectorInterpolator,
+  ViewContext,
 
   MedianFilter,
   GaussianBlurrer,

src/view_components/ApplicationView.js

@@ -12,10 +12,13 @@ export default class ApplicationView extends ViewState
     this.container = container;
     this.url = url;
 
+
+    let transition_data = new DrawIOAnimationSheet().parse(ResourceContainer.get(`${name}_data`));
+
     let transitions = [
       {
         to: name,
-        data: new DrawIOAnimationSheet().parse(ResourceContainer.get(`${name}_data`))
+        data: transition_data
       }
     ];
 

src/view_components/ViewContext.js

@@ -0,0 +1,16 @@
+class ViewContext
+{
+  constructor()
+  {
+    this.properties = {};
+  }
+
+
+
+  add_property(name, p)
+  {
+    this.properties[name] = p;
+  }
+}
+
+export default new ViewContext;

src/view_components/transition/ActionSequencerBuilder.js

@@ -1,5 +1,6 @@
 import ActionSequencer from '../../action_sequencer/ActionSequencer';
 import NumberInterpolator from '../../action_sequencer/NumberInterpolator';
+import ActionEvent from '../../action_sequencer/ActionEvent';
 
 export default class ActionSequencerBuilder
 {
@@ -8,8 +9,11 @@ export default class ActionSequencerBuilder
     this.initial_state_data = initial_state_data;
   }
 
-  from_animation_sheet(tracks, current_context)
+  from_animation_sheet(animation_data, current_context)
   {
+    let tracks = animation_data.animation_tracks;
+    let triggers = animation_data.triggers;
+
     let initial_tracks = this.state_to_tracks(this.initial_state_data);
 
     for (let i = 0; i < initial_tracks.length; i++)
@@ -29,6 +33,13 @@ export default class ActionSequencerBuilder
       sequencer.add_action_interpolator(t.from_time, t.to_time, interpolator, true);
     }
 
+    for(let i=0; i< triggers.length; i++)
+    {
+      let t = triggers[i];
+      let action_event = new ActionEvent(t.name, t.method);
+      sequencer.add_action_event(t.at_time, action_event);
+    }
+
     return sequencer;
   }
 

src/view_components/transition/DrawIOAnimationSheet.js

@@ -12,20 +12,38 @@ export default class DrawIOAnimationSheet
     let animation_nodes = doc.querySelectorAll('mxGeometry');
 
     let animation_tracks = [];
+    let triggers = [];
 
     for (let i = 0; i < animation_nodes.length; i++)
     {
       let node = animation_nodes[i];
+      let parent_node = node.parentElement;
+      let data = parent_node.getAttribute('value');
 
-      let x_pos = node.getAttribute('x');
-      x_pos = x_pos === null ? 0 : parseFloat(x_pos);
+
+      let x_pos = this.get_node_x_position(node);
 
       let from = x_pos / 100;
-      let to = from + parseFloat(node.getAttribute('width')) / 100;
+      let duration = parseFloat(node.getAttribute('width')) / 100;
+
+      //is trigger
+      if(parent_node.getAttribute('style').includes('rhombus;'))
+      {
+        let split_data = data.split('.');
+        let trigger_name = split_data[0];
+        let trigger_method = split_data[1];
+
+        triggers.push({
+          name: trigger_name,
+          method: trigger_method,
+          at_time: from + duration*0.5
+        })
+      }
+
+
+
 
-      let parent_node = node.parentElement;
 
-      let data = parent_node.getAttribute('value');
 
       let valid_element = parent_node.getAttribute('style').includes('rounded=0;') &&
                            !parent_node.getAttribute('style').includes('text;');
@@ -53,7 +71,7 @@ export default class DrawIOAnimationSheet
         animation_tracks.push({
           attribute_name: attribute_name,
           from_time: from,
-          to_time: to,
+          to_time: from+duration,
           to_value: to_value,
           easing_function: easing_function
         });
@@ -64,7 +82,16 @@ export default class DrawIOAnimationSheet
     {
       return a.from_time - b.from_time;
     });
+    return {
+      animation_tracks: animation_tracks,
+      triggers: triggers
+    };
+  }
 
-    return animation_tracks;
+  get_node_x_position(node)
+  {
+    let x_pos = node.getAttribute('x');
+    return x_pos === null ? 0 : parseFloat(x_pos);
   }
+
 }