Skip to content

Commit

Permalink
add ut and tweak comments.
Browse files Browse the repository at this point in the history
  • Loading branch information
@100pah
100pah committed Dec 26, 2016
1 parent 253bf28 commit aa723df
Show file tree
Hide file tree
Showing 5 changed files with 1,339 additions and 37 deletions.
90 changes: 60 additions & 30 deletions src/component/graphic.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
define(function(require) {
define(function (require) {

var echarts = require('../echarts');
var zrUtil = require('zrender/core/util');
var modelUtil = require('../util/model');
var graphicUtil = require('../util/graphic');
var formatUtil = require('../util/format');
var layoutUtil = require('../util/layout');

// -------------
// Preprocessor
// -------------

echarts.registerPreprocessor(function (option) {
var graphicOption = option && option.graphic;

Expand All @@ -23,7 +25,7 @@ define(function(require) {
}
else {
// Only one graphic instance can be instantiated. (We dont
// want that too many views created in echarts._viewMap)
// want that too many views are created in echarts._viewMap)
option.graphic = [option.graphic[0]];
}
}
Expand All @@ -32,21 +34,25 @@ define(function(require) {
}
});

// ------
// Model
// ------

var GraphicModel = echarts.extendComponentModel({

type: 'graphic',

defaultOption: {

// Extra properties for each elements:
//
// left/right/top/bottom: (like 12, '22%', 'center', default undefined)
// If left/rigth is set, shape.x/shape.cx/position is not used.
// If top/bottom is set, shape.y/shape.cy/position is not used.
// This mechanism is useful when you want position a group/element
// against the right side or center of this container.
// If left/rigth is set, shape.x/shape.cx/position will not be used.
// If top/bottom is set, shape.y/shape.cy/position will not be used.
// This mechanism is useful when you want to position a group/element
// against the right side or the center of this container.
//
// width/height: (can only pixel value, default 0)
// width/height: (can only be pixel value, default 0)
// Only be used to specify contianer(group) size, if needed. And
// can not be percentage value (like '33%'). See the reason in the
// layout algorithm below.
Expand All @@ -55,21 +61,22 @@ define(function(require) {
// Specify how to calculate boundingRect when locating.
// 'all': Get uioned and transformed boundingRect
// from both itself and its descendants.
// This mode simplies confine a group of elements in the bounding
// This mode simplies confining a group of elements in the bounding
// of their ancester container (e.g., using 'right: 0').
// 'raw': Only use not transformed boundingRect of itself.
// This mode likes css behavior, useful when you want a
// element can overflow its container. (Consider a rotated
// circle needs to be located in a corner.)
// 'raw': Only use the boundingRect of itself and before transformed.
// This mode is similar to css behavior, which is useful when you
// want an element to be able to overflow its container. (Consider
// a rotated circle needs to be located in a corner.)

// Note: elements is always behind its ancestors in elements array.
// Note: elements is always behind its ancestors in this elements array.
elements: [],
parentId: null
},

/**
* Save for performance (only update needed graphics).
* Save el options for the sake of the performance (only update modified graphics).
* The order is the same as those in option. (ancesters -> descendants)
*
* @private
* @type {Array.<Object>}
*/
Expand Down Expand Up @@ -137,7 +144,7 @@ define(function(require) {
elOptionsToUpdate.push(newElOption);

// Update existing options, for `getOption` feature.
var newElOptCopy = zrUtil.extend({}, newElOption); // Avoid modified.
var newElOptCopy = zrUtil.extend({}, newElOption);
var $action = newElOption.$action;
if (!$action || $action === 'merge') {
if (existElOption) {
Expand All @@ -151,7 +158,7 @@ define(function(require) {
}

// We can ensure that newElOptCopy and existElOption are not
// the same object, so merge will not change newElOptCopy.
// the same object, so `merge` will not change newElOptCopy.
zrUtil.merge(existElOption, newElOptCopy, true);
// Rigid body, use ignoreSize.
layoutUtil.mergeLayoutParam(existElOption, newElOptCopy, {ignoreSize: true});
Expand All @@ -172,10 +179,12 @@ define(function(require) {

if (existList[index]) {
existList[index].hv = newElOption.hv = [
isSetLoc(newElOption, ['left', 'right']), // Rigid body, dont care `width`.
isSetLoc(newElOption, ['top', 'bottom']) // Rigid body, Dont care `height`.
// Rigid body, dont care `width`.
isSetLoc(newElOption, ['left', 'right']),
// Rigid body, dont care `height`.
isSetLoc(newElOption, ['top', 'bottom'])
];
// Given defualt group size, otherwise may layout error.
// Give default group size. Otherwise layout error may occur.
if (existList[index].type === 'group') {
existList[index].width == null && (existList[index].width = newElOption.width = 0);
existList[index].height == null && (existList[index].height = newElOption.height = 0);
Expand Down Expand Up @@ -210,7 +219,11 @@ define(function(require) {
* {type: 'circle', parentId: 'xx'},
* {type: 'polygon', parentId: 'xx'}
* ]
*
* @private
* @param {Array.<Object>} optionList option list
* @param {Array.<Object>} result result of flatten
* @param {Object} parentOption parent option
*/
_flatten: function (optionList, result, parentOption) {
zrUtil.each(optionList, function (option) {
Expand All @@ -225,7 +238,7 @@ define(function(require) {
if (option.type === 'group' && children) {
this._flatten(children, result, option);
}
// For JSON output, and do not affect group creation.
// Deleting for JSON output, and for not affecting group creation.
delete option.children;
}
}, this);
Expand All @@ -241,7 +254,10 @@ define(function(require) {
}
});

// -----
// View
// -----

echarts.extendComponentView({

type: 'graphic',
Expand All @@ -250,11 +266,15 @@ define(function(require) {
* @override
*/
init: function (ecModel, api) {

/**
* @private
* @type {Object}
*/
this._elMap = {};

/**
* @private
* @type {module:echarts/graphic/GraphicModel}
*/
this._lastGraphicModel;
Expand All @@ -265,15 +285,15 @@ define(function(require) {
*/
render: function (graphicModel, ecModel, api) {

// Having leveraged use case and algorithm complexity, a very simple
// layout mechanism is used:
// Having leveraged between use cases and algorithm complexity, a very
// simple layout mechanism is used:
// The size(width/height) can be determined by itself or its parent (not
// implemented yet), but can not by its children. (Top-down travel)
// The location(x/y) can be determined by the bounding rect of itself
// (can including its descendants or not) and the size of its parent.
// (Bottom-up travel)

// When chart.clear() or chart.setOption({...}, true) with the same id,
// When `chart.clear()` or `chart.setOption({...}, true)` with the same id,
// view will be reused.
if (graphicModel !== this._lastGraphicModel) {
this._clear();
Expand All @@ -285,7 +305,11 @@ define(function(require) {
},

/**
* Update graphic elements.
*
* @private
* @param {Object} graphicModel graphic model
* @param {module:echarts/ExtensionAPI} api extension API
*/
_updateElements: function (graphicModel, api) {
var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
Expand All @@ -305,14 +329,14 @@ define(function(require) {
var parentId = elOption.parentId;
var targetElParent = parentId != null ? elMap[parentId] : rootGroup;

// In top/bottom mode, textVertical should not be used. But
// textBaseline should not be 'alphabetic', which is not precise.
// In top/bottom mode, textVertical should not be used. And textBaseline
// should not be 'alphabetic', which cause inaccurately locating.
if (elOption.hv && elOption.hv[1] && elOption.type === 'text') {
elOption.style = zrUtil.defaults({textBaseline: 'middle'}, elOption.style);
elOption.style.textVerticalAlign = null;
}

// Remove unnecessary props to avoid potential problem.
// Remove unnecessary props to avoid potential problems.
var elOptionCleaned = getCleanedElOption(elOption);

// For simple, do not support parent change, otherwise reorder is needed.
Expand Down Expand Up @@ -344,14 +368,18 @@ define(function(require) {
},

/**
* Locate graphic elements.
*
* @private
* @param {Object} graphicModel graphic model
* @param {module:echarts/ExtensionAPI} api extension API
*/
_relocate: function (graphicModel, api) {
var elOptions = graphicModel.option.elements;
var rootGroup = this.group;
var elMap = this._elMap;

// Bottom-up tranvese all elements (consider when ec resize) to locate elements.
// Bottom-up tranvese all elements (consider ec resize) to locate elements.
for (var i = elOptions.length - 1; i >= 0; i--) {
var elOption = elOptions[i];
var el = elMap[elOption.id];
Expand Down Expand Up @@ -379,6 +407,8 @@ define(function(require) {
},

/**
* Clear all elements.
*
* @private
*/
_clear: function () {
Expand Down Expand Up @@ -427,7 +457,7 @@ define(function(require) {
}
}

// Remove unnecessary props to avoid potential problem.
// Remove unnecessary props to avoid potential problems.
function getCleanedElOption(elOption) {
elOption = zrUtil.extend({}, elOption);
zrUtil.each(
Expand All @@ -446,4 +476,4 @@ define(function(require) {
});
return isSet;
}
});
});
3 changes: 2 additions & 1 deletion test/graphicOption.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ <h3>Test resize.</h3>



<h3>Width/height is determined by previous sibling.</h3>
<h3>bounding</h3>
<div class="block" id="main5" style="height: 400px">
<div class="chart"></div>
<textarea>
Expand Down Expand Up @@ -405,6 +405,7 @@ <h3>Width/height is determined by previous sibling.</h3>



<h3>replace</h3>
<div class="block" id="main0">
<div class="chart"></div>
<textarea>
Expand Down
30 changes: 24 additions & 6 deletions test/ut/core/utHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@
* // this.els[1] can be visited.
* });
*
* testCase.createChart(1, 300, 200)(...);
*
*
* @public
* @params {Array.<string>} [requireId] Like:
Expand Down Expand Up @@ -102,9 +104,13 @@
return wrapTestCaseFn(genContext({requireId: requireId}, context));
};

testCase.createChart = function (chartCount) {
testCase.createChart = function (chartCount, width, height) {
chartCount == null && (chartCount = 1);
return wrapTestCaseFn(genContext({chartCount: chartCount}, context));
return wrapTestCaseFn(genContext({
chartCount: chartCount,
width: width,
height: height
}, context));
};

return testCase;
Expand Down Expand Up @@ -136,12 +142,12 @@
var el = document.createElement('div');
document.body.appendChild(el);
el.style.cssText = [
'width:200px',
'height:150px',
'visibility:hidden',
'width:' + (context.width || '500') + 'px',
'height:' + (context.height || '400') + 'px',
'position:absolute',
'bottom:0',
'right:0',
'visibility:hidden'
'right:0'
].join(';');
els.push(el);
charts.push(echarts.init(el, null, {renderer: 'canvas'}));
Expand Down Expand Up @@ -314,5 +320,17 @@
}
};

/**
* @public
*/
helper.printElement = function (el) {
var result = {};
var props = ['position', 'scale', 'rotation', 'style', 'shape'];
for (var i = 0; i < props.length; i++) {
result[props[i]] = el[props[i]];
}
return window.JSON.stringify(result, null, 4);
};


})(window);

0 comments on commit aa723df

Please sign in to comment.