@king-design/intact 3.1.4-beta.2 → 3.1.4

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

@@ -12,19 +12,14 @@ 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;
@@ -44,585 +39,464 @@ var BaseDemo = /*#__PURE__*/function (_Component) {
     _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'
-                };
+      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();
-        }
+            };
+            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'
-                };
+      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();
-        }
+            };
+            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'
-                };
+      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();
-        }
+            };
+            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
-                };
+      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();
-        }
+            };
+            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();
+      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
               };
-
-              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();
-        }
+            };
+            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
-                };
+      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();
-        }
+            };
+            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
-                };
+      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();
-        }
+            };
+            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];
-
+      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();
-        }
+      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();
-        }
+      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();
-        }
+      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'
-                };
+      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();
-        }
+            };
+            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);
   })));