Adding Anchor Box Size to Transformer

This switches the constant BASE_BOX_WIDTH and BASE_BOX_HEIGHT to be a config option.
[config.anchorBoxSize]
This commit is contained in:
Adam Berrio 2018-08-02 22:17:20 -07:00
parent a15b27bcf1
commit 357b3b52f3

View File

@ -1,9 +1,6 @@
(function(Konva) {
'use strict';
var BASE_BOX_WIDTH = 10;
var BASE_BOX_HEIGHT = 10;
var ATTR_CHANGE_LIST = [
'resizeEnabledChange',
'rotateHandlerOffsetChange'
@ -114,6 +111,7 @@
* @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
* @param {Array} [config.enabledHandlers] Array of names of enabled handles
* @param {Function} [config.boundBoxFunc] Bounding box function
* @param {Number} [config.anchorBoxSize] Default is 10
* @example
* var transformer = new Konva.Transformer({
* node: rectangle,
@ -293,15 +291,16 @@
},
_createAnchor: function(name) {
var anchorBoxSize = this.anchorBoxSize();
var anchor = new Konva.Rect({
stroke: 'rgb(0, 161, 255)',
fill: 'white',
strokeWidth: 1,
name: name,
width: BASE_BOX_WIDTH,
height: BASE_BOX_HEIGHT,
offsetX: BASE_BOX_WIDTH / 2,
offsetY: BASE_BOX_HEIGHT / 2,
width: anchorBoxSize,
height: anchorBoxSize,
offsetX: anchorBoxSize / 2,
offsetY: anchorBoxSize / 2,
dragDistance: 0
});
var self = this;
@ -822,6 +821,33 @@
*/
Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
function validateAnchors(val) {
if (isNaN(val)) {
Konva.Util.warn('enabledHandlers value should be an array');
}
if (val < 10) {
Konva.Util.warn('Anchor must be a minimum of 10');
return 10;
}
return val;
}
/**
* get/set anchor box size. Default is 10
* @name validateAnchors
* @method
* @memberof Konva.Transformer.prototype
* @param {Number} 10
* @returns {Number}
* @example
* // get
* var anchorBoxSize = transformer.anchorBoxSize();
*
* // set
* transformer.anchorBoxSize(20)
*/
Konva.Factory.addGetterSetter(Konva.Transformer, 'anchorBoxSize', 10, validateAnchors);
/**
* get/set ability to rotate.
* @name rotateEnabled