@king-design/intact 2.0.0-beta.0

package/es/components/diagram/index.d.ts

@@ -0,0 +1,22 @@
+export * from './diagram';
+export * from './shapes/callout';
+export * from './shapes/circle';
+export * from './shapes/document';
+export * from './shapes/ellipse';
+export * from './shapes/hexagon';
+export * from './shapes/image';
+export * from './shapes/parallelogram';
+export * from './shapes/rectangle';
+export * from './shapes/square';
+export * from './shapes/text';
+export * from './shapes/line';
+declare const DDiamond: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
+export { DDiamond, DTriangle, DCylinder, DCloud };
+export * from './layouts/layout';
+export * from './layouts/circle';
+export * from './layouts/flow';
+export * from './layouts/organic';
+export * from './layouts/partition';
+export * from './layouts/radial';
+export * from './layouts/stack';
+export * from './layouts/tree';

package/es/components/diagram/index.js

@@ -0,0 +1,28 @@
+export * from './diagram'; // Shapes
+
+export * from './shapes/callout';
+export * from './shapes/circle';
+export * from './shapes/document';
+export * from './shapes/ellipse';
+export * from './shapes/hexagon';
+export * from './shapes/image';
+export * from './shapes/parallelogram';
+export * from './shapes/rectangle';
+export * from './shapes/square';
+export * from './shapes/text';
+export * from './shapes/line';
+import shapes from './shapes/generateShapes';
+var DDiamond = shapes.Diamond,
+    DTriangle = shapes.Triangle,
+    DCylinder = shapes.Cylinder,
+    DCloud = shapes.Cloud;
+export { DDiamond, DTriangle, DCylinder, DCloud }; // Layouts
+
+export * from './layouts/layout';
+export * from './layouts/circle';
+export * from './layouts/flow';
+export * from './layouts/organic';
+export * from './layouts/partition';
+export * from './layouts/radial';
+export * from './layouts/stack';
+export * from './layouts/tree';

package/es/components/diagram/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/diagram/index.spec.js

@@ -0,0 +1,629 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact';
+import { Diagram, DRectangle, DSquare, DCircle, DEllipse, DLine, DDiamond, DFlowLayout, DTreeLayout, DPartitionLayout, DStackLayout, DDocument, DParallelogram, DHexagon, DCallout } from './';
+import { Button } from '../button';
+import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import LayoutDemo from '~/components/diagram/demos/layout';
+import mx from './mxgraph';
+var mxClient = mx.mxClient;
+var downName = mxClient.IS_POINTER ? 'pointerdown' : 'mousedown';
+var upName = mxClient.IS_POINTER ? 'pointerup' : 'mouseup';
+var moveName = mxClient.IS_POINTER ? 'pointermove' : 'mousemove';
+
+var BaseDemo = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BaseDemo, _Component);
+
+  function BaseDemo() {
+    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 = Diagram;
+    _this.DFlowLayout = DFlowLayout;
+    _this.DTreeLayout = DTreeLayout;
+    _this.DPartitionLayout = DPartitionLayout;
+    _this.DStackLayout = DStackLayout;
+    _this.DRectangle = DRectangle;
+    _this.DCircle = DCircle;
+    _this.DLine = DLine;
+    _this.Button = Button;
+    _this.DDiamond = DDiamond;
+    _this.DEllipse = DEllipse;
+    _this.DSquare = DSquare;
+    _this.DDocument = DDocument;
+    _this.DParallelogram = DParallelogram;
+    _this.DHexagon = DHexagon;
+    _this.DCallout = DCallout;
+    return _this;
+  }
+
+  return BaseDemo;
+}(Component);
+
+describe('Diagram', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should update type of DFlowLayout', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo) {
+              _inheritsLoose(Demo, _BaseDemo);
+
+              function Demo() {
+                return _BaseDemo.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  type: 'vertical'
+                };
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DFlowLayout, DDiamond, DCircle, DLine} = this;\n                <Diagram>\n                    <DFlowLayout type={this.get('type')}>\n                        <DDiamond key=\"1\" style={{fillColor: 'red'}} />\n                        <DCircle key=\"2\" />\n                        <DLine from=\"1\" to=\"2\" />\n                    </DFlowLayout>\n                </Diagram>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('type', 'horizontal');
+            _context2.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should update type of DTreeLayout', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo2) {
+              _inheritsLoose(Demo, _BaseDemo2);
+
+              function Demo() {
+                return _BaseDemo2.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  type: 'vertical'
+                };
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DTreeLayout, DRectangle, DCircle, DLine} = this;\n                <Diagram>\n                    <DTreeLayout type={this.get('type')}>\n                        <DRectangle key=\"1\" />\n                        <DCircle key=\"2\" />\n                        <DCircle key=\"3\" />\n                        <DLine from=\"1\" to=\"2\" />\n                        <DLine from=\"1\" to=\"3\" />\n                    </DTreeLayout>\n                </Diagram>\n            ";
+            _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('type', 'horizontal');
+            _context3.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 8:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should update layout when layout changed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance, element, tmp;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo3) {
+              _inheritsLoose(Demo, _BaseDemo3);
+
+              function Demo() {
+                return _BaseDemo3.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  type: 'tree'
+                };
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {DRectangle, DCircle, DLine, Diagram, DTreeLayout, DFlowLayout} = this;\n                var shapes = [\n                    <DRectangle key=\"1\" />,\n                    <DCircle key=\"2\" />,\n                    <DCircle key=\"3\" />,\n                    <DCircle />,\n                    <DLine from=\"1\" to=\"2\" />,\n                    <DLine from=\"1\" to=\"3\" />,\n                ];\n                <Diagram>\n                    <DTreeLayout v-if={this.get('type') === 'tree'}>\n                        {shapes}\n                    </DTreeLayout>\n                    <DFlowLayout v-else>\n                        {shapes}\n                    </DFlowLayout>\n                </Diagram>\n            ";
+            _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+            tmp = element.innerHTML;
+            expect(tmp).to.matchSnapshot();
+            instance.set('type', 'flow');
+            _context4.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('type', 'tree');
+            _context4.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.eql(tmp);
+
+          case 13:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should render kpc components in shape', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Demo, _mount4, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo4) {
+              _inheritsLoose(Demo, _BaseDemo4);
+
+              function Demo() {
+                return _BaseDemo4.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  counts: 0
+                };
+              };
+
+              var _proto = Demo.prototype;
+
+              _proto._onClick = function _onClick() {
+                this.set('counts', this.get('counts') + 1);
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DRectangle, Button} = this;\n                <Diagram>\n                    <DRectangle>\n                        <Button ev-click={this._onClick.bind(this)} ref=\"button\">click</Button>\n                        <div>click counts: {this.get('counts')}</div>\n                    </DRectangle>\n                </Diagram>\n            ";
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.refs.button.elementRef.value.click();
+            _context5.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 8:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should remove element in shape correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var destroy, Demo, _mount5, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            destroy = sinon.spy(function () {
+              return console.log('destroy');
+            });
+
+            Demo = /*#__PURE__*/function (_BaseDemo5) {
+              _inheritsLoose(Demo, _BaseDemo5);
+
+              function Demo() {
+                return _BaseDemo5.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  show: true
+                };
+              };
+
+              var _proto2 = Demo.prototype;
+
+              _proto2._onDestroy = function _onDestroy() {
+                destroy();
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DRectangle, Button} = this;\n                <Diagram>\n                    <DRectangle key=\"1\" v-if={this.get('show')}>\n                        <Button ev-$beforeUnmount={this._onDestroy}>test</Button>\n                    </DRectangle>\n                </Diagram>\n            ";
+            _mount5 = mount(Demo), instance = _mount5[0], element = _mount5[1];
+            instance.set('show', false);
+            _context6.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(destroy.callCount).to.eql(1);
+
+          case 9:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should replace shape correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo6) {
+              _inheritsLoose(Demo, _BaseDemo6);
+
+              function Demo() {
+                return _BaseDemo6.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  show: true
+                };
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DRectangle, DCircle} = this;\n                <Diagram>\n                    <DRectangle v-if={this.get('show')}>\n                        <DCircle />\n                    </DRectangle>\n                    <DCircle v-else>\n                        <DRectangle />\n                    </DCircle>\n                </Diagram>\n            ";
+            _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+            instance.set('show', false);
+            _context7.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 7:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('should update shape when props changed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo7) {
+              _inheritsLoose(Demo, _BaseDemo7);
+
+              function Demo() {
+                return _BaseDemo7.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  width: 100,
+                  borderStyle: 'solid',
+                  rounded: 0,
+                  invert: false
+                };
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DFlowLayout, DRectangle, DCircle, DLine} = this;\n                var width = this.get('width');\n                var border = this.get('borderStyle');\n                var rounded = this.get('rounded');\n                var invert = this.get('invert');\n                <Diagram>\n                    <DFlowLayout left={width}>\n                        <DRectangle key=\"1\"\n                            width={width}\n                            html={width}\n                            strokeStyle={border}\n                            rounded={rounded}\n                        />\n                        <DCircle key=\"2\" width={width} strokeStyle={border}  />\n                        <DLine from={invert ? \"2\" : \"1\"} to={invert ? \"1\" : \"2\"} strokeStyle={border} />\n                    </DFlowLayout>\n                </Diagram>\n            ";
+            _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set({
+              width: 200,
+              borderStyle: 'dashed',
+              rounded: 5,
+              invert: true
+            });
+            _context8.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 8:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  it('should render nested layout correctly', function () {
+    var Demo = /*#__PURE__*/function (_BaseDemo8) {
+      _inheritsLoose(Demo, _BaseDemo8);
+
+      function Demo() {
+        return _BaseDemo8.apply(this, arguments) || this;
+      }
+
+      return Demo;
+    }(BaseDemo);
+
+    Demo.template = "\n                const {\n                    Diagram, DRectangle, DPartitionLayout,\n                    DStackLayout, DCircle, DDiamond, DEllipse\n                } = this;\n                <Diagram>\n                    <DRectangle width=\"300\" height=\"200\">\n                        <DPartitionLayout type=\"vertical\">\n                            <DRectangle>\n                                <DStackLayout fill>\n                                    <DCircle />\n                                    <DDiamond />\n                                </DStackLayout>\n                            </DRectangle>\n                            <DEllipse />\n                        </DPartitionLayout>\n                    </DRectangle>\n                </Diagram>\n            ";
+
+    var _mount8 = mount(Demo),
+        instance = _mount8[0],
+        element = _mount8[1];
+
+    expect(element.innerHTML).to.matchSnapshot();
+  });
+  it('should change state of shape correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var onChange, onLabelChange, Demo, _mount9, instance, element, _element$querySelecto, rect, square, ellipse, editor;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            onChange = sinon.spy(function (cells) {
+              return console.log(cells);
+            });
+            onLabelChange = sinon.spy(function (cell, newValue, oldValue) {
+              return console.log(cell, newValue, oldValue);
+            });
+
+            Demo = /*#__PURE__*/function (_BaseDemo9) {
+              _inheritsLoose(Demo, _BaseDemo9);
+
+              function Demo() {
+                return _BaseDemo9.apply(this, arguments) || this;
+              }
+
+              var _proto3 = Demo.prototype;
+
+              _proto3._onChange = function _onChange(cells) {
+                onChange(cells);
+              };
+
+              _proto3._onLabelChange = function _onLabelChange(cell, newValue, oldValue) {
+                onLabelChange(cell, newValue, oldValue);
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DFlowLayout, DRectangle, DCircle, DSquare, DLine} = this;\n                <Diagram\n                    ev-selectionChanged={this._onChange}\n                    ev-labelChanged={this._onLabelChange}\n                >\n                    <DFlowLayout>\n                        <DRectangle key=\"1\" data={1} selectable movable connectable />\n                        <DCircle key=\"2\" data=\"2\" editable />\n                        <DSquare selectable resizable rotatable connectable />\n                        <DLine from=\"1\" to=\"2\" />\n                    </DFlowLayout>\n                </Diagram>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1]; // selectable
+
+            _element$querySelecto = element.querySelectorAll('rect'), rect = _element$querySelecto[0], square = _element$querySelecto[1];
+            dispatchEvent(rect, downName);
+            _context9.next = 9;
+            return wait();
+
+          case 9:
+            expect(element.innerHTML).to.matchSnapshot();
+            dispatchEvent(rect, upName);
+            _context9.next = 13;
+            return wait();
+
+          case 13:
+            ellipse = element.querySelector('ellipse');
+            dispatchEvent(ellipse, downName);
+            _context9.next = 17;
+            return wait();
+
+          case 17:
+            expect(element.innerHTML).to.matchSnapshot();
+            dispatchEvent(ellipse, upName);
+            _context9.next = 21;
+            return wait();
+
+          case 21:
+            expect(onChange.callCount).to.eql(2);
+            expect(onChange.calledWith([])).to.be.true; // movable
+
+            dispatchEvent(rect, downName, {
+              clientX: 0,
+              clientY: 0
+            });
+            dispatchEvent(rect, moveName, {
+              clientX: 10,
+              clientY: 10
+            });
+            dispatchEvent(rect, upName, {
+              clientX: 10,
+              clientY: 10
+            });
+            _context9.next = 28;
+            return wait();
+
+          case 28:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(element.querySelector('rect').y.baseVal.value).to.eql(10);
+            dispatchEvent(ellipse, downName, {
+              clientX: 0,
+              clientY: 0
+            });
+            dispatchEvent(ellipse, moveName, {
+              clientX: 10,
+              clientY: 10
+            });
+            dispatchEvent(ellipse, upName, {
+              clientX: 10,
+              clientY: 10
+            });
+            _context9.next = 35;
+            return wait();
+
+          case 35:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(element.contains(square)).to.be.true;
+            expect(square.y.baseVal.value).to.eql(0); // resizable & rotatable
+
+            dispatchEvent(square, downName);
+            dispatchEvent(square, upName);
+            _context9.next = 42;
+            return wait();
+
+          case 42:
+            expect(element.innerHTML).to.matchSnapshot(); // editable
+
+            dispatchEvent(ellipse, 'dblclick');
+            _context9.next = 46;
+            return wait();
+
+          case 46:
+            editor = element.querySelector('.mxCellEditor');
+            editor.innerHTML = 'test';
+            dispatchEvent(element.querySelector('.k-diagram-canvas'), downName);
+            expect(onLabelChange.callCount).to.eql(1);
+            dispatchEvent(rect, 'dblclick');
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(element.querySelector('.mxCellEditor')).to.be.null;
+
+          case 53:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('test all layouts', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _mount10, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            _mount10 = mount(LayoutDemo), instance = _mount10[0], element = _mount10[1];
+            instance.set('layout', 'circle');
+            _context10.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('layout', 'radial');
+            _context10.next = 8;
+            return wait();
+
+          case 8:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('layout', 'organic'); // the result is random
+
+          case 10:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee9);
+  })));
+  it('should generate connect points of shapes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount11, instance, element, _element$querySelecto2, parallelogram, hexagon, callout;
+
+    return _regeneratorRuntime.wrap(function _callee10$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo10) {
+              _inheritsLoose(Demo, _BaseDemo10);
+
+              function Demo() {
+                return _BaseDemo10.apply(this, arguments) || this;
+              }
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DFlowLayout, DParallelogram, DHexagon, DCallout} = this;\n                <Diagram>\n                    <DFlowLayout>\n                        <DParallelogram connectable />\n                        <DHexagon connectable />\n                        <DCallout connectable />\n                    </DFlowLayout>\n                </Diagram>\n            ";
+            _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
+            _element$querySelecto2 = element.querySelectorAll('path'), parallelogram = _element$querySelecto2[0], hexagon = _element$querySelecto2[1], callout = _element$querySelecto2[2];
+            dispatchEvent(parallelogram, moveName);
+            _context11.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+            dispatchEvent(hexagon, moveName);
+            _context11.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+            dispatchEvent(callout, moveName);
+            _context11.next = 15;
+            return wait();
+
+          case 15:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 16:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  it('should fix points of line', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var Demo, _mount12, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee11$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_BaseDemo11) {
+              _inheritsLoose(Demo, _BaseDemo11);
+
+              function Demo() {
+                return _BaseDemo11.apply(this, arguments) || this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  type: 'curved'
+                };
+              };
+
+              return Demo;
+            }(BaseDemo);
+
+            Demo.template = "\n                const {Diagram, DFlowLayout, DRectangle, DLine} = this;\n                <Diagram>\n                    <DFlowLayout top=\"20\">\n                        <DRectangle key=\"1\" />\n                        <DRectangle key=\"2\" />\n                        <DLine from=\"1\" to=\"2\" exit={[0.5, 0]} entry={[0.5, 1]}\n                            type={this.get('type')}\n                            label={this.get('type')}\n                        />\n                    </DFlowLayout>\n                </Diagram>\n            ";
+            _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('type', 'sharp');
+            _context12.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 8:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee11);
+  })));
+});