golfnet-editor/lib/draw/PostitRenderer.js

## Features

import inherits from 'inherits';

import {
  isObject,
  assign
} from 'min-dash';

import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate,
  classes as svgClasses
} from 'tiny-svg';

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

import {
  getLabel
} from '../features/label-editing/LabelUtil';

import {
  getBusinessObject,
  is
} from '../util/ModelUtil';

import image from '../images/pngegg.png'

import {
  getSemantic,
  getRectPath,
  getFillColor,
  getStrokeColor
} from './PostitRendererUtil';

var DEFAULT_FILL_OPACITY = .95;

var TASK_BORDER_RADIUS = 10;

var DEFAULT_TEXT_SIZE = 16;

export default function PostitRenderer(
  config, eventBus, styles, pathMap,
  canvas, textRenderer, priority) {

  BaseRenderer.call(this, eventBus, priority);

  var defaultFillColor = config && config.defaultFillColor,
    defaultStrokeColor = config && config.defaultStrokeColor;

  var computeStyle = styles.computeStyle;

  function drawCircle(parentGfx, width, height, offset, attrs) {

    if (isObject(offset)) {
      attrs = offset;
      offset = 0;
    }

    offset = offset || 0;

    attrs = computeStyle(attrs, {
      stroke: 'black',
      strokeWidth: 2,
      fill: 'white'
    });

    if (attrs.fill === 'none') {
      delete attrs.fillOpacity;
    }

    var cx = width / 2,
      cy = height / 2;

    var circle = svgCreate('circle');
    svgAttr(circle, {
      cx: cx,
      cy: cy,
      r: Math.round((width + height) / 4 - offset)
    });
    svgAttr(circle, attrs);

    svgAppend(parentGfx, circle);

    return circle;
  }

  function drawRect(parentGfx, width, height, r, offset, attrs) {

    if (isObject(offset)) {
      attrs = offset;
      offset = 0;
    }

    offset = offset || 0;

    attrs = computeStyle(attrs, {
      stroke: 'black',
      strokeWidth: 2,
      fill: 'white'
    });

    var rect = svgCreate('rect');
    svgAttr(rect, {
      x: offset,
      y: offset,
      width: width - offset * 2,
      height: height - offset * 2,
      rx: r,
      ry: r
    });
    svgAttr(rect, attrs);

    svgAppend(parentGfx, rect);

    return rect;
  }

  function drawPath(parentGfx, d, attrs) {

    attrs = computeStyle(attrs, ['no-fill'], {
      strokeWidth: 2,
      stroke: 'black'
    });

    var path = svgCreate('path');
    svgAttr(path, { d: d });
    svgAttr(path, attrs);

    svgAppend(parentGfx, path);

    return path;
  }


  function renderLabel(parentGfx, label, options) {

    options = assign({
      size: {
        width: 100
      }
    }, options);

    var text = textRenderer.createText(label || '', options);

    svgClasses(text).add('djs-label');

    svgAppend(parentGfx, text);

    return text;
  }

  function renderEmbeddedLabel(parentGfx, element, align, fontSize) {
    var semantic = getSemantic(element);

    return renderLabel(parentGfx, semantic.name, {
      box: element,
      align: align,
      padding: 5,
      style: {
        fill: getColor(element) === 'black' ? 'white' : 'black',
        fontSize: fontSize || DEFAULT_TEXT_SIZE
      },
    });
  }

  function renderExternalLabel(parentGfx, element) {

    var box = {
      width: 90,
      height: 30,
      x: element.width / 2 + element.x,
      y: element.height / 2 + element.y
    };

    return renderLabel(parentGfx, getLabel(element), {
      box: box,
      fitBox: true,
      style: assign(
        {},
        textRenderer.getExternalStyle(),
        {
          fill: 'black'
        }
      )
    });
  }

  this.handlers = {
    'postit:SquarePostit': function (parentGfx, element) {
      console.log('parentGfx', parentGfx)
      let gfx = svgCreate('image', {
        x: 0,
        y: 0,
        width: element.width,
        height: element.height,
        href: `https://dev.api.medias.pictplay.com/api/uploads/?key=pp/dev/628723db3e4e75907487e5d7/2a7ba320-d798-11ed-b238-3b5e4bf47fe5&height=auto&width=auto&fit=contain`
      });
      svgAppend(parentGfx, gfx);
      return gfx;
    },
    'postit:RectPostit': function (parentGfx, element) {
      let gfx = svgCreate('image', {
        x: 0,
        y: 0,
        width: element.width,
        height: element.height,
        href: `https://dev.api.medias.pictplay.com/api/uploads/?key=pp/dev/628723db3e4e75907487e5d7/2a8f2b20-d798-11ed-b238-3b5e4bf47fe5&height=auto&width=auto&fit=contain`
      });

      svgAppend(parentGfx, gfx);
      return gfx;
    },
    'postit:RectPostit-1': function (parentGfx, element) {
      let gfx = svgCreate('image', {
        x: 0,
        y: 0,
        width: element.width,
        height: element.height,
        href: `https://dev.api.medias.pictplay.com/api/uploads/?key=pp/dev/628723db3e4e75907487e5d7/2a7ba320-d798-11ed-b238-3b5e4bf47fe5&height=auto&width=auto&fit=contain`
      });

      svgAppend(parentGfx, gfx);
      return gfx;
    },

    'postit:solar-net': function (parentGfx, element) {

      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
        border: "3px solid black",
        backgroundColor: "grey",
        opacity: "15%",
        pointerEvents: 'none'
      });

      return group;
    },

    'postit:PanelPostit': function (parentGfx, element) {

      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
        border: "3px solid black",
        backgroundColor: "grey",
        opacity: "15%",
        pointerEvents: 'none'
      });

      return group;
    },
    'postit:NetPostit': function (parentGfx, element) {

      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
        border: "3px solid black",
        backgroundColor: "grey",
        opacity: "15%",
        pointerEvents: 'none'
      });

      return group;
    },
    'postit:Supportpostit': function (parentGfx, element) {

      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
        border: "3px solid black",
        backgroundColor: "grey",
        opacity: "15%",
        pointerEvents: 'none'
      });

      return group;
    },


    'postit:CirclePostit': function (parentGfx, element) {
      var attrs = {
        fill: getFillColor(element, defaultFillColor),
        stroke: getStrokeColor(element, defaultStrokeColor)
      };

      if (!('fillOpacity' in attrs)) {
        attrs.fillOpacity = DEFAULT_FILL_OPACITY;
      }

      var rect = drawCircle(parentGfx, element.width, element.height, attrs);

      renderEmbeddedLabel(parentGfx, element, 'center-middle');

      return rect;
    },
    'postit:TextBox': function (parentGfx, element) {
      var attrs = {
        fill: 'none',
        stroke: 'none'
      };

      var textSize = element.textSize || DEFAULT_TEXT_SIZE;

      var rect = drawRect(parentGfx, element.width, element.height, 0, attrs);

      renderEmbeddedLabel(parentGfx, element, 'center-middle', textSize);

      return rect;
    },
    'postit:Image': function (parentGfx, element) {
      var imageSource = getImageSource(element);

      console.log('imageSource', imageSource)

      var gfx;
      if (!imageSource) {

        // default placeholder
        gfx = drawRect(parentGfx, element.width, element.height, 0, {
          fill: '#ccc',
          stroke: '#ccc'
        });

        renderLabel(parentGfx, 'Image Placeholder', {
          box: element,
          align: 'center-middle',
          padding: 5,
          style: {
            fill: 'black',
            fontSize: DEFAULT_TEXT_SIZE
          },
        });

      } else {
        gfx = svgCreate('image', {
          x: 0,
          y: 0,
          width: element.width,
          height: element.height,
          href: getImageSource(element)
        });

        svgAppend(parentGfx, gfx);
      }
      return gfx;
    },

    'label': function (parentGfx, element) {
      return renderExternalLabel(parentGfx, element);
    }
  };


  // extension API, use at your own risk
  this._drawPath = drawPath;

}


inherits(PostitRenderer, BaseRenderer);

PostitRenderer.$inject = [
  'config.postit',
  'eventBus',
  'styles',
  'pathMap',
  'canvas',
  'textRenderer'
];


PostitRenderer.prototype.canRender = function (element) {
  return is(element, 'postit:BoardElement');
};

PostitRenderer.prototype.drawShape = function (parentGfx, element) {
  console.log(parentGfx)
  var type = element.type;
  var h = this.handlers[type];

  /* jshint -W040 */
  return h(parentGfx, element);
};

PostitRenderer.prototype.getShapePath = function (element) {

  return getRectPath(element);
};

// helpers //////////

function getColor(element) {
  var bo = getBusinessObject(element);

  return bo.color || element.color;
}

function getImageSource(element) {
  var bo = getBusinessObject(element);

  return bo.source || element.source;
}