@king-design/react 2.0.0-beta.0

package/components/diagram/mxgraph/util/mxGuide.js

@@ -0,0 +1,22 @@
+import mx from '../mx';
+export default function () {
+  var mxGuide = mx.mxGuide,
+      mxPolyline = mx.mxPolyline,
+      mxConstants = mx.mxConstants,
+      mxEvent = mx.mxEvent;
+  /**
+   * No dashed shapes.
+   */
+
+  mxGuide.prototype.createGuideShape = function () {
+    var guide = new mxPolyline([], mxConstants.GUIDE_COLOR, mxConstants.GUIDE_STROKEWIDTH);
+    return guide;
+  }; // Alt disables guides
+
+
+  mxGuide.prototype.isEnabledForEvent = function (evt) {
+    return !mxEvent.isAltDown(evt);
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/diagram/mxgraph/view/mxCellEditor.d.ts

@@ -0,0 +1,4 @@
+export default function (): void;
+
+
+export {normalize} from 'intact-react';

package/components/diagram/mxgraph/view/mxCellEditor.js

@@ -0,0 +1,96 @@
+import mx from '../mx';
+export default function () {
+  var mxCellEditor = mx.mxCellEditor,
+      mxUtils = mx.mxUtils,
+      mxClient = mx.mxClient;
+  mxCellEditor.prototype.blurEnabled = true;
+  /**
+   * HTML in-place editor
+   */
+  // mxCellEditor.prototype.isContentEditing = function() {
+  // var state = this.graph.view.getState(this.editingCell);
+  // return state != null && state.style['html'] == 1;
+  // };
+
+  var mxCellEditorGetInitialValue = mxCellEditor.prototype.getInitialValue;
+
+  mxCellEditor.prototype.getInitialValue = function (state, trigger) {
+    if (mxUtils.getValue(state.style, 'html', '0') == '0') {
+      return mxCellEditorGetInitialValue.apply(this, arguments);
+    } else {
+      var result = this.graph.getEditingValue(state.cell, trigger);
+
+      if (mxUtils.getValue(state.style, 'nl2Br', '1') == '1') {
+        result = result.replace(/\n/g, '<br/>');
+      } // result = this.graph.sanitizeHtml(result, true);
+
+
+      return result;
+    }
+  };
+  /**
+   * HTML in-place editor
+   */
+
+
+  mxCellEditor.prototype.escapeCancelsEditing = false;
+  var mxCellEditorStartEditing = mxCellEditor.prototype.startEditing;
+
+  mxCellEditor.prototype.startEditing = function (cell, trigger) {
+    mxCellEditorStartEditing.apply(this, arguments); // Overrides class in case of HTML content to add
+    // dashed borders for divs and table cells
+
+    var state = this.graph.view.getState(cell);
+
+    if (state != null && state.style['html'] == 1) {
+      this.textarea.className = 'mxCellEditor';
+    } else {
+      this.textarea.className = 'mxCellEditor mxPlainTextEditor';
+    } // Toggles markup vs wysiwyg mode
+
+
+    this.codeViewMode = false; // Stores current selection range when switching between markup and code
+
+    this.switchSelectionState = null; // Selects editing cell
+
+    this.graph.setSelectionCell(cell); // Enables focus outline for edges and edge labels
+
+    var parent = this.graph.getModel().getParent(cell);
+    var geo = this.graph.getCellGeometry(cell);
+
+    if (this.graph.getModel().isEdge(parent) && geo != null && geo.relative || this.graph.getModel().isEdge(cell)) {
+      // Quirks does not support outline at all so use border instead
+      if (mxClient.IS_QUIRKS) {
+        this.textarea.style.border = 'gray dotted 1px';
+      } // IE>8 and FF on Windows uses outline default of none
+      else if (mxClient.IS_IE || mxClient.IS_IE11 || mxClient.IS_FF && mxClient.IS_WIN) {
+        this.textarea.style.outline = 'gray dotted 1px';
+      } else {
+        this.textarea.style.outline = '';
+      }
+    } else if (mxClient.IS_QUIRKS) {
+      this.textarea.style.outline = 'none';
+      this.textarea.style.border = '';
+    }
+  };
+
+  var mxCellEditorGetCurrentValue = mxCellEditor.prototype.getCurrentValue;
+
+  mxCellEditor.prototype.getCurrentValue = function (state) {
+    if (mxUtils.getValue(state.style, 'html', '0') == '0') {
+      return mxCellEditorGetCurrentValue.apply(this, arguments);
+    } else {
+      var result = this.textarea.innerHTML;
+
+      if (mxUtils.getValue(state.style, 'nl2Br', '1') == '1') {
+        result = result.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>');
+      } else {
+        result = result.replace(/\r\n/g, '').replace(/\n/g, '');
+      }
+
+      return result;
+    }
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/diagram/mxgraph/view/mxCellRenderer.d.ts

@@ -0,0 +1,4 @@
+export default function (): void;
+
+
+export {normalize} from 'intact-react';

package/components/diagram/mxgraph/view/mxCellRenderer.js

@@ -0,0 +1,15 @@
+import mx from '../mx';
+export default function () {
+  var mxCellRenderer = mx.mxCellRenderer;
+  /**
+   * support render DOM as label
+   */
+
+  var getLabelValue = mxCellRenderer.prototype.getLabelValue;
+
+  mxCellRenderer.prototype.getLabelValue = function (state) {
+    return state.cell.value;
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/diagram/mxgraph/view/mxGraph.d.ts

@@ -0,0 +1,4 @@
+export default function (): void;
+
+
+export {normalize} from 'intact-react';

package/components/diagram/mxgraph/view/mxGraph.js

@@ -0,0 +1,141 @@
+import mx from '../mx'; // import expandedImage from 'mxgraphx/javascript/src/images/expanded.gif';
+// import collapsedImage from 'mxgraphx/javascript/src/images/collapsed.gif';
+
+export default function () {
+  var mxGraph = mx.mxGraph,
+      mxConstants = mx.mxConstants,
+      mxUtils = mx.mxUtils,
+      mxConnectionConstraint = mx.mxConnectionConstraint,
+      mxPoint = mx.mxPoint,
+      mxRectangle = mx.mxRectangle,
+      mxImage = mx.mxImage;
+  var expandedImage = "data:image/gif;base64,R0lGODlhCQAJAPcAAAAAAHuUrXuctYSMlISUnISUpYSUrYScpYScrYSctYyUnIyUpZScnJScpaXG3q21va29xq3G1q3G3rW9xr3GzsbGxsbOzsbO1sbO3sbW1s7W1tbe597e3t7n597v9+fn3ufv9+fv/+f3/+/v7+/v9+/39+////f37/f39/f/////9////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ywAAAAACQAJAAAIUwAdBChAoMGAAQQiJBBhwkSKhyYKIBCRAgSKFSk8EASRYsUJFCM0KkgBoGTJDQUYkBjB8kOHCwUGbOCgoQKHCjAXYIAwYcKDCRAKRChAlCDRCAEBADs=";
+  var collapsedImage = "data:image/gif;base64,R0lGODlhCQAJAPcAAAAAABAICHuUrXuctYSMlISUnISUpYSUrYScrYyUnIyUpYycpZScnJScpaXG3q3G1q3G3rW1vbW9xrW9zsbGzsbO3sbW3s7Oztbe3tbe597e3t7e597n7+fn7+/v7+/3/+////f39/f//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ywAAAAACQAJAAAIUgAdCDBQoAADAgseCADBUIRDEAYMgPggAkCIDx8QKMA4AsCIEBwKEKgIIAAAABgMMNjgwYNFDRYMEOCAQQOACxQqFFBQQUIEnz8NPIhINOKDgAAAOw=="; // Adds support for HTML labels via style. Note: Currently, only the Java
+  // backend supports HTML labels but CSS support is limited to the following:
+  // http://docs.oracle.com/javase/6/docs/api/index.html?javax/swing/text/html/CSS.html
+  // TODO: Wrap should not affect isHtmlLabel output (should be handled later)
+  // const isHtmlLabel = mxGraph.prototype.isHtmlLabel;
+
+  mxGraph.prototype.isHtmlLabel = function (cell) {
+    var state = this.view.getState(cell);
+    var style = state != null ? state.style : this.getCellStyle(cell);
+    return style != null ? style['html'] == '1' || style[mxConstants.STYLE_WHITE_SPACE] == 'wrap' : false;
+  };
+  /**
+   * Overrides method to provide connection constraints for shapes.
+   */
+
+
+  mxGraph.prototype.getAllConnectionConstraints = function (terminal, source) {
+    if (terminal != null) {
+      var constraints = mxUtils.getValue(terminal.style, 'points', null);
+
+      if (constraints != null) {
+        // Requires an array of arrays with x, y (0..1), an optional
+        // [perimeter (0 or 1), dx, and dy] eg. points=[[0,0,1,-10,10],[0,1,0],[1,1]]
+        var result = [];
+
+        try {
+          var c = JSON.parse(constraints);
+
+          for (var i = 0; i < c.length; i++) {
+            var tmp = c[i];
+            result.push(new mxConnectionConstraint(new mxPoint(tmp[0], tmp[1]), tmp.length > 2 ? tmp[2] != '0' : true, null, tmp.length > 3 ? tmp[3] : 0, tmp.length > 4 ? tmp[4] : 0));
+          }
+        } catch (e) {// ignore
+        }
+
+        return result;
+      } else if (terminal.shape != null && terminal.shape.bounds != null) {
+        var dir = terminal.shape.direction;
+        var bounds = terminal.shape.bounds;
+        var scale = terminal.shape.scale;
+        var w = bounds.width / scale;
+        var h = bounds.height / scale;
+
+        if (dir == mxConstants.DIRECTION_NORTH || dir == mxConstants.DIRECTION_SOUTH) {
+          var tmp = w;
+          w = h;
+          h = tmp;
+        }
+
+        constraints = terminal.shape.getConstraints(terminal.style, w, h);
+
+        if (constraints != null) {
+          return constraints;
+        } else if (terminal.shape.stencil != null && terminal.shape.stencil.constraints != null) {
+          return terminal.shape.stencil.constraints;
+        } else if (terminal.shape.constraints != null) {
+          return terminal.shape.constraints;
+        }
+      }
+    }
+
+    return null;
+  };
+  /**
+   * Returns a point that specifies the location for inserting cells.
+   */
+
+
+  mxGraph.prototype.getInsertPoint = function () {
+    var gs = this.getGridSize();
+    var dx = this.container.scrollLeft / this.view.scale - this.view.translate.x;
+    var dy = this.container.scrollTop / this.view.scale - this.view.translate.y;
+    var layout = this.getPageLayout();
+    var page = this.getPageSize();
+    dx = Math.max(dx, layout.x * page.width);
+    dy = Math.max(dy, layout.y * page.height);
+    return new mxPoint(this.snap(dx + gs), this.snap(dy + gs));
+  };
+
+  mxGraph.prototype.getFreeInsertPoint = function () {
+    var view = this.view;
+    var bds = this.getGraphBounds();
+    var pt = this.getInsertPoint(); // Places at same x-coord and 2 grid sizes below existing graph
+
+    var x = this.snap(Math.round(Math.max(pt.x, bds.x / view.scale - view.translate.x + (bds.width == 0 ? 2 * this.gridSize : 0))));
+    var y = this.snap(Math.round(Math.max(pt.y, (bds.y + bds.height) / view.scale - view.translate.y + 2 * this.gridSize)));
+    return new mxPoint(x, y);
+  };
+  /**
+   * Returns a rectangle describing the position and count of the
+   * background pages, where x and y are the position of the top,
+   * left page and width and height are the vertical and horizontal
+   * page count.
+   */
+
+
+  mxGraph.prototype.getPageLayout = function () {
+    var size = this.getPageSize();
+    var bounds = this.getGraphBounds();
+
+    if (bounds.width == 0 || bounds.height == 0) {
+      return new mxRectangle(0, 0, 1, 1);
+    } else {
+      // Computes untransformed graph bounds
+      var x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
+      var y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
+      var w = Math.floor(bounds.width / this.view.scale);
+      var h = Math.floor(bounds.height / this.view.scale);
+      var x0 = Math.floor(x / size.width);
+      var y0 = Math.floor(y / size.height);
+      var w0 = Math.ceil((x + w) / size.width) - x0;
+      var h0 = Math.ceil((y + h) / size.height) - y0;
+      return new mxRectangle(x0, y0, w0, h0);
+    }
+  };
+  /**
+   * Returns the size of the page format scaled with the page size.
+   */
+
+
+  mxGraph.prototype.getPageSize = function () {
+    return new mxRectangle(0, 0, this.pageFormat.width * this.pageScale, this.pageFormat.height * this.pageScale);
+  };
+
+  mxGraph.prototype.expandedImage = new mxImage(expandedImage, 9, 9);
+  mxGraph.prototype.collapsedImage = new mxImage(collapsedImage, 9, 9);
+}
+
+export {normalize} from 'intact-react';

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

@@ -0,0 +1,45 @@
+import { Component, TypeDefs, VNodeComponentClass } from 'intact-react';
+import type { Diagram } from '../diagram';
+export declare type Cell = {
+    data?: any;
+    instance?: DBase;
+    vertex?: boolean;
+    edge?: boolean;
+    getGeometry: () => any;
+    setTerminal: (...args: any[]) => void;
+};
+export interface DBaseProps {
+    strokeStyle?: 'solid' | 'dashed' | 'dotted';
+    label?: string | number;
+    style?: Record<string, string | number>;
+    data?: any;
+}
+export declare abstract class DBase<P extends DBaseProps = DBaseProps> extends Component<P> {
+    static typeDefs: Required<TypeDefs<DBaseProps>>;
+    static defaults: () => Partial<DBaseProps>;
+    uniqueId: number;
+    cell: Cell | null;
+    protected diagram: Diagram;
+    private hasDrew;
+    private layout;
+    mounted(): void;
+    beforeUpdate(lastVNode: VNodeComponentClass<DBase>, nextVNode: VNodeComponentClass<DBase>): void;
+    beforeUnmount(): void;
+    draw(): void;
+    protected abstract startDraw(): void;
+    protected abstract addToDigram(): void;
+    protected abstract deleteFromDiagram(): void;
+    protected abstract getStylesheet(): string;
+    protected abstract getGeometry(): any;
+    protected updateProps(model: any, lastProps: DBaseProps, nextProps: DBaseProps): void;
+    protected createCell(): any;
+    protected getValue(): string | null | Element;
+    protected setStyle(): void;
+    protected genStyles(): {
+        dashed?: number | null | undefined;
+        dashPattern?: string | null | undefined;
+    };
+}
+
+
+export {normalize} from 'intact-react';

package/components/diagram/shapes/base.js

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, inject } from 'intact-react';
+import mx from '../mxgraph';
+import { isNullOrUndefined, EMPTY_OBJ } from 'intact-shared';
+import { DIAGRAM, LAYOUT } from '../constants';
+var mxCell = mx.mxCell,
+    mxGeometry = mx.mxGeometry;
+var typeDefs = {
+  strokeStyle: ['solid', 'dashed', 'dotted'],
+  label: [String, Number],
+  style: Object,
+  data: null
+};
+
+var defaults = function defaults() {
+  return {
+    strokeStyle: 'solid'
+  };
+};
+
+var uniqueId = 0;
+export var DBase = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(DBase, _Component);
+
+  function DBase() {
+    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.uniqueId = uniqueId++;
+    _this.cell = null;
+    _this.diagram = inject(DIAGRAM);
+    _this.hasDrew = false;
+    _this.layout = inject(LAYOUT, null);
+    return _this;
+  }
+
+  var _proto = DBase.prototype;
+
+  _proto.mounted = function mounted() {
+    var _this$get = this.get(),
+        data = _this$get.data;
+
+    var cell = this.cell = this.createCell(); // add data to the cell, so that we can get it when select the cell
+
+    cell.data = data;
+    cell.instance = this;
+    this.addToDigram();
+
+    if (this.layout) {
+      this.layout.addShape(this);
+    }
+  };
+
+  _proto.beforeUpdate = function beforeUpdate(lastVNode, nextVNode) {
+    var lastProps = lastVNode.props || EMPTY_OBJ;
+    var nextProps = nextVNode.props || EMPTY_OBJ;
+
+    if (lastProps !== nextProps) {
+      var graph = this.diagram.graph;
+      var model = graph.getModel();
+      model.beginUpdate();
+      this.updateProps(model, lastProps, nextProps);
+      model.endUpdate();
+    }
+  };
+
+  _proto.beforeUnmount = function beforeUnmount() {
+    var graph = this.diagram.graph;
+    this.deleteFromDiagram();
+    graph.removeCells([this.cell], false);
+
+    if (this.layout) {
+      this.layout.deleteShape(this);
+    }
+  };
+
+  _proto.draw = function draw() {
+    if (this.hasDrew) return;
+    this.startDraw();
+    this.hasDrew = true;
+  };
+
+  _proto.updateProps = function updateProps(model, lastProps, nextProps) {
+    var cell = this.cell;
+
+    if (lastProps.label !== nextProps.label) {
+      // update value
+      model.setValue(cell, this.getValue());
+    } // update style
+
+
+    model.setStyle(cell, this.getStylesheet());
+    this.setStyle(); // update data
+
+    cell.data = nextProps.data;
+  };
+
+  _proto.createCell = function createCell() {
+    return new mxCell(this.getValue(), this.getGeometry(), this.getStylesheet());
+  };
+
+  _proto.getValue = function getValue() {
+    var _this$get2 = this.get(),
+        label = _this$get2.label;
+
+    return isNullOrUndefined(label) ? null : String(label);
+  };
+
+  _proto.setStyle = function setStyle() {
+    var graph = this.diagram.graph;
+    var cells = [this.cell];
+
+    var styles = _extends({}, this.get('style'), this.genStyles());
+
+    for (var key in styles) {
+      graph.setCellStyles(key, styles[key], cells);
+    }
+  };
+
+  _proto.genStyles = function genStyles() {
+    var styles = {};
+
+    switch (this.get('strokeStyle')) {
+      case 'dashed':
+        styles.dashed = 1;
+        styles.dashPattern = null;
+        break;
+
+      case 'dotted':
+        styles.dashed = 1;
+        styles.dashPattern = '1 2';
+        break;
+
+      case 'solid':
+        styles.dashed = null;
+        styles.dashPattern = null;
+        break;
+    }
+
+    return styles;
+  };
+
+  return DBase;
+}(Component);
+DBase.typeDefs = typeDefs;
+DBase.defaults = defaults;
+
+export {normalize} from 'intact-react';

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

@@ -0,0 +1,24 @@
+import { DShape } from './shape';
+export declare class DCallout 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/callout.js

@@ -0,0 +1,80 @@
+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,
+    mxRectangle = mx.mxRectangle,
+    mxCellRenderer = mx.mxCellRenderer,
+    mxHexagon = mx.mxHexagon,
+    mxConstants = mx.mxConstants,
+    mxPoint = mx.mxPoint,
+    mxPerimeter = mx.mxPerimeter,
+    mxStyleRegistry = mx.mxStyleRegistry;
+export var DCallout = /*#__PURE__*/function (_DShape) {
+  _inheritsLoose(DCallout, _DShape);
+
+  function DCallout() {
+    return _DShape.apply(this, arguments) || this;
+  }
+
+  DCallout.defaults = function defaults() {
+    return _extends({}, DShape.defaults(), {
+      width: 120,
+      height: 80
+    });
+  };
+
+  var _proto = DCallout.prototype;
+
+  _proto.getStylesheet = function getStylesheet() {
+    return 'shape=callout;whiteSpace=wrap;html=1;perimeter=calloutPerimeter;';
+  };
+
+  return DCallout;
+}(DShape);
+DCallout.displayName = 'DCallout';
+
+if (hasDocumentAvailable) {
+  // Callout shape
+  var CalloutShape = function CalloutShape() {
+    mxActor.call(this);
+  };
+
+  mxUtils.extend(CalloutShape, mxHexagon);
+  CalloutShape.prototype.size = 30;
+  CalloutShape.prototype.position = 0.5;
+  CalloutShape.prototype.position2 = 0.5;
+  CalloutShape.prototype.base = 20;
+  /* istanbul ignore next */
+
+  CalloutShape.prototype.getLabelMargins = function () {
+    return new mxRectangle(0, 0, 0, parseFloat(mxUtils.getValue(this.style, 'size', this.size)) * this.scale);
+  };
+  /* istanbul ignore next */
+
+
+  CalloutShape.prototype.isRoundable = function () {
+    return true;
+  };
+
+  CalloutShape.prototype.redrawPath = function (c, x, y, w, h) {
+    var arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+    var s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
+    var dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position))));
+    var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));
+    var base = Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'base', this.base))));
+    this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, h - s), new mxPoint(Math.min(w, dx + base), h - s), new mxPoint(dx2, h), new mxPoint(Math.max(0, dx), h - s), new mxPoint(0, h - s)], this.isRounded, arcSize, true, [4]);
+  };
+
+  mxCellRenderer.registerShape('callout', CalloutShape); // Callout Perimeter
+
+  mxPerimeter.CalloutPerimeter = function (bounds, vertex, next, orthogonal) {
+    return mxPerimeter.RectanglePerimeter(mxUtils.getDirectedBounds(bounds, new mxRectangle(0, 0, 0, Math.max(0, Math.min(bounds.height, parseFloat(mxUtils.getValue(vertex.style, 'size', CalloutShape.prototype.size)) * vertex.view.scale))), vertex.style), vertex, next, orthogonal);
+  };
+
+  mxStyleRegistry.putValue('calloutPerimeter', mxPerimeter.CalloutPerimeter);
+}
+
+export {normalize} from 'intact-react';

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

@@ -0,0 +1,25 @@
+import { DShape } from './shape';
+export declare class DCircle extends DShape {
+    static displayName: string;
+    static defaults(): {
+        width: number;
+        left?: string | number | undefined;
+        top?: string | number | undefined;
+        height?: 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;
+    };
+    getGeometry(): any;
+    getStylesheet(): string;
+}
+
+
+export {normalize} from 'intact-react';