feat: get all datas when dragging (#44)

* feat: get all datas when dragging

* chore: update missing deps

* fix: unexpected call of setState

* chore: simplify demo

* fix: TagGroup unexpected call of setState

* break: onChange required

package.json

@@ -33,7 +33,8 @@
     "dekko": "^0.2.1",
     "gh-pages": "^2.0.1",
     "lint-staged": "^8.1.5",
-    "nino-cli": "^0.7.2"
+    "nino-cli": "^0.7.2",
+    "typescript": "^3.4.3"
   },
   "pre-commit": [
     "lint-staged"

src/canvas/__tests__/Canvas.test.tsx

@@ -13,8 +13,9 @@ import Listener from '../../utils/GlobalListener';
 import { mapping } from '../../mock/mapping';
 import 'nino-cli/scripts/setup';
 
-const createWrapper = (...props: Array<any>) =>
-  mount(<Canvas style={{ width: '100%', height: '100%' }} {...props} />);
+const createWrapper = (...props: Array<any>) => {
+  return mount(<Canvas style={{ width: '100%', height: '100%' }} {...props} />);
+};
 
 describe('Canvas', () => {
   beforeEach(() => {
@@ -41,6 +42,7 @@ describe('Canvas', () => {
     const wrapper = createWrapper();
     wrapper.setProps({ data: mapping });
 
+    expect(Object.keys(wrapper.state('linesProps')).length).toBe(2);
     const blocks = wrapper.find('.block-group');
     blocks.at(0).simulate('click');
     blocks.at(1).simulate('click');
@@ -50,7 +52,7 @@ describe('Canvas', () => {
 
     blocks.at(0).simulate('click');
     blocks.at(2).simulate('click');
-    expect(wrapper.find('.stepped-line-to').length).toBe(3);
+    expect(Object.keys(wrapper.state('linesProps')).length).toBe(3);
   });
 
   it('should not render redundant Line', () => {

src/canvas/core.tsx

@@ -17,6 +17,7 @@ export interface CanvasProps {
   blockClassName?: string;
   tagClassName?: string;
   lineClassName?: string;
+  onChange: (item: any) => void;
 }
 export interface CanvasState {
   blockProps?: any;
@@ -25,7 +26,16 @@ export interface CanvasState {
   position: { x: number; y: number };
 }
 
+let dataCollector: any = {};
+
 export default class Canvas extends Component<CanvasProps, CanvasState> {
+  state: CanvasState = {
+    blockProps: {},
+    linesProps: {},
+    tagProps: {},
+    position: { x: 0, y: 0 },
+  };
+
   static defaultProps = {
     style: {},
     className: '',
@@ -44,6 +54,7 @@ export default class Canvas extends Component<CanvasProps, CanvasState> {
       let position = nextState.position;
       if (position.x == 0 && position.y == 0 && CanvasPosition) {
         position = CanvasPosition;
+        dataCollector['CanvasPosition'] = CanvasPosition;
       }
 
       return {
@@ -56,27 +67,29 @@ export default class Canvas extends Component<CanvasProps, CanvasState> {
     return null;
   }
 
-  constructor(props: CanvasProps) {
-    super(props);
-
-    this.state = {
-      blockProps: {},
-      linesProps: {},
-      tagProps: {},
-      position: { x: 0, y: 0 },
-    };
-  }
-
   // to repaint Line instantly
   handleBlockChange = (blockProps: any, linesProps: any) => {
-    this.setState({ blockProps });
+    const { onChange } = this.props;
+    this.handleUnityAllDatas(blockProps, 'BlockGroup');
+    this.handleUnityAllDatas(linesProps, 'LineGroup');
+    if (!onChange) {
+      this.setState({ blockProps });
+    }
     if (linesProps) {
       this.setState({ linesProps });
     }
   };
 
   handleTagChange = (tagProps: any) => {
-    this.setState({ tagProps });
+    this.handleUnityAllDatas(tagProps, 'TagGroup');
+  };
+
+  handleUnityAllDatas = (data: any, type: string) => {
+    const { onChange } = this.props;
+    dataCollector[type] = data;
+    if (onChange) {
+      onChange(dataCollector);
+    }
   };
 
   onDrop = (e: any) => {
@@ -118,6 +131,7 @@ export default class Canvas extends Component<CanvasProps, CanvasState> {
   };
 
   handleDrag = (_: any, { x, y }: { x: number; y: number }) => {
+    this.handleUnityAllDatas({ x, y }, 'CanvasPosition');
     this.setState({ position: { x, y } });
   };
 

src/demo/__tests__/__snapshots__/demo.test.tsx.snap

@@ -261,6 +261,7 @@ exports[`demo render correctly 1`] = `
           },
         }
       }
+      onChange={[Function]}
       orientation="h"
       style={Object {}}
     >
@@ -426,6 +427,7 @@ exports[`demo render correctly 1`] = `
                 },
               }
             }
+            onChange={[Function]}
             onDragOver={[Function]}
             onDrop={[Function]}
             onMouseDown={[Function]}
@@ -1780,18 +1782,6 @@ exports[`demo render correctly 1`] = `
         </DraggableCore>
       </Draggable>
     </Canvas>
-    <button
-      onClick={[Function]}
-      style={
-        Object {
-          "left": 10,
-          "position": "absolute",
-          "top": 10,
-        }
-      }
-    >
-      save
-    </button>
   </div>
 </Demo>
 `;

src/demo/__tests__/demo.test.tsx

@@ -1,87 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Demo from '..';
-import Listener from '../../utils/GlobalListener';
 import 'nino-cli/scripts/setup';
 
-// eslint-disable-next-line
-const log = console.log;
 describe('demo', () => {
-  beforeEach(() => {
-    (window as any).DataCollector = new Listener();
-    // eslint-disable-next-line
-    console.log = function() {};
-  });
-
-  afterEach(() => {
-    (window as any).DataCollector = null;
-    // eslint-disable-next-line
-    console.log = log;
-  });
-
   it('render correctly', () => {
     const wrapper = mount(<Demo />);
     expect(wrapper).toMatchSnapshot();
   });
-
-  it('when button is clicked, it should return layout info', () => {
-    const wrapper = mount(<Demo />);
-    const instance: any = wrapper.instance();
-    const data = instance.outputData();
-    const mapping = {
-      BlockGroup: {
-        'block-623187': { x: 132, y: 118 },
-        'block-624018': { x: 426, y: -50 },
-        'block-73377': { x: 428, y: 306 },
-      },
-      CanvasPosition: { x: -67, y: 230 },
-      LineGroup: {
-        'line-592694': {
-          from: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 },
-          fromKey: 'block-623187',
-          to: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 },
-          toKey: 'block-624018',
-        },
-        'line-77619': {
-          from: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 },
-          fromKey: 'block-73377',
-          to: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 },
-          toKey: 'block-623187',
-        },
-      },
-      TagGroup: {
-        'tag-626505': {
-          editable: false,
-          input: 'test',
-          style: { height: 32, width: 100 },
-          x: 169,
-          y: 144,
-        },
-        'tag-629962': {
-          editable: false,
-          input: 'test2',
-          style: { height: 32, width: 100 },
-          x: 462,
-          y: -23,
-        },
-        'tag-80986': {
-          editable: false,
-          input: 'test3',
-          style: { height: 32, width: 100 },
-          x: 463,
-          y: 333,
-        },
-      },
-    };
-    expect(mapping).toEqual(data);
-  });
-
-  it('when state changed, Line should render correctly', () => {
-    const wrapper = mount(<Demo />);
-    const instance: any = wrapper.instance();
-    const data = instance.outputData();
-    wrapper.setState({ data });
-    wrapper.update();
-    expect(wrapper.find('.stepped-line-to').length).toBe(2);
-  });
 });

src/demo/index.tsx

@@ -39,13 +39,8 @@ export default class Demo extends Component<any, DemoState> {
     this.setState({ data: mapping });
   };
 
-  outputData = () => {
-    const data = (window as any).DataCollector.getAll();
+  handleChange = (data: any) => {
     this.setState({ data });
-    const treeData = JSON.stringify(data);
-    // eslint-disable-next-line
-    console.log(treeData);
-    return data;
   };
 
   render = () => {
@@ -54,13 +49,11 @@ export default class Demo extends Component<any, DemoState> {
     return (
       <div className="Demo">
         <Toolbar />
-        <Canvas className="canvas-wrapper" data={data} />
-        <button
-          onClick={this.outputData}
-          style={{ position: 'absolute', top: 10, left: 10 }}
-        >
-          save
-        </button>
+        <Canvas
+          className="canvas-wrapper"
+          data={data}
+          onChange={this.handleChange}
+        />
       </div>
     );
   };

src/tools/TagGroup.tsx

@@ -15,21 +15,23 @@ export interface TagGroupState {
 }
 
 export default class TagGroup extends Component<TagGroupProps, TagGroupState> {
-  static getDerivedStateFromProps(nextProps: TagGroupProps) {
+  state: TagGroupState = {
+    data: {},
+  };
+
+  static getDerivedStateFromProps(
+    nextProps: TagGroupProps,
+    nextState: TagGroupState,
+  ) {
+    if (Object.keys(nextState.data).length === 0 && nextProps.onChange) {
+      nextProps.onChange(nextProps.data);
+    }
     if (!nextProps.data) {
       return { data: {} };
     }
     return { data: nextProps.data };
   }
 
-  constructor(props: TagGroupProps) {
-    super(props);
-
-    this.state = {
-      data: {},
-    };
-  }
-
   handleStop = ({ x, y }: { x: number; y: number }, key: string) => {
     const { data, onChange } = this.props;
 
@@ -57,7 +59,7 @@ export default class TagGroup extends Component<TagGroupProps, TagGroupState> {
 
   handleDrag = () => {
     const { onChange } = this.props;
-    onChange && onChange(this.props.data);
+    onChange && onChange(this.state.data);
   };
 
   render = () => {