[SE mobile] Chart settings, fill and border.

This commit is contained in:
Alexander Yuzhin 2016-12-13 16:37:13 +03:00
parent 5f1958cc0e
commit b88e4cd119
2 changed files with 225 additions and 40 deletions

View file

@ -53,10 +53,34 @@ define([
SSE.Controllers.EditChart = Backbone.Controller.extend(_.extend((function() {
var _stack = [],
_chartObject = {},
_chartObject = undefined,
_shapeObject = undefined,
_borderInfo = {color: '000000', width: 1},
_metricText = Common.Utils.Metric.getCurrentMetricName(),
_isEdit = false;
var borderSizeTransform = (function() {
var _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
return {
sizeByIndex: function (index) {
if (index < 1) return _sizes[0];
if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
return _sizes[index];
},
sizeByValue: function (value) {
var index = 0;
_.each(_sizes, function (size, idx) {
if (Math.abs(size - value) < 0.25) {
index = idx;
}
});
return _sizes[index];
}
}
})();
return {
models: [],
collections: [],
@ -79,6 +103,8 @@ define([
me.api = api;
me.api.asc_registerCallback('asc_onSelectionChanged', _.bind(me.onApiSelectionChanged, me));
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
me.api.asc_registerCallback('asc_onUpdateChartStyles', _.bind(me.onApiUpdateChartStyles, me));
// me.api.asc_registerCallback('asc_onSelectionChanged', _.bind(me.onApiSelectionChanged, me));
// me.api.asc_registerCallback('asc_onEditorSelectionChanged', _.bind(me.onApiEditorSelectionChanged, me));
@ -110,6 +136,8 @@ define([
if ('#edit-chart-style' == pageId) {
me.initStylePage();
} else if ('#edit-chart-border-color-view' == pageId) {
me.initBorderColorPage();
} else if ('#edit-chart-reorder' == pageId) {
me.initReorderPage();
} else {
@ -129,7 +157,9 @@ define([
initStylePage: function () {
var me = this,
chartProperties = _chartObject.get_ChartProperties();
color,
chartProperties = _chartObject.get_ChartProperties(),
shapeProperties = _shapeObject.get_ShapeProperties();
// Type
@ -143,36 +173,58 @@ define([
_.defer(function () {
me._updateChartStyles(me.api.asc_getChartPreviews(_chartObject.get_ChartProperties().getType()));
});
// Fill
var paletteFillColor = new Common.UI.ThemeColorPalette({
el: $('#tab-chart-fill'),
transparent: true
});
paletteFillColor.on('select', _.bind(me.onFillColor, me));
var fill = shapeProperties.asc_getFill(),
fillType = fill.asc_getType();
if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
color = me._sdkToThemeColor(fill.asc_getFill().asc_getColor());
}
paletteFillColor.select(color);
// Init border
var borderSize = shapeProperties.get_stroke().get_width() * 72.0 / 25.4;
$('#edit-chart-bordersize input').val([borderSizeTransform.sizeByIndex(borderSize)]);
$('#edit-chart-bordersize .item-after').text(borderSizeTransform.sizeByValue(borderSize) + ' ' + _metricText);
$('#edit-chart-bordersize input').single('change touchend', _.buffered(me.onBorderSize, 100, me));
$('#edit-chart-bordersize input').single('input', _.bind(me.onBorderSizeChanging, me));
var stroke = shapeProperties.get_stroke(),
strokeType = stroke.get_type();
if (stroke && strokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
_borderInfo.color = me._sdkToThemeColor(stroke.get_color());
}
$('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == _borderInfo.color) ? _borderInfo.color : ('#' + (_.isObject(_borderInfo.color) ? _borderInfo.color.color : _borderInfo.color)))
},
initReorderPage: function () {
$('.page[data-page=edit-chart-reorder] a.item-link').single('click', _.bind(this.onReorder, this));
},
initFillColorPage: function () {
// var me = this,
// palette = me.getView('EditChart').paletteFillColor,
// color = me._sdkToThemeColor(_cellInfo.asc_getFill().asc_getColor());
//
// if (palette) {
// palette.select(color);
// palette.on('select', _.bind(me.onFillColor, me));
// }
},
initBorderColorPage: function () {
// var me = this,
// palette = new Common.UI.ThemeColorPalette({
// el: $('.page[data-page=edit-border-color] .page-content')
// });
//
// if (palette) {
// palette.select(_borderInfo.color);
// palette.on('select', _.bind(function (palette, color) {
// _borderInfo.color = color;
// $('#edit-border-color .color-preview').css('background-color', '#' + (_.isObject(_borderInfo.color) ? _borderInfo.color.color : _borderInfo.color));
// }, me));
// }
var me = this,
palette = new Common.UI.ThemeColorPalette({
el: $('.page[data-page=edit-chart-border-color] .page-content')
});
if (palette) {
palette.select(_borderInfo.color);
palette.on('select', _.bind(me.onBorderColor, me));
}
},
// Handlers
@ -236,7 +288,97 @@ define([
},
onFillColor:function (palette, color) {
this.api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color));
var me = this;
if (me.api) {
var image = new Asc.asc_CImgProperty(),
shape = new Asc.asc_CShapeProperty(),
fill = new Asc.asc_CShapeFill();
if (color == 'transparent') {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
fill.put_fill(null);
} else {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
fill.put_fill(new Asc.asc_CFillSolid());
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
}
shape.put_fill(fill);
image.put_ShapeProperties(shape);
me.api.asc_setGraphicObjectProps(image);
}
},
onBorderSize: function (e) {
var me = this,
$target = $(e.currentTarget),
value = $target.val(),
currentShape = _shapeObject.get_ShapeProperties(),
image = new Asc.asc_CImgProperty(),
shape = new Asc.asc_CShapeProperty(),
stroke = new Asc.asc_CStroke(),
currentColor = Common.Utils.ThemeColor.getRgbColor('000000');
value = borderSizeTransform.sizeByIndex(parseInt(value));
var currentStroke = currentShape.get_stroke();
if (currentStroke) {
var currentStrokeType = currentStroke.get_type();
if (currentStrokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
currentColor = currentStroke.get_color();
}
}
if (value < 0.01) {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
} else {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
stroke.put_color(currentColor);
stroke.put_width(value * 25.4 / 72.0);
}
shape.put_stroke(stroke);
image.put_ShapeProperties(shape);
me.api.asc_setGraphicObjectProps(image);
},
onBorderSizeChanging: function (e) {
var $target = $(e.currentTarget);
$('#edit-chart-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + _metricText);
},
onBorderColor: function (palette, color) {
var me = this,
currentShape = _shapeObject.get_ShapeProperties();
$('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
if (me.api && currentShape) {
var image = new Asc.asc_CImgProperty(),
shape = new Asc.asc_CShapeProperty(),
stroke = new Asc.asc_CStroke();
_borderInfo.color = Common.Utils.ThemeColor.getRgbColor(color);
if (currentShape.get_stroke().get_width() < 0.01) {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
} else {
stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
stroke.put_width(currentShape.get_stroke().get_width());
stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash());
}
shape.put_stroke(stroke);
image.put_ShapeProperties(shape);
me.api.asc_setGraphicObjectProps(image);
}
},
// API handlers
@ -247,27 +389,54 @@ define([
}
},
onApiSelectionChanged: function(cellInfo) {
onApiSelectionChanged: function(info) {
if (!_isEdit) {
return;
}
if (cellInfo.asc_getFlags().asc_getSelectionType() == Asc.c_oAscSelectionType.RangeChart) {
var selectedObjects = this.api.asc_getGraphicObjectProps();
var me = this,
selectedObjects = [],
selectType = info.asc_getFlags().asc_getSelectionType();
for (var i = 0; i < selectedObjects.length; i++) {
if (selectedObjects[i].asc_getObjectType() == Asc.c_oAscTypeSelectElement.Image) {
var elValue = selectedObjects[i].asc_getObjectValue();
var chartProps = elValue.asc_getChartProperties();
// isObjLocked = isObjLocked || elValue.asc_getLocked();
if (selectType == Asc.c_oAscSelectionType.RangeChart) {
selectedObjects = me.api.asc_getGraphicObjectProps();
}
if (chartProps) {
_chartObject = elValue;
break;
}
me.onApiFocusObject(selectedObjects);
},
onApiFocusObject: function (objects) {
_stack = objects;
if (!_isEdit) {
return;
}
var charts = [],
shapes = [];
_.each(_stack, function (object) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
charts.push(object);
}
if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
shapes.push(object);
}
}
}
});
var getTopObject = function(array) {
if (array.length > 0) {
var object = array[array.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
};
_chartObject = getTopObject(charts);
_shapeObject = getTopObject(shapes);
},
// Helpers

View file

@ -189,7 +189,7 @@
</div>
</li>
<li>
<a id="edit-chart-bordercolor" class="item-link">
<a id="edit-chart-bordercolor" class="item-link" data-page="#edit-chart-border-color-view">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Color</div>
@ -204,4 +204,20 @@
</div>
</div>
</div>
</div>
<!-- Border color view -->
<div id="edit-chart-border-color-view">
<div class="navbar">
<div class="navbar-inner" data-page="edit-chart-border-color">
<div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
<div class="center sliding">Color</div>
<div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
</div>
</div>
<div class="page" data-page="edit-chart-border-color">
<div class="page-content">
<!--Color palette-->
</div>
</div>
</div>