@king-design/react 2.0.0-beta.0

package/components/diagram/shapes/line.js

@@ -0,0 +1,193 @@
+import _construct from "@babel/runtime-corejs3/helpers/construct";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
+import { createVNode as h } from 'intact-react';
+import mx from '../mxgraph';
+import { DBase } from './base';
+import { isNullOrUndefined } from 'intact-shared';
+var mxCell = mx.mxCell,
+    mxGeometry = mx.mxGeometry,
+    mxPoint = mx.mxPoint;
+var arrows = ['none', 'classic', 'classicThin', 'block', 'blockThin', 'open', 'openThin', 'oval', 'diamond', 'diamondThin'];
+
+var typeDefs = _extends({}, DBase.typeDefs, {
+  strokeStyle: ['solid', 'dashed', 'dotted'],
+  type: ['rounded', 'sharp', 'curved', 'straight'],
+  startArrow: arrows,
+  endArrow: arrows,
+  startPoint: Array,
+  endPoint: Array,
+  exit: Array,
+  entry: Array,
+  from: [String, Number],
+  to: [String, Number]
+});
+
+var defaults = function defaults() {
+  return _extends({}, DBase.defaults(), {
+    startArrow: 'none',
+    endArrow: 'classic',
+    startPoint: [0, 0],
+    endPoint: [50, 0],
+    type: 'straight'
+  });
+};
+
+export var DLine = /*#__PURE__*/function (_DBase) {
+  _inheritsLoose(DLine, _DBase);
+
+  function DLine() {
+    return _DBase.apply(this, arguments) || this;
+  }
+
+  var _proto = DLine.prototype;
+
+  _proto.startDraw = function startDraw() {
+    var graph = this.diagram.graph;
+    var cell = this.cell;
+    cell.edge = true;
+    this.setStyle();
+    this.setTerminal();
+    graph.addCell(cell);
+  };
+
+  _proto.setTerminal = function setTerminal() {
+    var _this$get = this.get(),
+        from = _this$get.from,
+        to = _this$get.to,
+        startPoint = _this$get.startPoint,
+        endPoint = _this$get.endPoint;
+
+    var diagram = this.diagram;
+    var graph = diagram.graph;
+    var shapes = diagram.shapes;
+    var cell = this.cell;
+    var geo = cell.getGeometry();
+    var tmp;
+
+    if (isNullOrUndefined(from) || !(tmp = shapes.get(from))) {
+      cell.setTerminal(null, true);
+      geo.setTerminalPoint(_construct(mxPoint, startPoint), true);
+    } else {
+      cell.setTerminal(tmp.cell, true);
+    }
+
+    if (isNullOrUndefined(to) || !(tmp = shapes.get(to))) {
+      cell.setTerminal(null, false);
+      geo.setTerminalPoint(_construct(mxPoint, endPoint), false);
+    } else {
+      cell.setTerminal(tmp.cell, false);
+    }
+  };
+
+  _proto.addToDigram = function addToDigram() {
+    this.diagram.addLine(this);
+  };
+
+  _proto.deleteFromDiagram = function deleteFromDiagram() {
+    this.diagram.deleteLine(this);
+  };
+
+  _proto.getStylesheet = function getStylesheet() {
+    var _this$get2 = this.get(),
+        startArrow = _this$get2.startArrow,
+        endArrow = _this$get2.endArrow;
+
+    return "startArrow=" + startArrow + ";endArrow=" + endArrow + ";html=1;fontSize=12;";
+  };
+
+  _proto.getGeometry = function getGeometry() {
+    var geo = new mxGeometry(0, 0, 0, 0);
+    geo.relative = true;
+    return geo;
+  };
+
+  _proto.genStyles = function genStyles() {
+    return _extends({}, this.genStylesForExitAndEntry(), this.genStylesForType(), _DBase.prototype.genStyles.call(this));
+  };
+
+  _proto.updateProps = function updateProps(model, lastProps, nextProps) {
+    var _context;
+
+    _DBase.prototype.updateProps.call(this, model, lastProps, nextProps);
+
+    if (_findInstanceProperty(_context = ['from', 'to', 'startPoint', 'endPoint']).call(_context, function (key) {
+      return lastProps[key] !== nextProps[key];
+    })) {
+      // update from and to
+      this.setTerminal();
+    }
+  };
+
+  _proto.genStylesForExitAndEntry = function genStylesForExitAndEntry() {
+    var styles = {};
+
+    var _this$get3 = this.get(),
+        from = _this$get3.from,
+        exit = _this$get3.exit,
+        to = _this$get3.to,
+        entry = _this$get3.entry;
+
+    if (!isNullOrUndefined(from) && exit) {
+      styles.exitX = exit[0];
+      styles.exitY = exit[1];
+      styles.perimeter = 0;
+    }
+
+    if (!isNullOrUndefined(to) && entry) {
+      styles.entryX = entry[0];
+      styles.entryY = entry[1];
+      styles.perimeter = 0;
+    }
+
+    return styles;
+  };
+
+  _proto.genStylesForType = function genStylesForType() {
+    var styles = {};
+
+    var _this$get4 = this.get(),
+        type = _this$get4.type;
+
+    if (type !== 'straight') {
+      styles.edgeStyle = 'orthogonalEdgeStyle';
+    }
+
+    switch (type) {
+      case 'rounded':
+        styles.rounded = 1;
+        styles.curved = null;
+        break;
+
+      case 'curved':
+        styles.rounded = 0;
+        styles.curved = 1;
+        break;
+
+      case 'sharp':
+        styles.rounded = 0;
+        styles.curved = null;
+        break;
+
+      default:
+        styles.edgeStyle = 'straight';
+        styles.curved = null;
+        styles.noEdgeStyle = null;
+        break;
+    }
+
+    return styles;
+  };
+
+  return DLine;
+}(DBase);
+
+DLine.template = function () {
+  return h('dline', null, this.get('children'));
+};
+
+DLine.typeDefs = typeDefs;
+DLine.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/parallelogram.d.ts

@@ -0,0 +1,24 @@
+import { DShape } from './shape';
+export declare class DParallelogram extends DShape {
+    static displayName: string;
+    static defaults(): {
+        width: number;
+        height: number;
+        left?: string | number | undefined;
+        top?: string | number | undefined;
+        movable?: boolean | undefined;
+        selectable?: boolean | undefined;
+        resizable?: boolean | undefined;
+        rotatable?: boolean | undefined;
+        editable?: boolean | undefined;
+        connectable?: boolean | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        label?: string | number | undefined;
+        style?: Record<string, string | number> | undefined;
+        data?: any;
+    };
+    getStylesheet(): string;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/parallelogram.js

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { DShape } from './shape';
+import mx from '../mxgraph';
+import { hasDocumentAvailable } from 'intact-shared';
+var mxActor = mx.mxActor,
+    mxUtils = mx.mxUtils,
+    mxCellRenderer = mx.mxCellRenderer,
+    mxConstants = mx.mxConstants,
+    mxPoint = mx.mxPoint,
+    mxRectangleShape = mx.mxRectangleShape,
+    mxPerimeter = mx.mxPerimeter,
+    mxStyleRegistry = mx.mxStyleRegistry;
+export var DParallelogram = /*#__PURE__*/function (_DShape) {
+  _inheritsLoose(DParallelogram, _DShape);
+
+  function DParallelogram() {
+    return _DShape.apply(this, arguments) || this;
+  }
+
+  DParallelogram.defaults = function defaults() {
+    return _extends({}, DShape.defaults(), {
+      width: 120,
+      height: 60
+    });
+  };
+
+  var _proto = DParallelogram.prototype;
+
+  _proto.getStylesheet = function getStylesheet() {
+    return 'shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;';
+  };
+
+  return DParallelogram;
+}(DShape);
+DParallelogram.displayName = 'DParallelogram';
+
+if (hasDocumentAvailable) {
+  // Parallelogram shape
+  var ParallelogramShape = function ParallelogramShape() {
+    mxActor.call(this);
+  };
+
+  mxUtils.extend(ParallelogramShape, mxActor);
+  ParallelogramShape.prototype.size = 0.2;
+  /* istanbul ignore next */
+
+  ParallelogramShape.prototype.isRoundable = function () {
+    return true;
+  };
+
+  ParallelogramShape.prototype.redrawPath = function (c, x, y, w, h) {
+    var dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
+    var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+    this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w, 0), new mxPoint(w - dx, h)], this.isRounded, arcSize, true);
+    c.end();
+  };
+
+  mxCellRenderer.registerShape('parallelogram', ParallelogramShape);
+  ParallelogramShape.prototype.constraints = mxRectangleShape.prototype.constraints; // Parallelogram Perimeter
+
+  mxPerimeter.ParallelogramPerimeter = function (bounds, vertex, next, orthogonal) {
+    var size = ParallelogramShape.prototype.size;
+
+    if (vertex != null) {
+      size = mxUtils.getValue(vertex.style, 'size', size);
+    }
+
+    var x = bounds.x;
+    var y = bounds.y;
+    var w = bounds.width;
+    var h = bounds.height;
+    var direction = vertex != null ? mxUtils.getValue(vertex.style, mxConstants.STYLE_DIRECTION, mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
+    var vertical = direction == mxConstants.DIRECTION_NORTH || direction == mxConstants.DIRECTION_SOUTH;
+    var points;
+
+    if (vertical) {
+      var dy = h * Math.max(0, Math.min(1, size));
+      points = [new mxPoint(x, y), new mxPoint(x + w, y + dy), new mxPoint(x + w, y + h), new mxPoint(x, y + h - dy), new mxPoint(x, y)];
+    } else {
+      var dx = w * Math.max(0, Math.min(1, size));
+      points = [new mxPoint(x + dx, y), new mxPoint(x + w, y), new mxPoint(x + w - dx, y + h), new mxPoint(x, y + h), new mxPoint(x + dx, y)];
+    }
+
+    var cx = bounds.getCenterX();
+    var cy = bounds.getCenterY();
+    var p1 = new mxPoint(cx, cy);
+
+    if (orthogonal) {
+      if (next.x < x || next.x > x + w) {
+        p1.y = next.y;
+      } else {
+        p1.x = next.x;
+      }
+    }
+
+    return mxUtils.getPerimeterPoint(points, p1, next);
+  };
+
+  mxStyleRegistry.putValue('parallelogramPerimeter', mxPerimeter.ParallelogramPerimeter);
+}
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/rectangle.d.ts

@@ -0,0 +1,30 @@
+import { TypeDefs } from 'intact-react';
+import { DShape, DShapeProps } from './shape';
+export interface DRectangleProps extends DShapeProps {
+    rounded?: number | string;
+}
+export declare class DRectangle extends DShape<DRectangleProps> {
+    static displayName: string;
+    static typeDefs: Required<TypeDefs<DRectangleProps>>;
+    static defaults(): {
+        width: number;
+        height: number;
+        rounded: number;
+        left?: string | number | undefined;
+        top?: string | number | undefined;
+        movable?: boolean | undefined;
+        selectable?: boolean | undefined;
+        resizable?: boolean | undefined;
+        rotatable?: boolean | undefined;
+        editable?: boolean | undefined;
+        connectable?: boolean | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        label?: string | number | undefined;
+        style?: Record<string, string | number> | undefined;
+        data?: any;
+    };
+    getStylesheet(): string;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/rectangle.js

@@ -0,0 +1,38 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { DShape } from './shape';
+
+var typeDefs = _extends({}, DShape.typeDefs, {
+  rounded: [Number, String]
+});
+
+export var DRectangle = /*#__PURE__*/function (_DShape) {
+  _inheritsLoose(DRectangle, _DShape);
+
+  function DRectangle() {
+    return _DShape.apply(this, arguments) || this;
+  }
+
+  DRectangle.defaults = function defaults() {
+    return _extends({}, DShape.defaults(), {
+      width: 120,
+      height: 60,
+      rounded: 0
+    });
+  };
+
+  var _proto = DRectangle.prototype;
+
+  _proto.getStylesheet = function getStylesheet() {
+    var _this$get = this.get(),
+        rounded = _this$get.rounded;
+
+    return "rounded=" + (+rounded ? 1 : 0) + ";whiteSpace=wrap;html=1;arcSize=" + rounded;
+  };
+
+  return DRectangle;
+}(DShape);
+DRectangle.displayName = 'DRectangle';
+DRectangle.typeDefs = typeDefs;
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/shape.d.ts

@@ -0,0 +1,35 @@
+import { TypeDefs } from 'intact-react';
+import { DBase, DBaseProps } from './base';
+export interface DShapeProps extends DBaseProps {
+    left?: string | number;
+    top?: string | number;
+    width?: string | number;
+    height?: string | number;
+    movable?: boolean;
+    selectable?: boolean;
+    resizable?: boolean;
+    rotatable?: boolean;
+    editable?: boolean;
+    connectable?: boolean;
+}
+export declare abstract class DShape<P extends DShapeProps = DShapeProps> extends DBase<P> {
+    static template: (this: DShape) => import("intact").VNode<string>;
+    static typeDefs: Required<TypeDefs<DShapeProps>>;
+    static defaults: () => Partial<DShapeProps>;
+    private wrapperRef;
+    private hasElement;
+    private children;
+    private parent;
+    init(): void;
+    updated(): void;
+    beforeUnmount(): void;
+    protected startDraw(): void;
+    protected addToDigram(): void;
+    protected deleteFromDiagram(): void;
+    protected getGeometry(): any;
+    protected getValue(): string | HTMLDivElement | null;
+    protected setStyle(): void;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/shape.js

@@ -0,0 +1,153 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { createVNode as h, createRef, isComponentClass, provide, inject } from 'intact-react';
+import { mapChildren } from '../../utils';
+import mx from '../mxgraph';
+import { isStringOrNumber, isNullOrUndefined } from 'intact-shared';
+import { SHAPE } from '../constants';
+import { DBase } from './base';
+var mxCell = mx.mxCell,
+    mxGeometry = mx.mxGeometry;
+var strOrNum = [String, Number];
+
+var typeDefs = _extends({}, DBase.typeDefs, {
+  left: strOrNum,
+  top: strOrNum,
+  width: strOrNum,
+  height: strOrNum,
+  movable: Boolean,
+  selectable: Boolean,
+  resizable: Boolean,
+  rotatable: Boolean,
+  editable: Boolean,
+  connectable: Boolean
+});
+
+var defaults = function defaults() {
+  return _extends({}, DBase.defaults(), {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+  });
+};
+
+export var DShape = /*#__PURE__*/function (_DBase) {
+  _inheritsLoose(DShape, _DBase);
+
+  function DShape() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _DBase.call.apply(_DBase, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.wrapperRef = createRef();
+    _this.hasElement = false;
+    _this.children = null;
+    _this.parent = inject(SHAPE, null);
+    return _this;
+  }
+
+  var _proto = DShape.prototype;
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    // shape can nest
+    provide(SHAPE, this);
+    this.on('$receive:children', function (children) {
+      _this2.children = mapChildren(children, function (vNode) {
+        if (isStringOrNumber(vNode)) return vNode;
+
+        if (isComponentClass(vNode)) {
+          var proto = vNode.tag.prototype;
+
+          if (proto instanceof DShape) {
+            return vNode;
+          }
+        }
+
+        _this2.hasElement = true;
+        return vNode;
+      });
+    });
+  };
+
+  _proto.updated = function updated() {
+    var model = this.diagram.graph.model;
+    var geo = this.getGeometry();
+    model.setGeometry(this.cell, geo);
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    var graph = this.diagram.graph;
+    this.deleteFromDiagram();
+    graph.removeCells([this.cell], false);
+  };
+
+  _proto.startDraw = function startDraw() {
+    var diagram = this.diagram;
+    var cell = this.cell;
+    var parentCell = this.parent ? this.parent.cell : diagram.cell;
+    cell.vertex = true;
+    this.setStyle();
+    diagram.graph.addCell(cell, parentCell);
+  };
+
+  _proto.addToDigram = function addToDigram() {
+    this.diagram.addShape(this);
+  };
+
+  _proto.deleteFromDiagram = function deleteFromDiagram() {
+    this.diagram.deleteShape(this);
+  };
+
+  _proto.getGeometry = function getGeometry() {
+    var _this$get = this.get(),
+        width = _this$get.width,
+        height = _this$get.height,
+        top = _this$get.top,
+        left = _this$get.left;
+
+    return new mxGeometry(+left, +top, +width, +height);
+  };
+
+  _proto.getValue = function getValue() {
+    var _this$get2 = this.get(),
+        label = _this$get2.label;
+
+    return isNullOrUndefined(label) ? this.hasElement && this.wrapperRef.value || null : String(label);
+  };
+
+  _proto.setStyle = function setStyle() {
+    // if hasElement, disable edit
+    this.diagram.graph.setCellStyles('editable', this.hasElement ? 0 : 1, [this.cell]);
+
+    _DBase.prototype.setStyle.call(this);
+  };
+
+  return DShape;
+}(DBase);
+
+DShape.template = function () {
+  var children = this.children;
+
+  if (children && children.length) {
+    children = h('div', {
+      ref: this.wrapperRef
+    }, children);
+  }
+
+  var Ctor = this.constructor;
+  return h(Ctor.displayName || Ctor.name, null, children);
+};
+
+DShape.typeDefs = typeDefs;
+DShape.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/square.d.ts

@@ -0,0 +1,26 @@
+import { DRectangle } from './rectangle';
+export declare class DSquare extends DRectangle {
+    static displayName: string;
+    static defaults(): {
+        width: number;
+        height: number;
+        rounded: number;
+        left?: string | number | undefined;
+        top?: string | number | undefined;
+        movable?: boolean | undefined;
+        selectable?: boolean | undefined;
+        resizable?: boolean | undefined;
+        rotatable?: boolean | undefined;
+        editable?: boolean | undefined;
+        connectable?: boolean | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        label?: string | number | undefined;
+        style?: Record<string, string | number> | undefined;
+        data?: any;
+    };
+    getStylesheet(): string;
+    getGeometry(): any;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/square.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { DRectangle } from './rectangle';
+import mx from '../mxgraph';
+var mxGeometry = mx.mxGeometry;
+export var DSquare = /*#__PURE__*/function (_DRectangle) {
+  _inheritsLoose(DSquare, _DRectangle);
+
+  function DSquare() {
+    return _DRectangle.apply(this, arguments) || this;
+  }
+
+  DSquare.defaults = function defaults() {
+    return _extends({}, DRectangle.defaults(), {
+      width: 80
+    });
+  };
+
+  var _proto = DSquare.prototype;
+
+  _proto.getStylesheet = function getStylesheet() {
+    var stylesheet = _DRectangle.prototype.getStylesheet.call(this);
+
+    return stylesheet + "aspect=fixed;";
+  };
+
+  _proto.getGeometry = function getGeometry() {
+    var _this$get = this.get(),
+        width = _this$get.width,
+        left = _this$get.left,
+        top = _this$get.top;
+
+    return new mxGeometry(+left, +top, +width, +width);
+  };
+
+  return DSquare;
+}(DRectangle);
+DSquare.displayName = 'DSquare';
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/text.d.ts

@@ -0,0 +1,24 @@
+import { DShape } from './shape';
+export declare class DText extends DShape {
+    static displayName: string;
+    static defaults(): {
+        width: number;
+        height: number;
+        left?: string | number | undefined;
+        top?: string | number | undefined;
+        movable?: boolean | undefined;
+        selectable?: boolean | undefined;
+        resizable?: boolean | undefined;
+        rotatable?: boolean | undefined;
+        editable?: boolean | undefined;
+        connectable?: boolean | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
+        label?: string | number | undefined;
+        style?: Record<string, string | number> | undefined;
+        data?: any;
+    };
+    getStylesheet(): string;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/text.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { DShape } from './shape';
+export var DText = /*#__PURE__*/function (_DShape) {
+  _inheritsLoose(DText, _DShape);
+
+  function DText() {
+    return _DShape.apply(this, arguments) || this;
+  }
+
+  DText.defaults = function defaults() {
+    return _extends({}, DShape.defaults(), {
+      width: 40,
+      height: 20
+    });
+  };
+
+  var _proto = DText.prototype;
+
+  _proto.getStylesheet = function getStylesheet() {
+    return "text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;";
+  };
+
+  return DText;
+}(DShape);
+DText.displayName = 'DText';
+
+export {normalize} from 'intact-react';