@king-design/intact 2.0.0-beta.0

package/components/diagram/layouts/organic.ts

@@ -0,0 +1,51 @@
+import {TypeDefs} from 'intact';
+import {DLayout, DLayoutProps} from './layout';
+import mx from '../mxgraph';
+import type {Cell} from '../shapes/base';
+import type {DShape} from '../shapes/shape';
+import type {Diagram} from '../diagram';
+
+const {mxFastOrganicLayout} = mx;
+
+export interface DOrganicLayoutProps extends DLayoutProps {
+    forceConstant?: number | string
+}
+
+const typeDefs: Required<TypeDefs<DOrganicLayoutProps>> = {
+    ...DLayout.typeDefs,
+    forceConstant: [Number, String],
+};
+
+const defaults = (): Partial<DOrganicLayoutProps> => ({
+    ...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 class DOrganicLayout extends DLayout<DOrganicLayoutProps> {
+    static displayName = 'DOrganicLayout';
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    protected getLayout(graph: any) {
+        const {forceConstant} = this.get();
+        const layout = new mxFastOrganicLayout(graph);
+
+        layout.forceConstant = +forceConstant!;
+        layout.disableEdgeStyle = false;
+        
+        return layout;
+    }
+
+    protected execute(layout: any, cells: Cell[], parent: DShape | Diagram, graph: any) {
+        if (!cells.length) return;
+
+        let tmp = parent.cell;
+
+        layout.execute(tmp);
+
+        // if (graph.getModel().isVertex(tmp)) {
+            // graph.updateGroupBounds([tmp], graph.gridSize * 2, true);
+        // }
+    }
+}

package/components/diagram/layouts/partition.ts

@@ -0,0 +1,48 @@
+import {TypeDefs} from 'intact';
+import {DLayout, DLayoutProps} from './layout';
+import mx from '../mxgraph';
+
+const {mxPartitionLayout} = mx;
+
+export interface DPartitionLayoutProps extends DLayoutProps {
+    type?: 'horizontal' | 'vertical'
+    spacing?: number | string
+    border?: number | string
+    resizeVertices?: boolean
+}
+
+const typeDefs: Required<TypeDefs<DPartitionLayoutProps>> = {
+    ...DLayout.typeDefs,
+    type: ['horizontal', 'vertical'],
+    spacing: [Number, String],
+    border: [Number, String],
+    resizeVertices: Boolean,
+};
+
+const defaults = (): Partial<DPartitionLayoutProps> => ({
+    ...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 class DPartitionLayout extends DLayout<DPartitionLayoutProps> {
+    static displayName = 'DPartitionLayout';
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    protected getLayout(graph: any) {
+        const {type, spacing, border, resizeVertices} = this.get();
+        const layout = new mxPartitionLayout(graph, type === 'horizontal');
+
+        layout.spacing = +spacing!;
+        layout.border = +border!;
+        layout.resizeVertices = resizeVertices;
+
+        return layout;
+    }
+}

package/components/diagram/layouts/radial.ts

@@ -0,0 +1,69 @@
+import {TypeDefs} from 'intact';
+import {DLayout, DLayoutProps} from './layout';
+import mx from '../mxgraph';
+import type {Cell} from '../shapes/base';
+import type {DShape} from '../shapes/shape';
+import type {Diagram} from '../diagram';
+
+const {mxRadialTreeLayout} = mx;
+
+export interface DRadialLayoutProps extends DLayoutProps {
+    levelDistance?: number | string
+    nodeDistance?: number | string
+    rootx?: number | string
+    rooty?: number | string
+}
+
+const typeDefs: Required<TypeDefs<DRadialLayoutProps>> = {
+    ...DLayout.typeDefs,
+    levelDistance: [Number, String],
+    nodeDistance: [Number, String],
+    rootx: [Number, String],
+    rooty: [Number, String],
+};
+
+const defaults = (): Partial<DRadialLayoutProps> => ({
+    ...DLayout.defaults(),
+    levelDistance: 60,
+    nodeDistance: 16,
+    rootx: 0,
+    rooty: 0,
+});
+
+export class DRadialLayout extends DLayout<DRadialLayoutProps> {
+    static displayName = 'DRadialLayout';
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    protected getLayout(graph: any) {
+        const {levelDistance, nodeDistance} = this.get();
+        const layout = new mxRadialTreeLayout(graph);    
+
+        layout.autoRadius = true;
+        layout.nodeDistance = +nodeDistance!;
+        layout.levelDistance = +levelDistance!;
+        // layout.useBoundingBox = false;
+        layout.edgeRouting = false;
+
+        return layout;
+    }
+
+    protected execute(layout: any, cells: Cell[], parent: DShape | Diagram, graph: any) {
+        if (!cells.length) return;
+
+        const roots = graph.findTreeRoots(parent.cell);
+        let tmp = cells[0];
+
+        if (roots && roots.length) {
+            tmp = roots[0];
+        }
+
+        const {rootx, rooty} = this.get();
+        const 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);
+    }
+}

package/components/diagram/layouts/stack.ts

@@ -0,0 +1,58 @@
+import {TypeDefs} from 'intact';
+import {DLayout, DLayoutProps} from './layout';
+import mx from '../mxgraph';
+
+const {mxStackLayout} = mx;
+
+export interface DStackLayoutProps extends DLayoutProps {
+    type?: 'horizontal' | 'vertical'
+    spacing?: number | string
+    wrap?: number | string
+    fill?: boolean
+    border?: number | string
+    resizeParent?: boolean
+}
+
+const typeDefs: Required<TypeDefs<DStackLayoutProps>> = {
+    ...DLayout.typeDefs,
+    type: ['horizontal', 'vertical'],
+    spacing: [Number, String],
+    wrap: [Number, String],
+    fill: Boolean,
+    border: [Number, String],
+    resizeParent: Boolean,
+};
+
+const defaults = (): Partial<DStackLayoutProps> => ({
+    ...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 class DStackLayout extends DLayout<DStackLayoutProps> {
+    static displayName = 'DStackLayout';
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    protected getLayout(graph: any) {
+        const {type, spacing, wrap, fill, border, resizeParent} = this.get();
+        const 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;
+    }
+}

package/components/diagram/layouts/tree.ts

@@ -0,0 +1,76 @@
+import {TypeDefs} from 'intact';
+import {DLayout, DLayoutProps} from './layout';
+import mx from '../mxgraph';
+import type {Cell} from '../shapes/base';
+import type {DShape} from '../shapes/shape';
+import type {Diagram} from '../diagram';
+
+const {mxCompactTreeLayout} = mx;
+
+export interface DTreeLayoutProps extends DLayoutProps {
+    type?: 'horizontal' | 'vertical'
+    levelDistance?: string | number
+    nodeDistance?: string | number
+    resizeParent?: boolean
+    groupPadding?: string | number
+}
+
+const typeDefs: Required<TypeDefs<DTreeLayoutProps>> = {
+    ...DLayout.typeDefs,
+    type: ['horizontal', 'vertical'],
+    levelDistance: [Number, String],
+    nodeDistance: [Number, String],
+    resizeParent: Boolean,
+    groupPadding: [Number, String],
+};
+
+const defaults = (): Partial<DTreeLayoutProps> => ({
+    ...DLayout.defaults(),
+    type: 'horizontal',
+    levelDistance: 30,
+    nodeDistance: 16,
+    // If the parents should be resized to match the width/height of the children. 
+    resizeParent: true,
+    // Padding added to resized parents.
+    groupPadding: 0,
+});
+
+export class DTreeLayout extends DLayout<DTreeLayoutProps> {
+    static displayName = 'DTreeLayout';
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    protected getLayout(graph: any) {
+        const {type, levelDistance, nodeDistance, resizeParent, groupPadding} = this.get();
+        const layout = new mxCompactTreeLayout(graph, type === 'horizontal');
+
+        layout.nodeDistance = +nodeDistance!;
+        layout.groupPadding = +groupPadding!;
+        // layout.moveTree = true;
+        layout.maintainParentLocation = true;
+        layout.resizeParent = resizeParent!;
+        layout.levelDistance = +levelDistance!;
+        // layout.useBoundingBox = false;
+        layout.edgeRouting = false;
+
+        return layout;
+    }
+
+    protected execute(layout: any, cells: Cell[], parent: DShape | Diagram, graph: any) {
+        if (!cells.length) return;
+
+        const roots = graph.findTreeRoots(parent.cell);
+        let tmp = cells[0];
+
+        if (roots && roots.length) {
+            tmp = roots[0];
+        }
+
+        layout.execute(parent.cell, tmp);
+
+        // tmp = graph.getModel().getParent(tmp);
+        // if (graph.getModel().isVertex(tmp)) {
+            // graph.updateGroupBounds([tmp], graph.gridSize * 2, true);
+        // }
+    }
+}

package/components/diagram/mxgraph/handler/mxConnectionHandler.ts

@@ -0,0 +1,52 @@
+import mx from '../mx';
+
+export default function() {
+    const {mxConnectionHandler, mxConstants, mxCellState} = mx;
+
+    // mxConnectionHandler.prototype.outlineConnect = true;
+    // Overrides edge preview to use current edge shape and default style
+    mxConnectionHandler.prototype.livePreview = true;
+    mxConnectionHandler.prototype.cursor = 'crosshair';
+
+    // Overrides dashed state with current edge style
+    const connectionHandlerCreateShape = mxConnectionHandler.prototype.createShape;
+    mxConnectionHandler.prototype.createShape = function() {
+        const shape = connectionHandlerCreateShape.apply(this, arguments);
+        
+        // shape.isDashed = this.graph.currentEdgeStyle[mxConstants.STYLE_DASHED] == '1';
+        shape.isDashed = false;
+        
+        return shape;
+    }
+
+    const defaultEdgeStyle = {
+        'edgeStyle': 'orthogonalEdgeStyle', 
+        'rounded': '0',
+        'jettySize': 'auto', 
+        'orthogonalLoop': '1'
+    };
+
+    // Uses current edge style for connect preview
+    mxConnectionHandler.prototype.createEdgeState = function() {
+        let style = 'html=1;';
+        for (let key in defaultEdgeStyle) {
+            style += `${key}=${defaultEdgeStyle[key as keyof typeof defaultEdgeStyle]};`
+        }
+        var edge = this.graph.createEdge(null, null, null, null, null, style);
+        var state = new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
+        
+        Object.assign(state.style, defaultEdgeStyle);
+        
+        return state;
+    };
+
+    // Overrides live preview to keep current style
+    mxConnectionHandler.prototype.updatePreview = function() {
+        // do not change color of preview
+    };
+
+    // Disables built-in connection starts
+    mxConnectionHandler.prototype.isValidSource = function() {
+        return false;
+    };
+}

package/components/diagram/mxgraph/handler/mxConstraintHandler.ts

@@ -0,0 +1,15 @@
+import mx, {createSvgImage} from '../mx';
+import '../util/mxConstants';
+
+export default function() {
+    const {mxConstraintHandler, mxConstants, mxEllipse} = mx;
+
+    mxConstraintHandler.prototype.pointImage = createSvgImage(5, 5, '<path d="m 0 0 L 5 5 M 0 5 L 5 0" stroke="' + mxConstants.HANDLE_FILLCOLOR + '"/>');
+    // Overrides highlight shape for connection points
+    mxConstraintHandler.prototype.createHighlightShape = function() {
+        const hl = new mxEllipse(null, this.highlightColor, this.highlightColor, 0);
+        hl.opacity = mxConstants.HIGHLIGHT_OPACITY;
+        
+        return hl;
+    };
+}

package/components/diagram/mxgraph/handler/mxEdgeHandler.ts

@@ -0,0 +1,47 @@
+import mx, {createSvgImage} from '../mx';
+import '../util/mxConstants';
+import {mainHandle} from './mxVertexHandler';
+
+export default function() {
+    const {mxEdgeHandler, mxConstants, mxElbowEdgeHandler, mxImageShape, mxRectangleShape, mxRectangle} = mx;
+
+    const terminalHandle = createSvgImage(18, 18, '<circle cx="9" cy="9" r="5" stroke="#fff" fill="' + mxConstants.HANDLE_FILLCOLOR + '" stroke-width="1"/><circle cx="9" cy="9" r="2" stroke="#fff" fill="transparent"/>');
+    const fixedHandle = createSvgImage(18, 18, '<circle cx="9" cy="9" r="5" stroke="#fff" fill="' + mxConstants.HANDLE_FILLCOLOR + '" stroke-width="1"/><path d="m 7 7 L 11 11 M 7 11 L 11 7" stroke="#fff"/>')
+
+    mxEdgeHandler.prototype.handleImage = mainHandle;
+    // mxEdgeHandler.prototype.terminalHandleImage = terminalHandle;
+    // mxEdgeHandler.prototype.fixedHandleImage = fixedHandle;
+    // mxEdgeHandler.prototype.labelHandleImage = secondaryHandle;
+
+    // Shows secondary handle for fixed connection points
+    mxEdgeHandler.prototype.createHandleShape = function(index?: number | null) {
+        var source = index != null && index == 0;
+        var terminalState = this.state.getVisibleTerminalState(source);
+        var c = (index != null && (index == 0 || index >= this.state.absolutePoints.length - 1 ||
+            (this.constructor == mxElbowEdgeHandler && index == 2))) ?
+            this.graph.getConnectionConstraint(this.state, terminalState, source) : null;
+        var pt = (c != null) ? this.graph.getConnectionPoint(this.state.getVisibleTerminalState(source), c) : null;
+        var img = (pt != null) ? fixedHandle : ((c != null && terminalState != null) ?
+            terminalHandle : this.handleImage);
+
+        if (img != null) {
+            var shape = new mxImageShape(new mxRectangle(0, 0, img.width, img.height), img.src);
+
+            // Allows HTML rendering of the images
+            shape.preserveImageAspect = false;
+
+            return shape;
+        } else {
+            var s = mxConstants.HANDLE_SIZE;
+
+            if (this.preferHtml) {
+                s -= 1;
+            }
+
+            return new mxRectangleShape(new mxRectangle(0, 0, s, s), mxConstants.HANDLE_FILLCOLOR, mxConstants.HANDLE_STROKECOLOR);
+        }
+    };
+
+    // Enables snapping waypoints to terminals
+    mxEdgeHandler.prototype.snapToTerminals = true;
+}

package/components/diagram/mxgraph/handler/mxGraphHandler.ts

@@ -0,0 +1,27 @@
+import mx from '../mx';
+
+export default function() {
+    const {mxGraphHandler} = mx;
+
+    mxGraphHandler.prototype.maxLivePreview = 16;
+
+    // Enables guides
+    mxGraphHandler.prototype.guidesEnabled = true;
+
+    // Removes parents where all child cells are moved out
+    mxGraphHandler.prototype.removeEmptyParents = true;
+
+    // Select descendant if we select unselectable children
+    const graphHandlerGetInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
+    mxGraphHandler.prototype.getInitialCellForEvent = function() {
+        const graph = this.graph;
+        const model = graph.getModel();
+        let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
+
+        while (!graph.isCellSelectable(cell) && model.isVertex(cell)) {
+            cell = model.getParent(cell);
+        }
+        
+        return cell;
+    };
+}

package/components/diagram/mxgraph/handler/mxRubberband.ts

@@ -0,0 +1,12 @@
+import mx from '../mx';
+
+export default function() {
+    const {mxRubberband} = mx;
+
+    // Enables fading of rubberband
+    mxRubberband.prototype.fadeOut = true;
+
+    // Increases default rubberband opacity (default is 20)
+    mxRubberband.prototype.defaultOpacity = 30;
+}
+

package/components/diagram/mxgraph/handler/mxVertexHandler.ts

@@ -0,0 +1,32 @@
+import mx, {createSvgImage} from '../mx';
+import '../util/mxConstants';
+
+let mainHandle: any;
+
+export default function() {
+    const {mxVertexHandler, mxImage, mxConstants, mxEvent} = mx;
+
+    mainHandle = createSvgImage(18, 18, `<circle cx="9" cy="9" r="5" stroke="#fff" fill="${mxConstants.HANDLE_FILLCOLOR}" stroke-width="1"/>`);
+
+    // set sizer shape
+    const rotationHandle = new mxImage('data:image/png;base64,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', 19, 21);
+    const secondaryHandle = createSvgImage(16, 16, '<path d="m 8 3 L 13 8 L 8 13 L 3 8 z" stroke="#fff" fill="#fca000"/>');
+
+    mxVertexHandler.prototype.rotationEnabled = true;
+    mxVertexHandler.prototype.handleImage = mainHandle; 
+    mxVertexHandler.prototype.secondaryHandle = secondaryHandle;
+
+    const createSizerShape = mxVertexHandler.prototype.createSizerShape;
+    mxVertexHandler.prototype.createSizerShape = function(bounds: number, index: number, fillColor: string) {
+        if (index === mxEvent.ROTATION_HANDLE) {
+            this.handleImage = rotationHandle;
+        }
+        return createSizerShape.apply(this, arguments); 
+    }
+
+    // Adds rotation handle and live preview
+    mxVertexHandler.prototype.manageSizers = true;
+    mxVertexHandler.prototype.livePreview = true;
+}
+
+export {mainHandle};

package/components/diagram/mxgraph/index.ts

@@ -0,0 +1,48 @@
+import mx from './mx';
+import {hasDocumentAvailable} from 'intact-shared';
+
+import mxConstantsSetup from './util/mxConstants';
+import mxGuideSetup from './util/mxGuide';
+import mxShapeSetup from './shape/mxShape';
+import mxRectangleShapeSetup from './shape/mxRectangleShape';
+import mxEllipseSetup from './shape/mxEllipse';
+import mxRhombusSetup from './shape/mxRhombus';
+import mxHexagonSetup from './shape/mxHexagon';
+import mxTriangleSetup from './shape/mxTriangle';
+import mxCloudSetup from './shape/mxCloud';
+import mxLineSetup from './shape/mxLine';
+import mxCylinderSetup from './shape/mxCylinder';
+import mxGraphSetup from './view/mxGraph';
+import mxCellEditorSetup from './view/mxCellEditor';
+import mxCellRendererSetup from './view/mxCellRenderer';
+import mxConnectionHandlerSetup from './handler/mxConnectionHandler';
+import mxVertexHandlerSetup from './handler/mxVertexHandler';
+import mxConstraintHandlerSetup from './handler/mxConstraintHandler';
+import mxEdgeHandlerSetup from './handler/mxEdgeHandler';
+import mxGraphHandlerSetup from './handler/mxGraphHandler';
+import mxRubberbandSetup from './handler/mxRubberband';
+
+if (hasDocumentAvailable) {
+    mxConstantsSetup();
+    mxGuideSetup();
+    mxShapeSetup();
+    mxRectangleShapeSetup();
+    mxEllipseSetup();
+    mxRhombusSetup();
+    mxHexagonSetup();
+    mxTriangleSetup();
+    mxCloudSetup();
+    mxLineSetup();
+    mxCylinderSetup();
+    mxGraphSetup();
+    mxCellEditorSetup();
+    mxCellRendererSetup();
+    mxConnectionHandlerSetup();
+    mxVertexHandlerSetup();
+    mxConstraintHandlerSetup();
+    mxEdgeHandlerSetup();
+    mxGraphHandlerSetup();
+    mxRubberbandSetup();
+}
+
+export default mx;

package/components/diagram/mxgraph/mx.ts

@@ -0,0 +1,20 @@
+import mx from 'mxgraphx';
+import {hasDocumentAvailable} from 'intact-shared';
+
+// only support running in browser
+const doll = hasDocumentAvailable ? mx({
+    mxLoadResources: false,
+    mxLoadStylesheets: false,
+}) : {};
+const {mxImage, mxLog} = doll;
+
+export default doll;
+
+export function createSvgImage(w: number, h: number, data: string) {
+    const tmp = unescape(encodeURIComponent(
+        '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
+        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="' + w + 'px" height="' + h + 'px" ' +
+        'version="1.1">' + data + '</svg>'));
+
+    return new mxImage('data:image/svg+xml;base64,' + btoa(tmp), w, h);
+}

package/components/diagram/mxgraph/shape/mxCloud.ts

@@ -0,0 +1,20 @@
+import mx from '../mx';
+
+export default function() {
+    const {mxCloud, mxConnectionConstraint, mxPoint} = mx;
+
+    mxCloud.prototype.constraints = [
+        new mxConnectionConstraint(new mxPoint(0.25, 0.25), false),
+        new mxConnectionConstraint(new mxPoint(0.4, 0.1), false),
+        new mxConnectionConstraint(new mxPoint(0.16, 0.55), false),
+        new mxConnectionConstraint(new mxPoint(0.07, 0.4), false),
+        new mxConnectionConstraint(new mxPoint(0.31, 0.8), false),
+        new mxConnectionConstraint(new mxPoint(0.13, 0.77), false),
+        new mxConnectionConstraint(new mxPoint(0.8, 0.8), false),
+        new mxConnectionConstraint(new mxPoint(0.55, 0.95), false),
+        new mxConnectionConstraint(new mxPoint(0.875, 0.5), false),
+        new mxConnectionConstraint(new mxPoint(0.96, 0.7), false),
+        new mxConnectionConstraint(new mxPoint(0.625, 0.2), false),
+        new mxConnectionConstraint(new mxPoint(0.88, 0.25), false)
+    ];
+}

package/components/diagram/mxgraph/shape/mxCylinder.ts

@@ -0,0 +1,42 @@
+import mx from '../mx';
+
+export default function() {
+    const {mxCylinder, mxUtils, mxRectangle, mxConnectionConstraint, mxPoint} = mx;
+
+    var cylinderGetCylinderSize = mxCylinder.prototype.getCylinderSize;
+
+    mxCylinder.prototype.getCylinderSize = function(x: number, y: number, w: number, h: number) {
+        var size = mxUtils.getValue(this.style, 'size');
+
+        if (size != null) {
+            return h * Math.max(0, Math.min(1, size));
+        } else {
+            return cylinderGetCylinderSize.apply(this, arguments);
+        }
+    };
+
+    mxCylinder.prototype.getLabelMargins = function(rect: {height: number}) {
+        if (mxUtils.getValue(this.style, 'boundedLbl', false)) {
+            var size = mxUtils.getValue(this.style, 'size', 0.15) * 2;
+
+            return new mxRectangle(0, Math.min(this.maxHeight * this.scale, rect.height * size), 0, 0);
+        }
+
+        return null;
+    };
+
+    mxCylinder.prototype.constraints = [
+        new mxConnectionConstraint(new mxPoint(0.15, 0.05), false),
+        new mxConnectionConstraint(new mxPoint(0.5, 0), true),
+        new mxConnectionConstraint(new mxPoint(0.85, 0.05), false),
+        new mxConnectionConstraint(new mxPoint(0, 0.3), true),
+        new mxConnectionConstraint(new mxPoint(0, 0.5), true),
+        new mxConnectionConstraint(new mxPoint(0, 0.7), true),
+        new mxConnectionConstraint(new mxPoint(1, 0.3), true),
+        new mxConnectionConstraint(new mxPoint(1, 0.5), true),
+        new mxConnectionConstraint(new mxPoint(1, 0.7), true),
+        new mxConnectionConstraint(new mxPoint(0.15, 0.95), false),
+        new mxConnectionConstraint(new mxPoint(0.5, 1), true),
+        new mxConnectionConstraint(new mxPoint(0.85, 0.95), false)
+    ];
+}

package/components/diagram/mxgraph/shape/mxEllipse.ts

@@ -0,0 +1,16 @@
+import mx from '../mx';
+
+export default function() {
+    const {mxEllipse, mxConnectionConstraint, mxPoint} = mx;
+
+    mxEllipse.prototype.constraints = [
+        new mxConnectionConstraint(new mxPoint(0, 0), true),
+        new mxConnectionConstraint(new mxPoint(1, 0), true),
+        new mxConnectionConstraint(new mxPoint(0, 1), true), 
+        new mxConnectionConstraint(new mxPoint(1, 1), true),
+        new mxConnectionConstraint(new mxPoint(0.5, 0), true),
+        new mxConnectionConstraint(new mxPoint(0.5, 1), true),
+        new mxConnectionConstraint(new mxPoint(0, 0.5), true),
+        new mxConnectionConstraint(new mxPoint(1, 0.5))
+    ];
+}