@king-design/react 2.0.0-beta.0

package/components/diagram/layouts/circle.js

@@ -0,0 +1,56 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { DLayout } from './layout';
+import mx from '../mxgraph';
+var mxCircleLayout = mx.mxCircleLayout;
+
+var typeDefs = _extends({}, DLayout.typeDefs, {
+  x0: [Number, String],
+  y0: [Number, String]
+});
+
+var defaults = function defaults() {
+  return _extends({}, DLayout.defaults(), {
+    x0: 0,
+    y0: 0
+  });
+};
+
+export var DCircleLayout = /*#__PURE__*/function (_DLayout) {
+  _inheritsLoose(DCircleLayout, _DLayout);
+
+  function DCircleLayout() {
+    return _DLayout.apply(this, arguments) || this;
+  }
+
+  var _proto = DCircleLayout.prototype;
+
+  _proto.getLayout = function getLayout(graph) {
+    var _this$get = this.get(),
+        x0 = _this$get.x0,
+        y0 = _this$get.y0;
+
+    var layout = new mxCircleLayout(graph); // layout.radius = radius;
+
+    layout.moveCircle = true;
+    layout.x0 = x0;
+    layout.y0 = y0;
+    layout.disableEdgeStyle = false;
+    return layout;
+  };
+
+  _proto.execute = function execute(layout, cells, parent, graph) {
+    if (!cells.length) return;
+    var tmp = parent.cell;
+    layout.execute(tmp); // if (graph.getModel().isVertex(tmp)) {
+    // graph.updateGroupBounds([tmp], graph.gridSize * 2, true);
+    // }
+  };
+
+  return DCircleLayout;
+}(DLayout);
+DCircleLayout.displayName = 'DCircleLayout';
+DCircleLayout.typeDefs = typeDefs;
+DCircleLayout.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/flow.d.ts

@@ -0,0 +1,19 @@
+import { TypeDefs } from 'intact-react';
+import { DLayout, DLayoutProps } from './layout';
+export interface DFlowLayoutProps extends DLayoutProps {
+    type?: 'horizontal' | 'vertical';
+    intraCellSpacing?: number | string;
+    interRankCellSpacing?: number | string;
+    interHierarchySpacing?: number | string;
+    resizeParent?: boolean;
+    parentBorder?: number | string;
+}
+export declare class DFlowLayout extends DLayout<DFlowLayoutProps> {
+    static displayName: string;
+    static typeDefs: Required<TypeDefs<DFlowLayoutProps>>;
+    static defaults: () => Partial<DFlowLayoutProps>;
+    protected getLayout(graph: any): any;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/flow.js

@@ -0,0 +1,69 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { DLayout } from './layout';
+import mx from '../mxgraph';
+var mxHierarchicalLayout = mx.mxHierarchicalLayout,
+    mxConstants = mx.mxConstants;
+
+var typeDefs = _extends({}, DLayout.typeDefs, {
+  type: ['horizontal', 'vertical'],
+  intraCellSpacing: [Number, String],
+  interRankCellSpacing: [Number, String],
+  interHierarchySpacing: [Number, String],
+  resizeParent: Boolean,
+  parentBorder: [Number, String]
+});
+
+var defaults = function defaults() {
+  return _extends({}, DLayout.defaults(), {
+    // The spacing buffer added between cells on the same layer.
+    intraCellSpacing: 30,
+    // The spacing buffer between unconnected hierarchies.
+    interHierarchySpacing: 30,
+    // The spacing buffer added between cell on adjacent layers.
+    interRankCellSpacing: 50,
+    // parallelEdgeSpacing: 10,
+    resizeParent: false,
+    // The border to be added around the children if the parent is to be resized using resizeParent.
+    parentBorder: 0
+  });
+};
+
+export var DFlowLayout = /*#__PURE__*/function (_DLayout) {
+  _inheritsLoose(DFlowLayout, _DLayout);
+
+  function DFlowLayout() {
+    return _DLayout.apply(this, arguments) || this;
+  }
+
+  var _proto = DFlowLayout.prototype;
+
+  _proto.getLayout = function getLayout(graph) {
+    var _this$get = this.get(),
+        type = _this$get.type,
+        interHierarchySpacing = _this$get.interHierarchySpacing,
+        interRankCellSpacing = _this$get.interRankCellSpacing,
+        intraCellSpacing = _this$get.intraCellSpacing,
+        resizeParent = _this$get.resizeParent,
+        parentBorder = _this$get.parentBorder;
+
+    var direction = type === 'horizontal' ? mxConstants.DIRECTION_WEST : mxConstants.DIRECTION_NORTH;
+    var layout = new mxHierarchicalLayout(graph, direction);
+    layout.intraCellSpacing = +intraCellSpacing;
+    layout.interHierarchySpacing = +interHierarchySpacing;
+    layout.interRankCellSpacing = +interRankCellSpacing;
+    layout.resizeParent = resizeParent;
+    layout.parentBorder = +parentBorder;
+    layout.disableEdgeStyle = false;
+    layout.edgeStyle = 'orthogonalEdgeStyle';
+    layout.maintainParentLocation = true;
+    return layout;
+  };
+
+  return DFlowLayout;
+}(DLayout);
+DFlowLayout.displayName = 'DFlowLayout';
+DFlowLayout.typeDefs = typeDefs;
+DFlowLayout.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/layout.d.ts

@@ -0,0 +1,28 @@
+import { Component, TypeDefs } from 'intact-react';
+import { DBase } from '../shapes/base';
+import type { DShape } from '../shapes/shape';
+import type { Diagram } from '../diagram';
+import type { Cell } from '../shapes/base';
+export interface DLayoutProps {
+    left?: number | string;
+    top?: number | string;
+}
+export declare abstract class DLayout<P extends DLayoutProps = DLayoutProps> extends Component<P> {
+    static template: (this: DLayout) => import("intact").VNode<string>;
+    static typeDefs: Required<TypeDefs<DLayoutProps>>;
+    static defaults: () => Partial<DLayoutProps>;
+    private diagram;
+    private shapes;
+    private shape;
+    init(): void;
+    mounted(): void;
+    beforeUnmount(): void;
+    addShape(shape: DBase): void;
+    deleteShape(shape: DBase): void;
+    draw(): void;
+    protected abstract getLayout(graph: any): any;
+    protected execute(layout: any, cells: Cell[], parent: DShape | Diagram, graph: any): void;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/layout.js

@@ -0,0 +1,113 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { Component, createVNode as h, inject, provide, isComponentClass } from 'intact-react';
+import { eachChildren } from '../../utils';
+import { DBase } from '../shapes/base';
+import { DIAGRAM, SHAPE, LAYOUT } from '../constants';
+import { isStringOrNumber, error } from 'intact-shared';
+var typeDefs = {
+  left: [String, Number],
+  top: [String, Number]
+};
+
+var defaults = function defaults() {
+  return {
+    left: 0,
+    top: 0
+  };
+};
+
+export var DLayout = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(DLayout, _Component);
+
+  function DLayout() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.diagram = inject(DIAGRAM);
+    _this.shapes = new _Set();
+    _this.shape = inject(SHAPE, null);
+    return _this;
+  }
+
+  var _proto = DLayout.prototype;
+
+  _proto.init = function init() {
+    provide(LAYOUT, this);
+  };
+
+  _proto.mounted = function mounted() {
+    this.diagram.addLayout(this);
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    this.diagram.deleteLayout(this);
+  };
+
+  _proto.addShape = function addShape(shape) {
+    this.shapes.add(shape);
+  };
+
+  _proto.deleteShape = function deleteShape(shape) {
+    this.shapes.delete(shape);
+  };
+
+  _proto.draw = function draw() {
+    var _context2;
+
+    var _this$get = this.get(),
+        left = _this$get.left,
+        top = _this$get.top;
+
+    var diagram = this.diagram;
+    var graph = diagram.graph;
+    var layout = this.getLayout(graph); // Allows the layout to move cells even though cells
+    // aren't movable in the graph
+
+    layout.isVertexMovable = function () {
+      return true;
+    };
+
+    var cells = _mapInstanceProperty(_context2 = _Array$from(this.shapes)).call(_context2, function (shape) {
+      return shape.cell;
+    });
+
+    var parent = this.shape ? this.shape : this.diagram;
+    this.execute(layout, cells, parent, graph); // move cells totally
+
+    graph.moveCells(cells, +left, +top);
+  };
+
+  _proto.execute = function execute(layout, cells, parent, graph) {
+    layout.execute(parent.cell, cells);
+  };
+
+  return DLayout;
+}(Component);
+
+DLayout.template = function () {
+  if (process.env.NODE_ENV !== 'production') {
+    eachChildren(this.get('children'), function (vNode) {
+      if (isStringOrNumber(vNode)) return;
+      if (isComponentClass(vNode) && vNode.tag.prototype instanceof DBase) return;
+      error("DLayout can only contain DShape or DLine, but " + vNode.tag + " found.");
+    });
+  }
+
+  var constructor = this.constructor;
+  return h(constructor.displayName, null, this.get('children'));
+};
+
+DLayout.typeDefs = typeDefs;
+DLayout.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/organic.d.ts

@@ -0,0 +1,18 @@
+import { TypeDefs } from 'intact-react';
+import { DLayout, DLayoutProps } from './layout';
+import type { Cell } from '../shapes/base';
+import type { DShape } from '../shapes/shape';
+import type { Diagram } from '../diagram';
+export interface DOrganicLayoutProps extends DLayoutProps {
+    forceConstant?: number | string;
+}
+export declare class DOrganicLayout extends DLayout<DOrganicLayoutProps> {
+    static displayName: string;
+    static typeDefs: Required<TypeDefs<DOrganicLayoutProps>>;
+    static defaults: () => Partial<DOrganicLayoutProps>;
+    protected getLayout(graph: any): any;
+    protected execute(layout: any, cells: Cell[], parent: DShape | Diagram, graph: any): void;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/organic.js

@@ -0,0 +1,51 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { DLayout } from './layout';
+import mx from '../mxgraph';
+var mxFastOrganicLayout = mx.mxFastOrganicLayout;
+
+var typeDefs = _extends({}, DLayout.typeDefs, {
+  forceConstant: [Number, String]
+});
+
+var defaults = function defaults() {
+  return _extends({}, DLayout.defaults(), {
+    // The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of.  The value equates to the average radius there is of free space around each node. 
+    forceConstant: 50
+  });
+};
+
+export var DOrganicLayout = /*#__PURE__*/function (_DLayout) {
+  _inheritsLoose(DOrganicLayout, _DLayout);
+
+  function DOrganicLayout() {
+    return _DLayout.apply(this, arguments) || this;
+  }
+
+  var _proto = DOrganicLayout.prototype;
+
+  _proto.getLayout = function getLayout(graph) {
+    var _this$get = this.get(),
+        forceConstant = _this$get.forceConstant;
+
+    var layout = new mxFastOrganicLayout(graph);
+    layout.forceConstant = +forceConstant;
+    layout.disableEdgeStyle = false;
+    return layout;
+  };
+
+  _proto.execute = function execute(layout, cells, parent, graph) {
+    if (!cells.length) return;
+    var tmp = parent.cell;
+    layout.execute(tmp); // if (graph.getModel().isVertex(tmp)) {
+    // graph.updateGroupBounds([tmp], graph.gridSize * 2, true);
+    // }
+  };
+
+  return DOrganicLayout;
+}(DLayout);
+DOrganicLayout.displayName = 'DOrganicLayout';
+DOrganicLayout.typeDefs = typeDefs;
+DOrganicLayout.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/partition.d.ts

@@ -0,0 +1,17 @@
+import { TypeDefs } from 'intact-react';
+import { DLayout, DLayoutProps } from './layout';
+export interface DPartitionLayoutProps extends DLayoutProps {
+    type?: 'horizontal' | 'vertical';
+    spacing?: number | string;
+    border?: number | string;
+    resizeVertices?: boolean;
+}
+export declare class DPartitionLayout extends DLayout<DPartitionLayoutProps> {
+    static displayName: string;
+    static typeDefs: Required<TypeDefs<DPartitionLayoutProps>>;
+    static defaults: () => Partial<DPartitionLayoutProps>;
+    protected getLayout(graph: any): any;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/partition.js

@@ -0,0 +1,55 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { DLayout } from './layout';
+import mx from '../mxgraph';
+var mxPartitionLayout = mx.mxPartitionLayout;
+
+var typeDefs = _extends({}, DLayout.typeDefs, {
+  type: ['horizontal', 'vertical'],
+  spacing: [Number, String],
+  border: [Number, String],
+  resizeVertices: Boolean
+});
+
+var defaults = function defaults() {
+  return _extends({}, DLayout.defaults(), {
+    type: 'horizontal',
+    // Integer that specifies the absolute spacing in pixels between the children. 
+    spacing: 0,
+    // Integer that specifies the absolute inset in pixels for the parent that contains the children.
+    border: 0,
+    // Boolean that specifies if vertices should be resized.
+    resizeVertices: true
+  });
+};
+
+export var DPartitionLayout = /*#__PURE__*/function (_DLayout) {
+  _inheritsLoose(DPartitionLayout, _DLayout);
+
+  function DPartitionLayout() {
+    return _DLayout.apply(this, arguments) || this;
+  }
+
+  var _proto = DPartitionLayout.prototype;
+
+  _proto.getLayout = function getLayout(graph) {
+    var _this$get = this.get(),
+        type = _this$get.type,
+        spacing = _this$get.spacing,
+        border = _this$get.border,
+        resizeVertices = _this$get.resizeVertices;
+
+    var layout = new mxPartitionLayout(graph, type === 'horizontal');
+    layout.spacing = +spacing;
+    layout.border = +border;
+    layout.resizeVertices = resizeVertices;
+    return layout;
+  };
+
+  return DPartitionLayout;
+}(DLayout);
+DPartitionLayout.displayName = 'DPartitionLayout';
+DPartitionLayout.typeDefs = typeDefs;
+DPartitionLayout.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/radial.d.ts

@@ -0,0 +1,21 @@
+import { TypeDefs } from 'intact-react';
+import { DLayout, DLayoutProps } from './layout';
+import type { Cell } from '../shapes/base';
+import type { DShape } from '../shapes/shape';
+import type { Diagram } from '../diagram';
+export interface DRadialLayoutProps extends DLayoutProps {
+    levelDistance?: number | string;
+    nodeDistance?: number | string;
+    rootx?: number | string;
+    rooty?: number | string;
+}
+export declare class DRadialLayout extends DLayout<DRadialLayoutProps> {
+    static displayName: string;
+    static typeDefs: Required<TypeDefs<DRadialLayoutProps>>;
+    static defaults: () => Partial<DRadialLayoutProps>;
+    protected getLayout(graph: any): any;
+    protected execute(layout: any, cells: Cell[], parent: DShape | Diagram, graph: any): void;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/radial.js

@@ -0,0 +1,72 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { DLayout } from './layout';
+import mx from '../mxgraph';
+var mxRadialTreeLayout = mx.mxRadialTreeLayout;
+
+var typeDefs = _extends({}, DLayout.typeDefs, {
+  levelDistance: [Number, String],
+  nodeDistance: [Number, String],
+  rootx: [Number, String],
+  rooty: [Number, String]
+});
+
+var defaults = function defaults() {
+  return _extends({}, DLayout.defaults(), {
+    levelDistance: 60,
+    nodeDistance: 16,
+    rootx: 0,
+    rooty: 0
+  });
+};
+
+export var DRadialLayout = /*#__PURE__*/function (_DLayout) {
+  _inheritsLoose(DRadialLayout, _DLayout);
+
+  function DRadialLayout() {
+    return _DLayout.apply(this, arguments) || this;
+  }
+
+  var _proto = DRadialLayout.prototype;
+
+  _proto.getLayout = function getLayout(graph) {
+    var _this$get = this.get(),
+        levelDistance = _this$get.levelDistance,
+        nodeDistance = _this$get.nodeDistance;
+
+    var layout = new mxRadialTreeLayout(graph);
+    layout.autoRadius = true;
+    layout.nodeDistance = +nodeDistance;
+    layout.levelDistance = +levelDistance; // layout.useBoundingBox = false;
+
+    layout.edgeRouting = false;
+    return layout;
+  };
+
+  _proto.execute = function execute(layout, cells, parent, graph) {
+    if (!cells.length) return;
+    var roots = graph.findTreeRoots(parent.cell);
+    var tmp = cells[0];
+
+    if (roots && roots.length) {
+      tmp = roots[0];
+    }
+
+    var _this$get2 = this.get(),
+        rootx = _this$get2.rootx,
+        rooty = _this$get2.rooty;
+
+    var geo = tmp.getGeometry().clone();
+    if (rootx != null) geo.x = +rootx;
+    if (rooty != null) geo.y = +rooty;
+    graph.model.setGeometry(tmp, geo);
+    layout.execute(parent.cell, tmp);
+  };
+
+  return DRadialLayout;
+}(DLayout);
+DRadialLayout.displayName = 'DRadialLayout';
+DRadialLayout.typeDefs = typeDefs;
+DRadialLayout.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/stack.d.ts

@@ -0,0 +1,19 @@
+import { TypeDefs } from 'intact-react';
+import { DLayout, DLayoutProps } from './layout';
+export interface DStackLayoutProps extends DLayoutProps {
+    type?: 'horizontal' | 'vertical';
+    spacing?: number | string;
+    wrap?: number | string;
+    fill?: boolean;
+    border?: number | string;
+    resizeParent?: boolean;
+}
+export declare class DStackLayout extends DLayout<DStackLayoutProps> {
+    static displayName: string;
+    static typeDefs: Required<TypeDefs<DStackLayoutProps>>;
+    static defaults: () => Partial<DStackLayoutProps>;
+    protected getLayout(graph: any): any;
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/stack.js

@@ -0,0 +1,66 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js/instance/fill";
+import { DLayout } from './layout';
+import mx from '../mxgraph';
+var mxStackLayout = mx.mxStackLayout;
+
+var typeDefs = _extends({}, DLayout.typeDefs, {
+  type: ['horizontal', 'vertical'],
+  spacing: [Number, String],
+  wrap: [Number, String],
+  fill: Boolean,
+  border: [Number, String],
+  resizeParent: Boolean
+});
+
+var defaults = function defaults() {
+  return _extends({}, DLayout.defaults(), {
+    type: 'horizontal',
+    // Specifies the spacing between the cells.
+    spacing: 0,
+    // Value at which a new column or row should be created.
+    wrap: undefined,
+    // Boolean indicating if dimension should be changed to fill out the parent cell.
+    fill: false,
+    // Border to be added if fill is true. 
+    border: 0,
+    // If the parent should be resized to match the width/height of the stack.
+    resizeParent: false
+  });
+};
+
+export var DStackLayout = /*#__PURE__*/function (_DLayout) {
+  _inheritsLoose(DStackLayout, _DLayout);
+
+  function DStackLayout() {
+    return _DLayout.apply(this, arguments) || this;
+  }
+
+  var _proto = DStackLayout.prototype;
+
+  _proto.getLayout = function getLayout(graph) {
+    var _this$get = this.get(),
+        type = _this$get.type,
+        spacing = _this$get.spacing,
+        wrap = _this$get.wrap,
+        fill = _fillInstanceProperty(_this$get),
+        border = _this$get.border,
+        resizeParent = _this$get.resizeParent;
+
+    var layout = new mxStackLayout(graph, type === 'horizontal');
+    layout.spacing = +spacing;
+    layout.wrap = wrap ? +wrap : null;
+    layout.fill = fill;
+    layout.border = +border;
+    layout.resizeParent = resizeParent;
+    return layout;
+  };
+
+  return DStackLayout;
+}(DLayout);
+DStackLayout.displayName = 'DStackLayout';
+DStackLayout.typeDefs = typeDefs;
+DStackLayout.defaults = defaults;
+
+export {normalize} from 'intact-react';

package/components/diagram/layouts/tree.d.ts

@@ -0,0 +1,22 @@
+import { TypeDefs } from 'intact-react';
+import { DLayout, DLayoutProps } from './layout';
+import type { Cell } from '../shapes/base';
+import type { DShape } from '../shapes/shape';
+import type { Diagram } from '../diagram';
+export interface DTreeLayoutProps extends DLayoutProps {
+    type?: 'horizontal' | 'vertical';
+    levelDistance?: string | number;
+    nodeDistance?: string | number;
+    resizeParent?: boolean;
+    groupPadding?: string | number;
+}
+export declare class DTreeLayout extends DLayout<DTreeLayoutProps> {
+    static displayName: string;
+    static typeDefs: Required<TypeDefs<DTreeLayoutProps>>;
+    static defaults: () => Partial<DTreeLayoutProps>;
+    protected getLayout(graph: any): any;
+    protected execute(layout: any, cells: Cell[], parent: DShape | Diagram, graph: any): void;
+}
+
+
+export {normalize} from 'intact-react';