响应式渲染引擎
抛弃px,采用em
抛弃px描述,用em代替来拥有响应式渲染的能力,em在支持ie8.
- 给引擎一个大小
[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;
}
}
}