Skip to content

Commit 5f20996

Browse files
kgrytekgryte
committed
Add functionality for syncing component state
1 parent 94afab3 commit 5f20996

2 files changed

Lines changed: 258 additions & 0 deletions

File tree

‎lib/node_modules/@stdlib/plot/hist/lib/render/svg/index.js‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/**
2+
* @license Apache-2.0
3+
*
4+
* Copyright (c) 2018 The Stdlib Authors.
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
'use strict';
20+
21+
// MODULES //
22+
23+
var logger = require( 'debug' );
24+
var xAxisTransform = require( './utils/x_axis_transform.js' );
25+
var yAxisTransform = require( './utils/y_axis_transform.js' );
26+
var renderMarks = require( './marks' );
27+
var init = require( './init.js' );
28+
var sync = require( './sync.js' );
29+
30+
31+
// VARIABLES //
32+
33+
var debug = logger( 'hist:render:svg:main' );
34+
35+
36+
// MAIN //
37+
38+
/**
39+
* Renders a virtual DOM tree.
40+
*
41+
* @private
42+
* @param {Object} state - state
43+
* @returns {VTree} virtual tree
44+
*/
45+
function render( state ) {
46+
var annotations;
47+
var clipPath;
48+
var canvas;
49+
var title;
50+
var graph;
51+
var marks;
52+
var xAxis;
53+
var yAxis;
54+
var bkgd;
55+
var defs;
56+
var svg;
57+
58+
svg = state.$.svg;
59+
60+
// Lazily initialize...
61+
if ( !svg.canvas ) {
62+
debug( 'Initializing components...' );
63+
init( state );
64+
}
65+
debug( 'Syncing component states...' );
66+
sync( state );
67+
68+
debug( 'Rendering individual components...' );
69+
70+
debug( 'Rendering annotations...' );
71+
annotations = svg.annotations.render();
72+
73+
debug( 'Rendering clip-path...' );
74+
clipPath = svg.clipPath.render();
75+
76+
debug( 'Rendering canvas...' );
77+
canvas = svg.canvas.render();
78+
79+
debug( 'Rendering graph...' );
80+
graph = svg.graph.render();
81+
82+
debug( 'Rendering title...' );
83+
title = svg.title.render();
84+
85+
debug( 'Rendering x-axis...' );
86+
xAxis = svg.xAxis.render();
87+
88+
debug( 'Rendering y-axis...' );
89+
yAxis = svg.yAxis.render();
90+
91+
debug( 'Rendering background...' );
92+
bkgd = svg.bkgd.render();
93+
94+
debug( 'Rendering definitions...' );
95+
defs = svg.defs.render();
96+
97+
debug( 'Rendering marks...' );
98+
marks = renderMarks( state );
99+
100+
debug( 'Updating rendered components...' );
101+
102+
debug( 'Updating title...' );
103+
title.properties.attributes.x = state.paddingLeft + ( state.graphWidth/2 );
104+
title.properties.attributes.y = state.paddingTop / 2;
105+
106+
debug( 'Updating x-axis...' );
107+
xAxis.properties.className += ' x';
108+
xAxis.properties.attributes.transform = xAxisTransform( state.xAxisOrient, state.graphHeight ); // eslint-disable-line max-len
109+
110+
debug( 'Updating y-axis...' );
111+
yAxis.properties.className += ' y';
112+
yAxis.properties.attributes.transform = yAxisTransform( state.yAxisOrient, state.graphWidth ); // eslint-disable-line max-len
113+
114+
debug( 'Assembling virtual tree...' );
115+
116+
debug( 'Inserting clip-path into definitions...' );
117+
defs.children.push( clipPath );
118+
defs.count += clipPath.count;
119+
120+
debug( 'Inserting background into graph...' );
121+
graph.children.push( bkgd );
122+
graph.count += bkgd.count;
123+
124+
debug( 'Inserting marks into graph...' );
125+
graph.children.push( marks );
126+
graph.count += marks.count;
127+
128+
debug( 'Inserting x-axis into graph...' );
129+
graph.children.push( xAxis );
130+
graph.count += xAxis.count;
131+
132+
debug( 'Inserting y-axis into graph...' );
133+
graph.children.push( yAxis );
134+
graph.count += yAxis.count;
135+
136+
debug( 'Inserting title into annotations...' );
137+
annotations.children.push( title );
138+
annotations.count += title.count;
139+
140+
debug( 'Inserting definitions into canvas...' );
141+
canvas.children.push( defs );
142+
canvas.count += defs.count;
143+
144+
debug( 'Inserting graph into canvas...' );
145+
canvas.children.push( graph );
146+
canvas.count += graph.count;
147+
148+
debug( 'Inserting annotations into canvas...' );
149+
canvas.children.push( annotations );
150+
canvas.count += annotations.count;
151+
152+
return canvas;
153+
}
154+
155+
156+
// EXPORTS //
157+
158+
module.exports = render;

‎lib/node_modules/@stdlib/plot/hist/lib/render/svg/sync.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* @license Apache-2.0
3+
*
4+
* Copyright (c) 2018 The Stdlib Authors.
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
'use strict';
20+
21+
// MODULES //
22+
23+
var logger = require( 'debug' );
24+
25+
26+
// VARIABLES //
27+
28+
var debug = logger( 'hist:render:svg:sync' );
29+
30+
31+
// MAIN //
32+
33+
/**
34+
* Syncs SVG components with the current state.
35+
*
36+
* @private
37+
* @param {Object} state - state
38+
*/
39+
function sync( state ) {
40+
var svg = state.$.svg;
41+
42+
debug( 'Syncing...' );
43+
44+
debug( 'Syncing canvas...' );
45+
svg.canvas.width = state.width;
46+
svg.canvas.height = state.height;
47+
48+
debug( 'Syncing definitions...' );
49+
50+
// ...
51+
52+
debug( 'Syncing clipping path...' );
53+
svg.clipPath.width = state.graphWidth;
54+
svg.clipPath.height = state.graphHeight;
55+
56+
debug( 'Syncing graph...' );
57+
svg.graph.translateX = state.paddingLeft;
58+
svg.graph.translateY = state.paddingTop;
59+
60+
debug( 'Syncing annotations...' );
61+
62+
// ...
63+
64+
debug( 'Syncing title...' );
65+
svg.title.text = state.title;
66+
67+
debug( 'Syncing background...' );
68+
svg.bkgd.width = state.graphWidth;
69+
svg.bkgd.height = state.graphHeight;
70+
71+
debug( 'Syncing marks...' );
72+
svg.marks.clipPathId = state._clipPathId; // eslint-disable-line no-underscore-dangle
73+
74+
debug( 'Syncing columns...' );
75+
svg.columns.xScale = state.xScale;
76+
svg.columns.yScale = state.yScale;
77+
78+
// svg.columns.isDefined = state.isDefined; // TODO
79+
80+
debug( 'Syncing x-axis...' );
81+
svg.xAxis.scale = state.xScale;
82+
svg.xAxis.label = state.xLabel;
83+
svg.xAxis.tickFormat = state.xTickFormat;
84+
svg.xAxis.numTicks = state.xNumTicks;
85+
svg.xAxis.orientation = state.xAxisOrient;
86+
87+
debug( 'Syncing y-axis...' );
88+
svg.yAxis.scale = state.yScale;
89+
svg.yAxis.label = state.yLabel;
90+
svg.yAxis.tickFormat = state.yTickFormat;
91+
svg.yAxis.numTicks = state.yNumTicks;
92+
svg.yAxis.orientation = state.yAxisOrient;
93+
94+
debug( 'Sync complete.' );
95+
}
96+
97+
98+
// EXPORTS //
99+
100+
module.exports = sync;

0 commit comments

Comments
 (0)