@nasser-sw/fabric 7.0.1-beta8 → 7.0.1-beta9

package/debug/konva-master/src/shapes/Label.ts

@@ -0,0 +1,386 @@
+import { Factory } from '../Factory.ts';
+import type { ShapeConfig } from '../Shape.ts';
+import { Shape } from '../Shape.ts';
+import { Group } from '../Group.ts';
+import type { Context } from '../Context.ts';
+import type { ContainerConfig } from '../Container.ts';
+import {
+  getNumberOrArrayOfNumbersValidator,
+  getNumberValidator,
+} from '../Validators.ts';
+import { _registerNode } from '../Global.ts';
+
+import type { GetSet } from '../types.ts';
+import type { Text } from './Text.ts';
+
+export interface LabelConfig extends ContainerConfig {}
+
+// constants
+const ATTR_CHANGE_LIST = [
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'padding',
+    'lineHeight',
+    'text',
+    'width',
+    'height',
+    'pointerDirection',
+    'pointerWidth',
+    'pointerHeight',
+  ],
+  CHANGE_KONVA = 'Change.konva',
+  NONE = 'none',
+  UP = 'up',
+  RIGHT = 'right',
+  DOWN = 'down',
+  LEFT = 'left',
+  // cached variables
+  attrChangeListLen = ATTR_CHANGE_LIST.length;
+
+/**
+ * Label constructor.  Labels are groups that contain a Text and Tag shape
+ * @constructor
+ * @memberof Konva
+ * @param {Object} config
+ * @@nodeParams
+ * @example
+ * // create label
+ * var label = new Konva.Label({
+ *   x: 100,
+ *   y: 100,
+ *   draggable: true
+ * });
+ *
+ * // add a tag to the label
+ * label.add(new Konva.Tag({
+ *   fill: '#bbb',
+ *   stroke: '#333',
+ *   shadowColor: 'black',
+ *   shadowBlur: 10,
+ *   shadowOffset: [10, 10],
+ *   shadowOpacity: 0.2,
+ *   lineJoin: 'round',
+ *   pointerDirection: 'up',
+ *   pointerWidth: 20,
+ *   pointerHeight: 20,
+ *   cornerRadius: 5
+ * }));
+ *
+ * // add text to the label
+ * label.add(new Konva.Text({
+ *   text: 'Hello World!',
+ *   fontSize: 50,
+ *   lineHeight: 1.2,
+ *   padding: 10,
+ *   fill: 'green'
+ *  }));
+ */
+export class Label extends Group {
+  constructor(config?: LabelConfig) {
+    super(config);
+    this.on('add.konva', function (evt) {
+      this._addListeners(evt.child);
+      this._sync();
+    });
+  }
+
+  /**
+   * get Text shape for the label.  You need to access the Text shape in order to update
+   * the text properties
+   * @name Konva.Label#getText
+   * @method
+   * @example
+   * label.getText().fill('red')
+   */
+  getText() {
+    return this.find<Text>('Text')[0];
+  }
+  /**
+   * get Tag shape for the label.  You need to access the Tag shape in order to update
+   * the pointer properties and the corner radius
+   * @name Konva.Label#getTag
+   * @method
+   */
+  getTag() {
+    return this.find('Tag')[0] as Tag;
+  }
+  _addListeners(text) {
+    let that = this,
+      n;
+    const func = function () {
+      that._sync();
+    };
+
+    // update text data for certain attr changes
+    for (n = 0; n < attrChangeListLen; n++) {
+      text.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, func);
+    }
+  }
+  getWidth() {
+    return this.getText().width();
+  }
+  getHeight() {
+    return this.getText().height();
+  }
+  _sync() {
+    let text = this.getText(),
+      tag = this.getTag(),
+      width,
+      height,
+      pointerDirection,
+      pointerWidth,
+      x,
+      y,
+      pointerHeight;
+
+    if (text && tag) {
+      width = text.width();
+      height = text.height();
+      pointerDirection = tag.pointerDirection();
+      pointerWidth = tag.pointerWidth();
+      pointerHeight = tag.pointerHeight();
+      x = 0;
+      y = 0;
+
+      switch (pointerDirection) {
+        case UP:
+          x = width / 2;
+          y = -1 * pointerHeight;
+          break;
+        case RIGHT:
+          x = width + pointerWidth;
+          y = height / 2;
+          break;
+        case DOWN:
+          x = width / 2;
+          y = height + pointerHeight;
+          break;
+        case LEFT:
+          x = -1 * pointerWidth;
+          y = height / 2;
+          break;
+      }
+
+      tag.setAttrs({
+        x: -1 * x,
+        y: -1 * y,
+        width: width,
+        height: height,
+      });
+
+      text.setAttrs({
+        x: -1 * x,
+        y: -1 * y,
+      });
+    }
+  }
+}
+
+Label.prototype.className = 'Label';
+_registerNode(Label);
+
+export interface TagConfig extends ShapeConfig {
+  pointerDirection?: string;
+  pointerWidth?: number;
+  pointerHeight?: number;
+  cornerRadius?: number | Array<number>;
+}
+
+/**
+ * Tag constructor.&nbsp; A Tag can be configured
+ *  to have a pointer element that points up, right, down, or left
+ * @constructor
+ * @memberof Konva
+ * @param {Object} config
+ * @param {String} [config.pointerDirection] can be up, right, down, left, or none; the default
+ *  is none.  When a pointer is present, the positioning of the label is relative to the tip of the pointer.
+ * @param {Number} [config.pointerWidth]
+ * @param {Number} [config.pointerHeight]
+ * @param {Number} [config.cornerRadius]
+ */
+export class Tag extends Shape<TagConfig> {
+  _sceneFunc(context: Context) {
+    const width = this.width(),
+      height = this.height(),
+      pointerDirection = this.pointerDirection(),
+      pointerWidth = this.pointerWidth(),
+      pointerHeight = this.pointerHeight(),
+      cornerRadius = this.cornerRadius();
+
+    let topLeft = 0;
+    let topRight = 0;
+    let bottomLeft = 0;
+    let bottomRight = 0;
+
+    if (typeof cornerRadius === 'number') {
+      topLeft =
+        topRight =
+        bottomLeft =
+        bottomRight =
+          Math.min(cornerRadius, width / 2, height / 2);
+    } else {
+      topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
+      topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2);
+      bottomRight = Math.min(cornerRadius[2] || 0, width / 2, height / 2);
+      bottomLeft = Math.min(cornerRadius[3] || 0, width / 2, height / 2);
+    }
+
+    context.beginPath();
+    context.moveTo(topLeft, 0);
+
+    if (pointerDirection === UP) {
+      context.lineTo((width - pointerWidth) / 2, 0);
+      context.lineTo(width / 2, -1 * pointerHeight);
+      context.lineTo((width + pointerWidth) / 2, 0);
+    }
+
+    context.lineTo(width - topRight, 0);
+    context.arc(
+      width - topRight,
+      topRight,
+      topRight,
+      (Math.PI * 3) / 2,
+      0,
+      false
+    );
+
+    if (pointerDirection === RIGHT) {
+      context.lineTo(width, (height - pointerHeight) / 2);
+      context.lineTo(width + pointerWidth, height / 2);
+      context.lineTo(width, (height + pointerHeight) / 2);
+    }
+
+    context.lineTo(width, height - bottomRight);
+    context.arc(
+      width - bottomRight,
+      height - bottomRight,
+      bottomRight,
+      0,
+      Math.PI / 2,
+      false
+    );
+
+    if (pointerDirection === DOWN) {
+      context.lineTo((width + pointerWidth) / 2, height);
+      context.lineTo(width / 2, height + pointerHeight);
+      context.lineTo((width - pointerWidth) / 2, height);
+    }
+
+    context.lineTo(bottomLeft, height);
+    context.arc(
+      bottomLeft,
+      height - bottomLeft,
+      bottomLeft,
+      Math.PI / 2,
+      Math.PI,
+      false
+    );
+
+    if (pointerDirection === LEFT) {
+      context.lineTo(0, (height + pointerHeight) / 2);
+      context.lineTo(-1 * pointerWidth, height / 2);
+      context.lineTo(0, (height - pointerHeight) / 2);
+    }
+
+    context.lineTo(0, topLeft);
+    context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
+
+    context.closePath();
+    context.fillStrokeShape(this);
+  }
+  getSelfRect() {
+    let x = 0,
+      y = 0,
+      pointerWidth = this.pointerWidth(),
+      pointerHeight = this.pointerHeight(),
+      direction = this.pointerDirection(),
+      width = this.width(),
+      height = this.height();
+
+    if (direction === UP) {
+      y -= pointerHeight;
+      height += pointerHeight;
+    } else if (direction === DOWN) {
+      height += pointerHeight;
+    } else if (direction === LEFT) {
+      // ARGH!!! I have no idea why should I used magic 1.5!!!!!!!!!
+      x -= pointerWidth * 1.5;
+      width += pointerWidth;
+    } else if (direction === RIGHT) {
+      width += pointerWidth * 1.5;
+    }
+    return {
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+    };
+  }
+
+  pointerDirection: GetSet<
+    'left' | 'up' | 'right' | 'down' | typeof NONE,
+    this
+  >;
+  pointerWidth: GetSet<number, this>;
+  pointerHeight: GetSet<number, this>;
+  cornerRadius: GetSet<number, this>;
+}
+
+Tag.prototype.className = 'Tag';
+_registerNode(Tag);
+
+/**
+ * get/set pointer direction
+ * @name Konva.Tag#pointerDirection
+ * @method
+ * @param {String} pointerDirection can be up, right, down, left, or none.  The default is none.
+ * @returns {String}
+ * @example
+ * tag.pointerDirection('right');
+ */
+Factory.addGetterSetter(Tag, 'pointerDirection', NONE);
+
+/**
+ * get/set pointer width
+ * @name Konva.Tag#pointerWidth
+ * @method
+ * @param {Number} pointerWidth
+ * @returns {Number}
+ * @example
+ * tag.pointerWidth(20);
+ */
+Factory.addGetterSetter(Tag, 'pointerWidth', 0, getNumberValidator());
+
+/**
+ * get/set pointer height
+ * @method
+ * @name Konva.Tag#pointerHeight
+ * @param {Number} pointerHeight
+ * @returns {Number}
+ * @example
+ * tag.pointerHeight(20);
+ */
+
+Factory.addGetterSetter(Tag, 'pointerHeight', 0, getNumberValidator());
+
+/**
+ * get/set cornerRadius
+ * @name Konva.Tag#cornerRadius
+ * @method
+ * @param {Number} cornerRadius
+ * @returns {Number}
+ * @example
+ * tag.cornerRadius(20);
+ *
+ * // set different corner radius values
+ * // top-left, top-right, bottom-right, bottom-left
+ * tag.cornerRadius([0, 10, 20, 30]);
+ */
+
+Factory.addGetterSetter(
+  Tag,
+  'cornerRadius',
+  0,
+  getNumberOrArrayOfNumbersValidator(4)
+);