diff --git a/src/action_sequencer/ActionEvent.js b/src/action_sequencer/ActionEvent.js index 08d6c55..6b9dcc8 100644 --- a/src/action_sequencer/ActionEvent.js +++ b/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](); } } diff --git a/src/action_sequencer/ActionSequencer.js b/src/action_sequencer/ActionSequencer.js index 8494454..e7a4cc8 100644 --- a/src/action_sequencer/ActionSequencer.js +++ b/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); diff --git a/src/index.js b/src/index.js index e9cca45..615462e 100644 --- a/src/index.js +++ b/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, diff --git a/src/view_components/ApplicationView.js b/src/view_components/ApplicationView.js index c430b84..68aa8c0 100644 --- a/src/view_components/ApplicationView.js +++ b/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 } ]; diff --git a/src/view_components/ViewContext.js b/src/view_components/ViewContext.js new file mode 100644 index 0000000..824c4f7 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/view_components/transition/ActionSequencerBuilder.js b/src/view_components/transition/ActionSequencerBuilder.js index 52b1045..b1d8ad1 100644 --- a/src/view_components/transition/ActionSequencerBuilder.js +++ b/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; } diff --git a/src/view_components/transition/DrawIOAnimationSheet.js b/src/view_components/transition/DrawIOAnimationSheet.js index 3ab24bb..da4d98b 100644 --- a/src/view_components/transition/DrawIOAnimationSheet.js +++ b/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); } + }