@king-design/react 2.1.4 → 2.1.6

package/components/diagram/index.spec.js

@@ -12,14 +12,19 @@ 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;
@@ -39,464 +44,585 @@ 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
+      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();
               };
-            };
-            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();
+
+              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);
   })));