ohzi-core 7.0.0 → 7.0.1

package/src/view_components/transition/ActionSequencerBuilder.js

@@ -1,106 +1,122 @@
-import ActionSequencer from '../../action_sequencer/ActionSequencer';
-import NumberInterpolator from '../../action_sequencer/NumberInterpolator';
-import ActionEvent from '../../action_sequencer/ActionEvent';
-import DrawIOAnimationSheet from './DrawIOAnimationSheet';
-
-export default class ActionSequencerBuilder
-{
-  constructor(initial_state_data)
-  {
-    this.initial_state_data = initial_state_data;
-  }
-
-  from_animation_sheet(animation_data, current_context, initial_context)
-  {
-    initial_context = initial_context || this.initial_state_data;
-    const tracks = animation_data.animation_tracks;
-    const triggers = animation_data.triggers;
-
-    const initial_tracks = this.state_to_tracks(this.initial_state_data);
-
-    for (let i = 0; i < initial_tracks.length; i++)
-    {
-      if (tracks.find(element => element.attribute_name === initial_tracks[i].attribute_name) === undefined)
-      {
-        tracks.push(initial_tracks[i]);
-      }
-    }
-
-    const sequencer = new ActionSequencer(current_context);
-
-    for (let i = 0; i < tracks.length; i++)
-    {
-      const t = tracks[i];
-      const interpolator = new NumberInterpolator(
-        t.attribute_name,
-        current_context[t.attribute_name],
-        t.to_value,
-        t.initial,
-        t.easing_function
-      );
-
-      sequencer.add_action_interpolator(t.from_time, t.to_time, interpolator, true);
-    }
-
-    for (let i = 0; i < triggers.length; i++)
-    {
-      const t = triggers[i];
-      const action_event = new ActionEvent(t.name, t.method);
-      sequencer.add_action_event(t.at_time, action_event);
-    }
-
-    return sequencer;
-  }
-
-  state_to_tracks(state)
-  {
-    const tracks = [];
-
-    const keys = Object.keys(state);
-
-    for (let i = 0; i < keys.length; i++)
-    {
-      tracks.push({
-        attribute_name: keys[i],
-        from_time: 0,
-        to_time: 1,
-        to_value: state[keys[i]],
-        initial: true,
-        easing_function: 'ease_in_out_cubic'
-      });
-    }
-
-    return tracks;
-  }
-
-  from_draw_io(xml, context)
-  {
-    const transition_data = (new DrawIOAnimationSheet()).parse(xml);
-    const tracks = transition_data.animation_tracks;
-    const triggers = transition_data.triggers;
-    const sequencer = new ActionSequencer(context);
-
-    for (let i = 0; i < tracks.length; i++)
-    {
-      const t = tracks[i];
-      const interpolator = new NumberInterpolator(
-        t.attribute_name,
-        context[t.attribute_name],
-        t.to_value,
-        t.initial,
-        t.easing_function
-      );
-
-      sequencer.add_action_interpolator(t.from_time, t.to_time, interpolator, true);
-    }
-
-    for (let i = 0; i < triggers.length; i++)
-    {
-      const t = triggers[i];
-      const action_event = new ActionEvent(t.name, t.method);
-      sequencer.add_action_event(t.at_time, action_event);
-    }
-
-    return sequencer;
-  }
-}
+import ActionSequencer from '../../action_sequencer/ActionSequencer';
+import NumberInterpolator from '../../action_sequencer/NumberInterpolator';
+import ActionEvent from '../../action_sequencer/ActionEvent';
+import DrawIOAnimationSheet from './DrawIOAnimationSheet';
+
+export default class ActionSequencerBuilder
+{
+  constructor(initial_state_data)
+  {
+    this.initial_state_data = initial_state_data;
+  }
+
+  from_animation_sheet(animation_data, current_context, initial_context)
+  {
+    initial_context = initial_context || this.initial_state_data;
+    const tracks = animation_data.animation_tracks;
+    const triggers = animation_data.triggers;
+
+    const initial_tracks = this.state_to_tracks(this.initial_state_data, this.get_longest_time(animation_data.animation_tracks));
+
+    for (let i = 0; i < initial_tracks.length; i++)
+    {
+      if (tracks.find(element => element.attribute_name === initial_tracks[i].attribute_name) === undefined)
+      {
+        tracks.push(initial_tracks[i]);
+      }
+    }
+
+    const sequencer = new ActionSequencer(current_context);
+
+    for (let i = 0; i < tracks.length; i++)
+    {
+      const t = tracks[i];
+      const interpolator = new NumberInterpolator(
+        t.attribute_name,
+        current_context[t.attribute_name],
+        t.to_value,
+        t.initial,
+        t.easing_function
+      );
+
+      sequencer.add_action_interpolator(t.from_time, t.to_time, interpolator, true);
+    }
+
+    for (let i = 0; i < triggers.length; i++)
+    {
+      const t = triggers[i];
+      const action_event = new ActionEvent(t.name, t.method);
+      sequencer.add_action_event(t.at_time, action_event);
+    }
+
+    return sequencer;
+  }
+
+  state_to_tracks(state, longest_time)
+  {
+    const tracks = [];
+
+    const keys = Object.keys(state);
+
+    for (let i = 0; i < keys.length; i++)
+    {
+      tracks.push({
+        attribute_name: keys[i],
+        from_time: 0,
+        to_time: longest_time < 1 ? longest_time : 1,
+        to_value: state[keys[i]],
+        initial: true,
+        easing_function: 'ease_in_out_cubic'
+      });
+    }
+
+    return tracks;
+  }
+
+  from_draw_io(xml, context)
+  {
+    const transition_data = (new DrawIOAnimationSheet()).parse(xml);
+    const tracks = transition_data.animation_tracks;
+    const triggers = transition_data.triggers;
+    const sequencer = new ActionSequencer(context);
+
+    for (let i = 0; i < tracks.length; i++)
+    {
+      const t = tracks[i];
+      const interpolator = new NumberInterpolator(
+        t.attribute_name,
+        context[t.attribute_name],
+        t.to_value,
+        t.initial,
+        t.easing_function
+      );
+
+      sequencer.add_action_interpolator(t.from_time, t.to_time, interpolator, true);
+    }
+
+    for (let i = 0; i < triggers.length; i++)
+    {
+      const t = triggers[i];
+      const action_event = new ActionEvent(t.name, t.method);
+      sequencer.add_action_event(t.at_time, action_event);
+    }
+
+    return sequencer;
+  }
+
+  get_longest_time(tracks)
+  {
+    let longest_time = -1;
+
+    for (let i = 0; i < tracks.length; i++)
+    {
+      const track = tracks[i];
+
+      const track_time = track.to_time;
+
+      longest_time = track_time > longest_time ? track_time : longest_time;
+    }
+
+    return longest_time;
+  }
+}

package/src/view_components/transition/DrawIOAnimationSheet.js

@@ -1,90 +1,90 @@
-export default class DrawIOAnimationSheet
-{
-  constructor()
-  {
-
-  }
-
-  parse(xml_document)
-  {
-    const doc = new DOMParser().parseFromString(xml_document, 'text/xml');
-
-    const animation_nodes = doc.querySelectorAll('mxGeometry');
-
-    const animation_tracks = [];
-    const triggers = [];
-
-    for (let i = 0; i < animation_nodes.length; i++)
-    {
-      const node = animation_nodes[i];
-      const parent_node = node.parentElement;
-      const data = parent_node.getAttribute('value');
-
-      const x_pos = this.get_node_x_position(node);
-
-      const from = x_pos / 100;
-      const duration = parseFloat(node.getAttribute('width')) / 100;
-
-      // is trigger
-      if (parent_node.getAttribute('style').includes('rhombus;'))
-      {
-        const split_data = data.split('.');
-        const trigger_name = split_data[0];
-        const trigger_method = split_data[1];
-
-        triggers.push({
-          name: trigger_name,
-          method: trigger_method,
-          at_time: from + duration * 0.5
-        });
-      }
-
-      const valid_element = parent_node.getAttribute('style').includes('rounded=0;') &&
-                           !parent_node.getAttribute('style').includes('text;');
-
-      if (valid_element && data !== '' && !data.includes(' '))
-      {
-        const split_data = data.split('=');
-
-        const attribute_name = split_data[0];
-
-        const value_data = split_data[1].split('--');
-        const to_value = parseFloat(value_data[0]);
-        const easing_function = value_data[1];
-
-        if (split_data.length !== 2)
-        {
-          console.error('DrawIO data is malformed:', data);
-        }
-
-        if (value_data.length !== 2)
-        {
-          console.error('DrawIO data is malformed:', data);
-        }
-
-        animation_tracks.push({
-          attribute_name: attribute_name,
-          from_time: from,
-          to_time: from + duration,
-          to_value: to_value,
-          easing_function: easing_function
-        });
-      }
-    }
-
-    animation_tracks.sort((a, b) =>
-    {
-      return a.from_time - b.from_time;
-    });
-    return {
-      animation_tracks: animation_tracks,
-      triggers: triggers
-    };
-  }
-
-  get_node_x_position(node)
-  {
-    const x_pos = node.getAttribute('x');
-    return x_pos === null ? 0 : parseFloat(x_pos);
-  }
-}
+export default class DrawIOAnimationSheet
+{
+  constructor()
+  {
+
+  }
+
+  parse(xml_document)
+  {
+    const doc = new DOMParser().parseFromString(xml_document, 'text/xml');
+
+    const animation_nodes = doc.querySelectorAll('mxGeometry');
+
+    const animation_tracks = [];
+    const triggers = [];
+
+    for (let i = 0; i < animation_nodes.length; i++)
+    {
+      const node = animation_nodes[i];
+      const parent_node = node.parentElement;
+      const data = parent_node.getAttribute('value');
+
+      const x_pos = this.get_node_x_position(node);
+
+      const from = x_pos / 100;
+      const duration = parseFloat(node.getAttribute('width')) / 100;
+
+      // is trigger
+      if (parent_node.getAttribute('style').includes('rhombus;'))
+      {
+        const split_data = data.split('.');
+        const trigger_name = split_data[0];
+        const trigger_method = split_data[1];
+
+        triggers.push({
+          name: trigger_name,
+          method: trigger_method,
+          at_time: from + duration * 0.5
+        });
+      }
+
+      const valid_element = parent_node.getAttribute('style').includes('rounded=0;') &&
+                           !parent_node.getAttribute('style').includes('text;');
+
+      if (valid_element && data !== '' && !data.includes(' '))
+      {
+        const split_data = data.split('=');
+
+        const attribute_name = split_data[0];
+
+        const value_data = split_data[1].split('--');
+        const to_value = parseFloat(value_data[0]);
+        const easing_function = value_data[1];
+
+        if (split_data.length !== 2)
+        {
+          console.error('DrawIO data is malformed:', data);
+        }
+
+        if (value_data.length !== 2)
+        {
+          console.error('DrawIO data is malformed:', data);
+        }
+
+        animation_tracks.push({
+          attribute_name: attribute_name,
+          from_time: from,
+          to_time: from + duration,
+          to_value: to_value,
+          easing_function: easing_function
+        });
+      }
+    }
+
+    animation_tracks.sort((a, b) =>
+    {
+      return a.from_time - b.from_time;
+    });
+    return {
+      animation_tracks: animation_tracks,
+      triggers: triggers
+    };
+  }
+
+  get_node_x_position(node)
+  {
+    const x_pos = node.getAttribute('x');
+    return x_pos === null ? 0 : parseFloat(x_pos);
+  }
+}

package/src/view_components/transition/TransitionTable.js

@@ -1,54 +1,54 @@
-import ActionSequencerBuilder from './ActionSequencerBuilder';
-
-export default class TransitionTable
-{
-  constructor()
-  {
-    this.transitions = [];
-    this.initial_state_data = {};
-  }
-
-  get(from_state_name, to_state_name, current_context)
-  {
-    for (let i = 0; i < this.transitions.length; i++)
-    {
-      if (this.transitions[i].from === from_state_name && this.transitions[i].to === to_state_name)
-      {
-        const action_sequencer = new ActionSequencerBuilder(this.initial_state_data).from_animation_sheet(this.transitions[i].data, current_context);
-
-        return action_sequencer;
-      }
-    }
-
-    for (let i = 0; i < this.transitions.length; i++)
-    {
-      if (this.transitions[i].to === to_state_name)
-      {
-        const action_sequencer = new ActionSequencerBuilder(this.initial_state_data).from_animation_sheet(this.transitions[i].data, current_context);
-
-        return action_sequencer;
-      }
-    }
-
-    console.error('TransitionTable.get no data found for: ', from_state_name, to_state_name);
-    return undefined;
-  }
-
-  add_transitions(transitions)
-  {
-    for (let i = 0; i < transitions.length; i++)
-    {
-      this.transitions.push(transitions[i]);
-    }
-  }
-
-  set_transitions(transitions)
-  {
-    this.transitions = transitions;
-  }
-
-  set_initial_state_data(initial_state_data)
-  {
-    this.initial_state_data = initial_state_data;
-  }
-}
+import ActionSequencerBuilder from './ActionSequencerBuilder';
+
+export default class TransitionTable
+{
+  constructor()
+  {
+    this.transitions = [];
+    this.initial_state_data = {};
+  }
+
+  get(from_state_name, to_state_name, current_context)
+  {
+    for (let i = 0; i < this.transitions.length; i++)
+    {
+      if (this.transitions[i].from === from_state_name && this.transitions[i].to === to_state_name)
+      {
+        const action_sequencer = new ActionSequencerBuilder(this.initial_state_data).from_animation_sheet(this.transitions[i].data, current_context);
+
+        return action_sequencer;
+      }
+    }
+
+    for (let i = 0; i < this.transitions.length; i++)
+    {
+      if (this.transitions[i].to === to_state_name)
+      {
+        const action_sequencer = new ActionSequencerBuilder(this.initial_state_data).from_animation_sheet(this.transitions[i].data, current_context);
+
+        return action_sequencer;
+      }
+    }
+
+    console.error('TransitionTable.get no data found for: ', from_state_name, to_state_name);
+    return undefined;
+  }
+
+  add_transitions(transitions)
+  {
+    for (let i = 0; i < transitions.length; i++)
+    {
+      this.transitions.push(transitions[i]);
+    }
+  }
+
+  set_transitions(transitions)
+  {
+    this.transitions = transitions;
+  }
+
+  set_initial_state_data(initial_state_data)
+  {
+    this.initial_state_data = initial_state_data;
+  }
+}