diff --git a/src/plugins/Label.js b/src/plugins/Label.js index 62aedf06..21802dce 100644 --- a/src/plugins/Label.js +++ b/src/plugins/Label.js @@ -2,8 +2,11 @@ // constants var ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'lineHeight', 'text'], CHANGE_KINETIC = 'Change.kinetic', - TEXT = 'text', - RECT = 'rect'; + NONE = 'none', + TOP = 'top', + RIGHT = 'right', + BOTTOM = 'bottom', + LEFT = 'left'; // cached variables attrChangeListLen = ATTR_CHANGE_LIST.length; @@ -13,15 +16,20 @@ * a tension * @constructor * @param {Object} config - * @param {String} [config.fontFamily] default is Calibri - * @param {Number} [config.fontSize] in pixels. Default is 12 - * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal - * @param {String} config.text - * @param {Number} [config.padding] - * @param {Number} [config.lineHeight] default is 1 - * @param {String} [config.textFill] - * @param {String} [config.textStroke] - * @param {Number} [config.cornerRadius] + * @param {String} [config.arrow] can be none, top, right, bottom, or left. none is the default + * @param {Number} [config.arrowWidth] + * @param {Number} [config.arrowHeight] + * @param {Object} config.text + * @param {Object} config.rect + * @param {String} [config.text.fontFamily] default is Calibri + * @param {Number} [config.text.fontSize] in pixels. Default is 12 + * @param {String} [config.text.fontStyle] can be normal, bold, or italic. Default is normal + * @param {String} config.text.text + * @param {String} [config.text.align] can be left, center, or right + * @param {Number} [config.text.padding] + * @param {Number} [config.text.width] default is auto + * @param {Number} [config.text.height] default is auto + * @param {Number} [config.rect.lineHeight] default is 1 * {{ShapeParams}} * {{NodeParams}} */ @@ -37,23 +45,79 @@ this.createAttrs(); Kinetic.Group.call(this, config); this.setText(new Kinetic.Text(config.text)); - this.setRect(new Kinetic.Rect(config.rect)); + text = this.getText(); + this.setRect(new Kinetic.Polygon(config.rect)); this.add(this.getRect()); this.add(this.getText()); - text = this.getText(); + this._setPoints(); + // update text data for certain attr changes for(var n = 0; n < attrChangeListLen; n++) { text.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() { - that.getRect().setSize(this.getSize()); + that._setPoints(); }); } + }, + _setPoints: function() { + var text = this.getText(), + width = text.getWidth(), + height = text.getHeight(), + points = [], + arrow = this.getArrow(), + arrowWidth = this.getArrowWidth(), + arrowHeight = this.getArrowHeight(); + + // top left corner + points.push(0); + points.push(0); + + + if (arrow === TOP) { + points.push((width - arrowWidth)/2, 0); + points.push(width/2, -1 * arrowHeight); + points.push((width + arrowWidth)/2, 0); + } + + // top right + points.push(width); + points.push(0); + + if (arrow === RIGHT) { + points.push(width, (height - arrowHeight)/2); + points.push(width + arrowWidth, height/2); + points.push(width, (height + arrowHeight)/2); + } + + // bottom right + points.push(width); + points.push(height); + + if (arrow === BOTTOM) { + points.push((width + arrowWidth)/2, height); + points.push(width/2, height + arrowHeight); + points.push((width - arrowWidth)/2, height); + } + + // bottom left + points.push(0); + points.push(height); + + if (arrow === LEFT) { + points.push(0, (height + arrowHeight)/2); + points.push(0 - arrowWidth, height/2); + points.push(0, (height - arrowHeight)/2); + } + + this.getRect().setPoints(points); } }; Kinetic.Global.extend(Kinetic.Plugins.Label, Kinetic.Group); - Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, TEXT); - Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, RECT); - + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'text'); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'rect'); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'arrow', NONE); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'arrowWidth', 0); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, 'arrowHeight', 0); })(); diff --git a/tests/js/unit/plugins/labelTests.js b/tests/js/unit/plugins/labelTests.js index 76eaa6d5..3e1bf0a2 100644 --- a/tests/js/unit/plugins/labelTests.js +++ b/tests/js/unit/plugins/labelTests.js @@ -11,6 +11,9 @@ Test.Modules.LABEL = { x: 20, y: 20, draggable: true, + arrow: 'left', + arrowWidth: 20, + arrowHeight: 20, text: { text: 'Hello World!', fontSize: 50, @@ -27,7 +30,7 @@ Test.Modules.LABEL = { shadowBlur: 1, shadowOffset: [10, 10], shadowOpacity: 0.2, - cornerRadius: 10, + lineJoin: 'round' } });