Merge branch feat/mutiDevice into release/1.0.41

Title: 增加deviceStyle 属性 

Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/5122605
This commit is contained in:
lihao.ylh 2021-04-02 12:07:48 +08:00
commit 906a812601
3 changed files with 12 additions and 5 deletions

View File

@ -54,6 +54,7 @@ class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
render() { render() {
const sim = this.props.host; const sim = this.props.host;
let className = 'lc-simulator-canvas'; let className = 'lc-simulator-canvas';
const { canvas = {}, viewport = {} } = sim.deviceStyle || {};
if (sim.deviceClassName) { if (sim.deviceClassName) {
className += ` ${sim.deviceClassName}`; className += ` ${sim.deviceClassName}`;
} else if (sim.device) { } else if (sim.device) {
@ -61,8 +62,8 @@ class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
} }
return ( return (
<div className={className}> <div className={className} style={canvas}>
<div ref={(elmt) => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport"> <div ref={(elmt) => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport" style={viewport}>
<BemTools host={sim} /> <BemTools host={sim} />
<Content host={sim} /> <Content host={sim} />
</div> </div>

View File

@ -48,6 +48,11 @@ export interface LibraryItem {
urls?: Asset; urls?: Asset;
} }
export interface DeviceStyleProps {
canvas?: object;
viewport?: object;
}
export interface BuiltinSimulatorProps { export interface BuiltinSimulatorProps {
// 从 documentModel 上获取 // 从 documentModel 上获取
// suspended?: boolean; // suspended?: boolean;
@ -178,6 +183,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
return this.designer.componentsMap; return this.designer.componentsMap;
} }
@computed get deviceStyle(): DeviceStyleProps | undefined {
return this.get('deviceStyle');
}
@obx.ref _props: BuiltinSimulatorProps = {}; @obx.ref _props: BuiltinSimulatorProps = {};
/** /**

View File

@ -4,9 +4,6 @@ body, html {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
html.engine-design-mode {
padding-bottom: 30px;
}
html.engine-cursor-move, html.engine-cursor-move * { html.engine-cursor-move, html.engine-cursor-move * {
cursor: grabbing !important; cursor: grabbing !important;