响应式渲染引擎

抛弃px,采用em

抛弃px描述,用em代替来拥有响应式渲染的能力，em在支持ie8.

1. 给引擎一个大小[1920,800]来描述画布,标识画布是1920*800的颗粒度组成,具体呈现大小取决于容器宽度[在容器宽度为1920px的情况下,1颗粒度为1px]。

interaction = null; interactionController() { const flag = { canMove: false }; //点击组件的位置 const offsetPx = { x: 0, y: 0 }; let moveLocationPx = { left: 0, top: 0, }; let selectedComponentId = ''; let hasMove = false; //上次鼠标释放事件 let prevSingleClickTimeStamp = 0; //移动失败的次数 let numberOfMoveFail = 0; //点击时的事件对象 let clickE; return { tryStartMove: (e) => { const { target } = e; if (target.className === 'component') { clickE = e; const { componentsData, moveComponentLayer } = this.state; const { clientX, clientY, offsetX, offsetY, target: { id } } = e; selectedComponentId = id; const selectedComponentIndex = this.getComponentIndexById(id); if (selectedComponentIndex > - 1) { const { x, y } = getViewOffet(); const { rotate, size } = getKeysWithMap(componentsData.get(selectedComponentIndex), ['rotate', 'size']); flag.canMove = true;

                    offsetPx.x = rotate ? offsetX / Math.cos(rotate) : offsetX;
                    offsetPx.y = rotate ? offsetY / Math.cos(rotate) : offsetY;
                    moveLocationPx.left = clientX - offsetPx.x - x;
                    moveLocationPx.top = clientY - offsetPx.y - y;

                    this.setState({
                        moveComponentLayer: setKeysWithMap(moveComponentLayer, {
                            visible: true,
                            size,
                            rotate
                        }),
                    });
                }
            }
        },
        tryMove: (e) => {
            if (flag.canMove) {
                const { clientX, clientY } = e;
                const { x, y } = getViewOffet();
                const next = {
                    left: clientX - offsetPx.x - x,
                    top: clientY - offsetPx.y - y
                };
                //移动的幅度大于2才算移动
                if (!isDiffInTheRange(moveLocationPx.left - next.left, 2) || !isDiffInTheRange(moveLocationPx.top - next.top, 2)) {
                    hasMove = true;
                    moveLocationPx = next;
                    this.setState({
                        moveFlag: Date.now(),
                    });
                }

            }
        },
        tryStopMove: (e) => {
            if (flag.canMove) {
                const now = Date.now();
                const { moveComponentLayer } = this.state;
                const { actions } = this.props;
                if (hasMove) {
                    numberOfMoveFail = 0;
                    actions.move([
                        {
                            id: selectedComponentId,
                            type: 'move',
                            keyPath: ['location'],
                            data: pxConverPointWithObjecy(moveLocationPx)
                        }
                    ]);
                } else {
                    numberOfMoveFail += 1;
                }


                this.setState({
                    moveComponentLayer: moveComponentLayer.set('visible', false)
                })
                hasMove = false;
                flag.canMove = false;
                if (numberOfMoveFail >= 2 && now - prevSingleClickTimeStamp <= 200) {
                    this.interaction.tryDoubleClick(clickE);
                }
                prevSingleClickTimeStamp = now;
                //连续俩次 hasMove 为false 且 间隔小于 100ms 触发双击
            }
        },
        tryDoubleClick: (e) => {
            const { target, target: { id } } = e;
            if (target.className === 'component') {
                const type = this.getComponentDataById(id).get('type');
                if (type === 'view.text') {
                    this.setState({
                        doubleClickLayer: setKeysWithMap(this.state.doubleClickLayer, {
                            visible: true,
                            componentData: this.getComponentDataById(id)
                        }),
                    });
                }
            }
        },
        getMoveLocation() {
            return moveLocationPx;
        }
    }
}