init repo

OfficeWeb/apps/presentationeditor/main/app/component/CellStyler.js

@@ -0,0 +1,236 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("PE.component.CellStyler", {
+    extend: "Ext.container.Container",
+    requires: ["Common.component.util.RGBColor"],
+    alias: "widget.pecellstyler",
+    clickOffset: 10,
+    overwriteStyle: true,
+    maxBorderSize: 6,
+    halfBorderSize: false,
+    defaultBorderSize: 1,
+    defaultBorderColor: "#ccc",
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig),
+        divContent = undefined,
+        virtualBorderSize = me.defaultBorderSize,
+        virtualBorderColor = new Common.util.RGBColor(me.defaultBorderColor);
+        var borderSize = {
+            top: virtualBorderSize,
+            right: virtualBorderSize,
+            bottom: virtualBorderSize,
+            left: virtualBorderSize
+        };
+        var borderColor = {
+            top: virtualBorderColor,
+            right: virtualBorderColor,
+            bottom: virtualBorderColor,
+            left: virtualBorderColor
+        };
+        var applyStyle = function () {
+            if (Ext.isDefined(divContent)) {
+                var drawLeftSize = (me.halfBorderSize) ? ((borderSize.left % 2) ? borderSize.left - 1 : borderSize.left) * 0.5 : borderSize.left,
+                drawRightSize = (me.halfBorderSize) ? ((borderSize.right > 0 && borderSize.right * 0.5 < 1) ? 1 : ((borderSize.right % 2) ? borderSize.right + 1 : borderSize.right) * 0.5) : borderSize.right,
+                drawTopSize = (me.halfBorderSize) ? ((borderSize.top % 2) ? borderSize.top - 1 : borderSize.top) * 0.5 : borderSize.top,
+                drawBottomSize = (me.halfBorderSize) ? ((borderSize.bottom > 0 && borderSize.bottom * 0.5 < 1) ? 1 : ((borderSize.bottom % 2) ? borderSize.bottom + 1 : borderSize.bottom) * 0.5) : borderSize.bottom;
+                var value = "inset " + drawLeftSize + "px" + " 0" + " 0 " + borderColor.left.toHex() + ", " + "inset " + -1 * drawRightSize + "px " + " 0" + " 0 " + borderColor.right.toHex() + ", " + "inset " + "0 " + drawTopSize + "px" + " 0 " + borderColor.top.toHex() + ", " + "inset " + "0 " + -1 * drawBottomSize + "px" + " 0 " + borderColor.bottom.toHex();
+                divContent.setStyle("box-shadow", value);
+            }
+        };
+        me.setBordersSize = function (borders, size) {
+            size = (size > me.maxBorderSize) ? me.maxBorderSize : size;
+            if (borders.indexOf("t") > -1) {
+                borderSize.top = size;
+            }
+            if (borders.indexOf("r") > -1) {
+                borderSize.right = size;
+            }
+            if (borders.indexOf("b") > -1) {
+                borderSize.bottom = size;
+            }
+            if (borders.indexOf("l") > -1) {
+                borderSize.left = size;
+            }
+            applyStyle();
+        };
+        me.setBordersColor = function (borders, color) {
+            var newColor = new Common.util.RGBColor(color);
+            if (borders.indexOf("t") > -1) {
+                borderColor.top = newColor;
+            }
+            if (borders.indexOf("r") > -1) {
+                borderColor.right = newColor;
+            }
+            if (borders.indexOf("b") > -1) {
+                borderColor.bottom = newColor;
+            }
+            if (borders.indexOf("l") > -1) {
+                borderColor.left = newColor;
+            }
+            applyStyle();
+        };
+        me.getBorderSize = function (border) {
+            switch (border) {
+            case "t":
+                return borderSize.top;
+            case "r":
+                return borderSize.right;
+            case "b":
+                return borderSize.bottom;
+            case "l":
+                return borderSize.left;
+            }
+            return null;
+        };
+        me.getBorderColor = function (border) {
+            switch (border) {
+            case "t":
+                return borderColor.top.toHex();
+            case "r":
+                return borderColor.right.toHex();
+            case "b":
+                return borderColor.bottom.toHex();
+            case "l":
+                return borderColor.left.toHex();
+            }
+            return null;
+        };
+        me.setVirtualBorderSize = function (size) {
+            virtualBorderSize = (size > me.maxBorderSize) ? me.maxBorderSize : size;
+        };
+        me.setVirtualBorderColor = function (color) {
+            var newColor = new Common.util.RGBColor(color);
+            if (virtualBorderColor.isEqual(newColor)) {
+                return;
+            }
+            virtualBorderColor = newColor;
+        };
+        me.getVirtualBorderSize = function () {
+            return virtualBorderSize;
+        };
+        me.getVirtualBorderColor = function () {
+            return virtualBorderColor.toHex();
+        };
+        me.addListener("afterrender", function () {
+            var selfEl = me.getEl();
+            if (selfEl) {
+                divContent = selfEl.down(".cell-content");
+                applyStyle();
+            }
+            selfEl.on("click", function (event) {
+                var pos = {
+                    x: event.browserEvent.offsetX || (Ext.isDefined(event.browserEvent.layerX) ? event.browserEvent.layerX : 0),
+                    y: event.browserEvent.offsetY || (Ext.isDefined(event.browserEvent.layerY) ? event.browserEvent.layerY : 0)
+                };
+                var ptInPoly = function (npol, xp, yp, x, y) {
+                    var i, j, c = 0;
+                    for (i = 0, j = npol - 1; i < npol; j = i++) {
+                        if ((((yp[i] <= y) && (y < yp[j])) || ((yp[j] <= y) && (y < yp[i]))) && (x < (xp[j] - xp[i]) * (y - yp[i]) / (yp[j] - yp[i]) + xp[i])) {
+                            c = !c;
+                        }
+                    }
+                    return c;
+                };
+                var meWidth = selfEl.getWidth();
+                var meHeight = selfEl.getHeight();
+                if (ptInPoly(4, [0, meWidth, meWidth - me.clickOffset, me.clickOffset], [0, 0, me.clickOffset, me.clickOffset], pos.x, pos.y)) {
+                    if (me.overwriteStyle) {
+                        if (borderSize.top != virtualBorderSize || !borderColor.top.isEqual(virtualBorderColor)) {
+                            borderSize.top = virtualBorderSize;
+                            borderColor.top = virtualBorderColor;
+                        } else {
+                            borderSize.top = 0;
+                        }
+                    } else {
+                        borderSize.top = (borderSize.top > 0) ? 0 : virtualBorderSize;
+                        borderColor.top = virtualBorderColor;
+                    }
+                    me.fireEvent("borderclick", me, "t", borderSize.top, borderColor.top.toHex());
+                } else {
+                    if (ptInPoly(4, [meWidth, meWidth, meWidth - me.clickOffset, meWidth - me.clickOffset], [0, meHeight, meHeight - me.clickOffset, me.clickOffset], pos.x, pos.y)) {
+                        if (me.overwriteStyle) {
+                            if (borderSize.right != virtualBorderSize || !borderColor.right.isEqual(virtualBorderColor)) {
+                                borderSize.right = virtualBorderSize;
+                                borderColor.right = virtualBorderColor;
+                            } else {
+                                borderSize.right = 0;
+                            }
+                        } else {
+                            borderSize.right = (borderSize.right > 0) ? 0 : virtualBorderSize;
+                            borderColor.right = virtualBorderColor;
+                        }
+                        me.fireEvent("borderclick", me, "r", borderSize.right, borderColor.right.toHex());
+                    } else {
+                        if (ptInPoly(4, [0, me.clickOffset, meWidth - me.clickOffset, meWidth], [meHeight, meHeight - me.clickOffset, meHeight - me.clickOffset, meHeight], pos.x, pos.y)) {
+                            if (me.overwriteStyle) {
+                                if (borderSize.bottom != virtualBorderSize || !borderColor.bottom.isEqual(virtualBorderColor)) {
+                                    borderSize.bottom = virtualBorderSize;
+                                    borderColor.bottom = virtualBorderColor;
+                                } else {
+                                    borderSize.bottom = 0;
+                                }
+                            } else {
+                                borderSize.bottom = (borderSize.bottom > 0) ? 0 : virtualBorderSize;
+                                borderColor.bottom = virtualBorderColor;
+                            }
+                            me.fireEvent("borderclick", me, "b", borderSize.bottom, borderColor.bottom.toHex());
+                        } else {
+                            if (ptInPoly(4, [0, me.clickOffset, me.clickOffset, 0], [0, me.clickOffset, meHeight - me.clickOffset, meHeight], pos.x, pos.y)) {
+                                if (me.overwriteStyle) {
+                                    if (borderSize.left != virtualBorderSize || !borderColor.left.isEqual(virtualBorderColor)) {
+                                        borderSize.left = virtualBorderSize;
+                                        borderColor.left = virtualBorderColor;
+                                    } else {
+                                        borderSize.left = 0;
+                                    }
+                                } else {
+                                    borderSize.left = (borderSize.left > 0) ? 0 : virtualBorderSize;
+                                    borderColor.left = virtualBorderColor;
+                                }
+                                me.fireEvent("borderclick", me, "l", borderSize.left, borderColor.left.toHex());
+                            }
+                        }
+                    }
+                }
+                applyStyle();
+            });
+        });
+        Ext.apply(me, {
+            cls: "tablestyler-cell",
+            html: '<div class="cell-content" style="width: 100%; height: 100%;"><div class="content-text"></div></div>'
+        },
+        cfg);
+        me.callParent(arguments);
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/component/DimensionPicker.js

@@ -0,0 +1,124 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("PE.component.DimensionPicker", {
+    extend: "Ext.Component",
+    requires: "Ext.XTemplate",
+    alias: "widget.pedimensionpicker",
+    baseCls: "x-dimension-picker",
+    itemSize: 18,
+    minRows: 5,
+    minColumns: 5,
+    maxRows: 20,
+    maxColumns: 20,
+    stalign: "bottom",
+    padding: 4,
+    clickEvent: "click",
+    value: null,
+    renderTpl: ['<div style="width: 100%; height: 100%;">', '<div class="{baseCls}-observecontainer">', '<div class="{baseCls}-mousecatcher"></div>', '<div class="{baseCls}-unhighlighted"></div>', '<div class="{baseCls}-highlighted"></div>', "</div>", '<div class="{baseCls}-status">0x0</div>', "</div>"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        var rootEl = undefined;
+        var areaMouseCatcher = undefined;
+        var areaUnHighLighted = undefined;
+        var areaHighLighted = undefined;
+        var areaStatus = undefined;
+        var curColumns = 0;
+        var curRows = 0;
+        var onCatcherMouseMove = function (event, element, eOpts) {
+            var pos = [event.browserEvent.layerX || (Ext.isDefined(event.browserEvent.offsetX) ? event.browserEvent.offsetX : 0), event.browserEvent.layerY || (Ext.isDefined(event.browserEvent.offsetY) ? event.browserEvent.offsetY : 0)];
+            me.setTableSize(Math.floor(pos[0] / this.itemSize), Math.floor(pos[1] / this.itemSize));
+        };
+        var onHighLightedMouseMove = function (event, element, eOpts) {
+            var pos = [event.browserEvent.layerX || (Ext.isDefined(event.browserEvent.offsetX) ? event.browserEvent.offsetX : 0), event.browserEvent.layerY || (Ext.isDefined(event.browserEvent.offsetY) ? event.browserEvent.offsetY : 0)];
+            me.setTableSize(Math.ceil(pos[0] / this.itemSize), Math.ceil(pos[1] / this.itemSize));
+        };
+        var onUnHighLightedMouseMove = function (event, element, eOpts) {
+            var pos = [event.browserEvent.layerX || (Ext.isDefined(event.browserEvent.offsetX) ? event.browserEvent.offsetX : 0), event.browserEvent.layerY || (Ext.isDefined(event.browserEvent.offsetY) ? event.browserEvent.offsetY : 0)];
+            me.setTableSize(Math.ceil(pos[0] / this.itemSize), Math.ceil(pos[1] / this.itemSize));
+        };
+        var onHighLightedMouseClick = function (event) {
+            me.fireEvent("select", me, curColumns, curRows);
+        };
+        this.setTableSize = function (columns, rows) {
+            if (columns > this.maxColumns) {
+                columns = this.maxColumns;
+            }
+            if (rows > this.maxRows) {
+                rows = this.maxRows;
+            }
+            if (curColumns != columns || curRows != rows) {
+                curColumns = columns;
+                curRows = rows;
+                areaHighLighted.setSize(curColumns + "em", curRows + "em");
+                areaUnHighLighted.setSize(((curColumns < me.minColumns) ? me.minColumns : ((curColumns + 1 > me.maxColumns) ? me.maxColumns : curColumns + 1)) + "em", ((curRows < me.minRows) ? me.minRows : ((curRows + 1 > me.maxRows) ? me.maxRows : curRows + 1)) + "em");
+                rootEl.setWidth(areaUnHighLighted.getWidth());
+                areaStatus.update(Ext.String.format("{0} x {1}", curColumns, curRows));
+                areaStatus.setWidth(areaUnHighLighted.getWidth());
+                me.fireEvent("change", me, curColumns, curRows);
+            }
+        };
+        var onAfterRender = function (ct) {
+            rootEl = me.getEl();
+            if (rootEl) {
+                areaMouseCatcher = rootEl.down("." + me.baseCls + "-mousecatcher");
+                areaUnHighLighted = rootEl.down("." + me.baseCls + "-unhighlighted");
+                areaHighLighted = rootEl.down("." + me.baseCls + "-highlighted");
+                areaStatus = rootEl.down("." + me.baseCls + "-status");
+                rootEl.setStyle({
+                    width: me.minColumns + "em"
+                });
+                areaMouseCatcher.setSize(me.maxColumns + "em", me.maxRows + "em");
+                areaUnHighLighted.setSize(me.minColumns + "em", me.minRows + "em");
+                areaStatus.update(Ext.String.format("{0} x {1}", curColumns, curRows));
+                areaStatus.setWidth(areaUnHighLighted.getWidth());
+            }
+            areaMouseCatcher.on("mousemove", onCatcherMouseMove, me);
+            areaHighLighted.on("mousemove", onHighLightedMouseMove, me);
+            areaUnHighLighted.on("mousemove", onUnHighLightedMouseMove, me);
+            areaHighLighted.on("click", onHighLightedMouseClick, me);
+        };
+        this.getColumnsCount = function () {
+            return curColumns;
+        };
+        this.getRowsCount = function () {
+            return curRows;
+        };
+        me.on("afterrender", onAfterRender, this);
+        me.callParent(arguments);
+        me.addEvents("change", "select");
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/component/MenuDimensionPicker.js

@@ -0,0 +1,87 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("PE.component.MenuDimensionPicker", {
+    extend: "Ext.menu.Menu",
+    alias: "widget.pemenudimensionpicker",
+    requires: ["PE.component.DimensionPicker"],
+    hideOnClick: true,
+    minWidth: 10,
+    minHeight: 10,
+    maxWidth: 1000,
+    maxHeight: 1000,
+    minRows: 5,
+    minColumns: 5,
+    maxRows: 20,
+    maxColumns: 20,
+    baseCls: "dimension-picker-menu",
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        delete cfg.listeners;
+        Ext.apply(me, {
+            plain: true,
+            showSeparator: false,
+            items: Ext.applyIf({
+                xtype: "pedimensionpicker",
+                minRows: this.minRows,
+                minColumns: this.minColumns,
+                maxRows: this.maxRows,
+                maxColumns: this.maxColumns
+            },
+            cfg)
+        });
+        me.callParent(arguments);
+        me.picker = me.down("pedimensionpicker");
+        me.relayEvents(me.picker, ["select"]);
+        if (me.hideOnClick) {
+            me.on("select", me.hidePickerOnSelect, me);
+        }
+        var onPickerChange = function (picker, columns, rows) {
+            var width = ((columns < me.picker.minColumns) ? me.picker.minColumns : ((columns + 1 > me.picker.maxColumns) ? me.picker.maxColumns : columns + 1));
+            var height = ((rows < me.picker.minRows) ? me.picker.minRows : ((rows + 1 > me.picker.maxRows) ? me.picker.maxRows : rows + 1));
+            width = width * me.picker.itemSize + 2 * me.picker.padding;
+            height = height * me.picker.itemSize + 2 * me.picker.padding + me.picker.itemSize;
+            me.setSize(width, height);
+        };
+        me.picker.addListener("change", onPickerChange, this);
+    },
+    show: function (animateTarget, callback, scope) {
+        var me = this;
+        me.callParent(arguments);
+        me.picker.setTableSize(0, 0);
+        this.setSize(me.picker.minColumns * me.picker.itemSize + 2 * me.picker.padding, me.picker.minRows * me.picker.itemSize + 2 * me.picker.padding + me.picker.itemSize);
+    },
+    hidePickerOnSelect: function (picker, columns, rows) {
+        Ext.menu.Manager.hideAll();
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/component/TableStyler.js

@@ -0,0 +1,493 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("PE.component.TableStyler", {
+    extend: "Ext.container.Container",
+    requires: ["Ext.util.CSS", "Common.component.util.RGBColor"],
+    uses: ["PE.component.CellStyler"],
+    alias: "widget.petablestyler",
+    rows: 2,
+    columns: 2,
+    cellPadding: 10,
+    tablePadding: 10,
+    overwriteStyle: true,
+    maxBorderSize: 6,
+    spacingMode: false,
+    defaultBorderSize: 1,
+    defaultBorderColor: "#ccc",
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig),
+        virtualBorderSize = (me.defaultBorderSize > me.maxBorderSize) ? me.maxBorderSize : me.defaultBorderSize,
+        virtualBorderColor = new Common.component.util.RGBColor(me.defaultBorderColor),
+        topBorder,
+        rightBorder,
+        bottomBorder,
+        leftBorder,
+        topBorderSelector,
+        rightBorderSelector,
+        bottomBorderSelector,
+        leftBorderSelector;
+        var borderSize = {
+            top: virtualBorderSize,
+            right: virtualBorderSize,
+            bottom: virtualBorderSize,
+            left: virtualBorderSize
+        };
+        var borderColor = {
+            top: virtualBorderColor,
+            right: virtualBorderColor,
+            bottom: virtualBorderColor,
+            left: virtualBorderColor
+        };
+        var cfgItems = [];
+        for (var row = 0; row < this.rows; row++) {
+            if (row > 0) {
+                cfgItems.push({
+                    xtype: "container",
+                    height: (me.spacingMode) ? this.cellPadding : 0
+                });
+            }
+            var addRow = cfgItems.push({
+                xtype: "container",
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                flex: 1,
+                items: []
+            });
+            for (var col = 0; col < this.columns; col++) {
+                if (col > 0) {
+                    cfgItems[addRow - 1].items.push({
+                        xtype: "container",
+                        width: (me.spacingMode) ? this.cellPadding : 0
+                    });
+                }
+                cfgItems[addRow - 1].items.push({
+                    xtype: "pecellstyler",
+                    overwriteStyle: me.overwriteStyle,
+                    halfBorderSize: !me.spacingMode,
+                    defaultBorderSize: me.spacingMode ? virtualBorderSize : 0,
+                    defaultBorderColor: virtualBorderColor.toHex(),
+                    id: me.getId() + "-cell-" + col + "-" + row,
+                    col: col,
+                    row: row,
+                    flex: 1,
+                    listeners: {
+                        borderclick: function (cell, type, size, color) {
+                            var cellCol, cellRow, curCell;
+                            if (type == "t") {
+                                if (cell.row > 0) {
+                                    for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                        curCell = me.getCell(cellCol, cell.row - 1);
+                                        curCell.setBordersSize("b", size);
+                                        curCell.setBordersColor("b", color);
+                                    }
+                                }
+                                for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                    curCell = me.getCell(cellCol, cell.row);
+                                    if (cell.halfBorderSize && cell.row < 1) {
+                                        curCell.setBordersSize("t", 0);
+                                    } else {
+                                        curCell.setBordersSize("t", size);
+                                    }
+                                    curCell.setBordersColor("t", color);
+                                }
+                            } else {
+                                if (type == "b") {
+                                    if (cell.row < me.rows - 1) {
+                                        for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                            curCell = me.getCell(cellCol, cell.row + 1);
+                                            curCell.setBordersSize("t", size);
+                                            curCell.setBordersColor("t", color);
+                                        }
+                                    }
+                                    for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                        curCell = me.getCell(cellCol, cell.row);
+                                        if (cell.halfBorderSize && cell.row >= me.rows - 1) {
+                                            curCell.setBordersSize("b", 0);
+                                        } else {
+                                            curCell.setBordersSize("b", size);
+                                        }
+                                        curCell.setBordersColor("b", color);
+                                    }
+                                } else {
+                                    if (type == "l") {
+                                        if (cell.col > 0) {
+                                            for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                                curCell = me.getCell(cell.col - 1, cellRow);
+                                                curCell.setBordersSize("r", size);
+                                                curCell.setBordersColor("r", color);
+                                            }
+                                        }
+                                        for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                            curCell = me.getCell(cell.col, cellRow);
+                                            if (cell.halfBorderSize && cell.col < 1) {
+                                                curCell.setBordersSize("l", 0);
+                                            } else {
+                                                curCell.setBordersSize("l", size);
+                                            }
+                                            curCell.setBordersColor("l", color);
+                                        }
+                                    } else {
+                                        if (type == "r") {
+                                            if (cell.col < me.columns - 1) {
+                                                for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                                    curCell = me.getCell(cell.col + 1, cellRow);
+                                                    curCell.setBordersSize("l", size);
+                                                    curCell.setBordersColor("l", color);
+                                                }
+                                            }
+                                            for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                                curCell = me.getCell(cell.col, cellRow);
+                                                if (cell.halfBorderSize && cell.col >= me.columns - 1) {
+                                                    curCell.setBordersSize("r", 0);
+                                                } else {
+                                                    curCell.setBordersSize("r", size);
+                                                }
+                                                curCell.setBordersColor("r", color);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        var applyStyles = function () {
+            topBorder && topBorder.setStyle("border-bottom", borderSize.top + "pt solid " + borderColor.top.toHex());
+            rightBorder && rightBorder.setStyle("border-right", borderSize.right + "pt solid " + borderColor.right.toHex());
+            bottomBorder && bottomBorder.setStyle("border-bottom", borderSize.bottom + "pt solid " + borderColor.bottom.toHex());
+            leftBorder && leftBorder.setStyle("border-right", borderSize.left + "pt solid " + borderColor.left.toHex());
+        };
+        me.addListener("afterrender", function () {
+            var meId = me.getId();
+            topBorder = Ext.get(meId + "-table-top-border");
+            rightBorder = Ext.get(meId + "-table-right-border");
+            bottomBorder = Ext.get(meId + "-table-bottom-border");
+            leftBorder = Ext.get(meId + "-table-left-border");
+            topBorderSelector = Ext.get(meId + "-table-top-border-selector");
+            rightBorderSelector = Ext.get(meId + "-table-right-border-selector");
+            bottomBorderSelector = Ext.get(meId + "-table-bottom-border-selector");
+            leftBorderSelector = Ext.get(meId + "-table-left-border-selector");
+            topBorderSelector.on("click", function (e) {
+                if (me.overwriteStyle) {
+                    if (borderSize.top != virtualBorderSize || !borderColor.top.isEqual(virtualBorderColor)) {
+                        borderSize.top = virtualBorderSize;
+                        borderColor.top = virtualBorderColor;
+                    } else {
+                        borderSize.top = 0;
+                    }
+                } else {
+                    borderSize.top = (borderSize.top > 0) ? 0 : virtualBorderSize;
+                    borderColor.top = virtualBorderColor;
+                }
+                topBorder.setStyle("border-bottom", borderSize.top + "pt solid " + borderColor.top.toHex());
+                me.fireEvent("borderclick", me, "t", borderSize.top, borderColor.top.toHex());
+            },
+            me);
+            rightBorderSelector.on("click", function (e) {
+                if (me.overwriteStyle) {
+                    if (borderSize.right != virtualBorderSize || !borderColor.right.isEqual(virtualBorderColor)) {
+                        borderSize.right = virtualBorderSize;
+                        borderColor.right = virtualBorderColor;
+                    } else {
+                        borderSize.right = 0;
+                    }
+                } else {
+                    borderSize.right = (borderSize.right > 0) ? 0 : virtualBorderSize;
+                    borderColor.right = virtualBorderColor;
+                }
+                rightBorder.setStyle("border-right", borderSize.right + "pt solid " + borderColor.right.toHex());
+                me.fireEvent("borderclick", me, "r", borderSize.right, borderColor.right.toHex());
+            },
+            me);
+            bottomBorderSelector.on("click", function (e) {
+                if (me.overwriteStyle) {
+                    if (borderSize.bottom != virtualBorderSize || !borderColor.bottom.isEqual(virtualBorderColor)) {
+                        borderSize.bottom = virtualBorderSize;
+                        borderColor.bottom = virtualBorderColor;
+                    } else {
+                        borderSize.bottom = 0;
+                    }
+                } else {
+                    borderSize.bottom = (borderSize.bottom > 0) ? 0 : virtualBorderSize;
+                    borderColor.bottom = virtualBorderColor;
+                }
+                bottomBorder.setStyle("border-bottom", borderSize.bottom + "pt solid " + borderColor.bottom.toHex());
+                me.fireEvent("borderclick", me, "b", borderSize.bottom, borderColor.bottom.toHex());
+            },
+            me);
+            leftBorderSelector.on("click", function (e) {
+                if (me.overwriteStyle) {
+                    if (borderSize.left != virtualBorderSize || !borderColor.left.isEqual(virtualBorderColor)) {
+                        borderSize.left = virtualBorderSize;
+                        borderColor.left = virtualBorderColor;
+                    } else {
+                        borderSize.left = 0;
+                    }
+                } else {
+                    borderSize.left = (borderSize.left > 0) ? 0 : virtualBorderSize;
+                    borderColor.left = virtualBorderColor;
+                }
+                leftBorder.setStyle("border-right", borderSize.left + "pt solid " + borderColor.left.toHex());
+                me.fireEvent("borderclick", me, "l", borderSize.left, borderColor.left.toHex());
+            },
+            me);
+        });
+        me.getVirtualBorderSize = function () {
+            return virtualBorderSize;
+        };
+        me.getVirtualBorderColor = function () {
+            return virtualBorderColor.toHex();
+        };
+        me.setVirtualBorderSize = function (size) {
+            size = (size > me.maxBorderSize) ? me.maxBorderSize : size;
+            virtualBorderSize = size;
+            for (var row = 0; row < me.rows; row++) {
+                for (var col = 0; col < me.columns; col++) {
+                    var cell = me.getCell(col, row);
+                    cell.setVirtualBorderSize(size);
+                }
+            }
+        };
+        me.setVirtualBorderColor = function (color) {
+            var newColor = new Common.component.util.RGBColor(color);
+            if (virtualBorderColor.isEqual(newColor)) {
+                return;
+            }
+            virtualBorderColor = newColor;
+            for (var row = 0; row < me.rows; row++) {
+                for (var col = 0; col < me.columns; col++) {
+                    var cell = me.getCell(col, row);
+                    cell.setVirtualBorderColor(virtualBorderColor.toHex());
+                }
+            }
+        };
+        me.setBordersSize = function (borders, size) {
+            size = (size > me.maxBorderSize) ? me.maxBorderSize : size;
+            if (borders.indexOf("t") > -1) {
+                borderSize.top = size;
+            }
+            if (borders.indexOf("r") > -1) {
+                borderSize.right = size;
+            }
+            if (borders.indexOf("b") > -1) {
+                borderSize.bottom = size;
+            }
+            if (borders.indexOf("l") > -1) {
+                borderSize.left = size;
+            }
+            applyStyles();
+        };
+        me.setBordersColor = function (borders, color) {
+            var newColor = new Common.component.util.RGBColor(color);
+            if (borders.indexOf("t") > -1) {
+                borderColor.top = newColor;
+            }
+            if (borders.indexOf("r") > -1) {
+                borderColor.right = newColor;
+            }
+            if (borders.indexOf("b") > -1) {
+                borderColor.bottom = newColor;
+            }
+            if (borders.indexOf("l") > -1) {
+                borderColor.left = newColor;
+            }
+            applyStyles();
+        };
+        me.getBorderSize = function (border) {
+            switch (border) {
+            case "t":
+                return borderSize.top;
+            case "r":
+                return borderSize.right;
+            case "b":
+                return borderSize.bottom;
+            case "l":
+                return borderSize.left;
+            }
+            return null;
+        };
+        me.getBorderColor = function (border) {
+            switch (border) {
+            case "t":
+                return borderColor.top.toHex();
+            case "r":
+                return borderColor.right.toHex();
+            case "b":
+                return borderColor.bottom.toHex();
+            case "l":
+                return borderColor.left.toHex();
+            }
+            return null;
+        };
+        Ext.apply(me, {
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            cls: "table-styler",
+            style: "background-color: #fff;",
+            items: [{
+                xtype: "container",
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                height: this.tablePadding,
+                style: "overflow: visible;",
+                items: [{
+                    xtype: "container",
+                    style: "border-bottom: 1pt dotted gray; border-right: 1pt dotted gray;",
+                    width: this.tablePadding
+                },
+                {
+                    xtype: "container",
+                    layout: "absolute",
+                    flex: 1,
+                    items: [{
+                        xtype: "container",
+                        style: "z-index: 1;",
+                        id: me.getId() + "-table-top-border-selector",
+                        x: 0,
+                        y: me.tablePadding * 0.5,
+                        height: me.tablePadding,
+                        anchor: "100%",
+                        html: '<table width="100%" height="100%">' + "<tr>" + '<td id="' + me.getId() + "-table-top-border" + '" style="height:50%; border-bottom: ' + borderSize.top + "px solid " + borderColor.top.toHex() + ';"></td>' + "</tr>" + "<tr>" + "<td></td>" + "</tr>" + "</table>"
+                    }]
+                },
+                {
+                    xtype: "container",
+                    style: "border-bottom: 1pt dotted gray; border-left: 1pt dotted gray;",
+                    width: this.tablePadding
+                }]
+            },
+            {
+                xtype: "container",
+                flex: 1,
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                style: "overflow: visible;",
+                items: [{
+                    xtype: "container",
+                    layout: "absolute",
+                    width: this.tablePadding,
+                    items: [{
+                        xtype: "container",
+                        style: "z-index: 1;",
+                        id: me.getId() + "-table-left-border-selector",
+                        x: me.tablePadding * 0.5,
+                        y: 0,
+                        width: me.tablePadding,
+                        anchor: "auto 100%",
+                        html: '<table width="100%" height="100%">' + "<tr>" + '<td id="' + me.getId() + "-table-left-border" + '" style="border-right: ' + borderSize.left + "pt solid " + borderColor.left.toHex() + ';"></td>' + '<td width="50%"></td>' + "</tr>" + "</table>"
+                    }]
+                },
+                {
+                    xtype: "container",
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    padding: (me.spacingMode) ? this.cellPadding : 0,
+                    flex: 1,
+                    items: cfgItems
+                },
+                {
+                    xtype: "container",
+                    layout: "absolute",
+                    width: this.tablePadding,
+                    items: [{
+                        xtype: "container",
+                        style: "z-index: 1;",
+                        id: me.getId() + "-table-right-border-selector",
+                        x: -1 * me.tablePadding * 0.5,
+                        y: 0,
+                        width: me.tablePadding,
+                        anchor: "auto 100%",
+                        html: '<table width="100%" height="100%">' + "<tr>" + '<td id="' + me.getId() + "-table-right-border" + '" style="border-right: ' + borderSize.right + "pt solid " + borderColor.right.toHex() + ';"></td>' + '<td width="50%"></td>' + "</tr>" + "</table>"
+                    }]
+                }]
+            },
+            {
+                xtype: "container",
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                style: "overflow: visible;",
+                height: this.tablePadding,
+                items: [{
+                    xtype: "container",
+                    style: "border-top: 1pt dotted gray; border-right: 1pt dotted gray;",
+                    width: this.tablePadding
+                },
+                {
+                    xtype: "container",
+                    layout: "absolute",
+                    flex: 1,
+                    items: [{
+                        xtype: "container",
+                        style: "z-index: 1;",
+                        id: me.getId() + "-table-bottom-border-selector",
+                        x: 0,
+                        y: -1 * me.tablePadding * 0.5,
+                        height: me.tablePadding,
+                        anchor: "100%",
+                        html: '<table width="100%" height="100%">' + "<tr>" + '<td id="' + me.getId() + "-table-bottom-border" + '" style="height:50%; border-bottom: ' + borderSize.bottom + "px solid " + borderColor.bottom.toHex() + ';"></td>' + "</tr>" + "<tr>" + "<td></td>" + "</tr>" + "</table>"
+                    }]
+                },
+                {
+                    xtype: "container",
+                    style: "border-top: 1pt dotted gray; border-left: 1pt dotted gray;",
+                    width: this.tablePadding
+                }]
+            }]
+        },
+        cfg);
+        this.callParent(arguments);
+    },
+    getCell: function (col, row) {
+        return Ext.getCmp(this.getId() + "-cell-" + col + "-" + row);
+    }
+});