github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-20 07:14:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 换种方式实现 loading 效果, 比之前出现的更早

Browse Source
This commit is contained in:
lihao.ylh 2021-06-30 14:19:53 +08:00
parent f018e09868
commit 511b00f8f0
5 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/designer/src/builtin-simulator/create-simulator.ts
View File

@ -90,19 +90,8 @@ export function createSimulator(
<html class="engine-design-mode"> <html class="engine-design-mode">
<head><meta charset="utf-8"/> <head><meta charset="utf-8"/>
${styleFrags} ${styleFrags}
<style>
#engine-skeleton-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
</style>
</head> </head>
<body> <body>
<div id="app">
<div id="engine-skeleton-wrapper"><img width="154" height="100" src="https://img.alicdn.com/tfs/TB1CmVgayERMeJjy0FcXXc7opXa-308-200.gif" /></div>
</div>
${scriptFrags} ${scriptFrags}
</body> </body>
</html>`); </html>`);

19
packages/designer/src/project/project-view.tsx
View File

@ -4,8 +4,26 @@ import { Designer } from '../designer';
import { BuiltinSimulatorHostView } from '../builtin-simulator'; import { BuiltinSimulatorHostView } from '../builtin-simulator';
import './project.less'; import './project.less';
class Loading extends Component {
render() {
return (
<div id="engine-loading-wrapper">
<img width="154" height="100" src="https://img.alicdn.com/tfs/TB1CmVgayERMeJjy0FcXXc7opXa-308-200.gif" />
</div>
);
}
}
@observer @observer
export class ProjectView extends Component<{ designer: Designer }> { export class ProjectView extends Component<{ designer: Designer }> {
componentDidMount() {
const { designer } = this.props;
const { project } = designer;
project.onRendererReady(() => {
this.forceUpdate();
});
}
render() { render() {
const { designer } = this.props; const { designer } = this.props;
const { project } = designer; const { project } = designer;
@ -15,6 +33,7 @@ export class ProjectView extends Component<{ designer: Designer }> {
return ( return (
<div className="lc-project"> <div className="lc-project">
<div className="lc-simulator-shell"> <div className="lc-simulator-shell">
{!project?.simulator?.renderer && <Loading />}
<Simulator {...simulatorProps} /> <Simulator {...simulatorProps} />
</div> </div>
</div> </div>

7
packages/designer/src/project/project.less
View File

@ -18,3 +18,10 @@
height: 100%; height: 100%;
} }
} }
#engine-loading-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}

2
packages/designer/src/simulator.ts
View File

@ -1,6 +1,7 @@
import { Component as ReactComponent, ComponentType } from 'react'; import { Component as ReactComponent, ComponentType } from 'react';
import { ComponentMetadata, NodeSchema } from '@ali/lowcode-types'; import { ComponentMetadata, NodeSchema } from '@ali/lowcode-types';
import { ISensor, Point, ScrollTarget, IScrollable, LocateEvent, LocationData } from './designer'; import { ISensor, Point, ScrollTarget, IScrollable, LocateEvent, LocationData } from './designer';
import { BuiltinSimulatorRenderer } from './builtin-simulator/renderer';
import { Node, ParentalNode } from './document'; import { Node, ParentalNode } from './document';
export type AutoFit = '100%'; export type AutoFit = '100%';
@ -76,6 +77,7 @@ export interface ISimulatorHost<P = object> extends ISensor {
readonly viewport: IViewport; readonly viewport: IViewport;
readonly contentWindow?: Window; readonly contentWindow?: Window;
readonly contentDocument?: Document; readonly contentDocument?: Document;
readonly renderer?: BuiltinSimulatorRenderer;
// dependsAsset // like react jQuery lodash // dependsAsset // like react jQuery lodash
// themesAsset // themesAsset

4
packages/editor-core/src/config.ts
View File

@ -46,11 +46,11 @@ export interface EngineOptions {
/** /**
* 禁止默认的设置面板，默认值：false * 禁止默认的设置面板，默认值：false
*/ */
disableDefaultSettingPanel: boolean, disableDefaultSettingPanel: boolean;
/** /**
* 禁止默认的设置器，默认值：false * 禁止默认的设置器，默认值：false
*/ */
disableDefaultSetters: boolean, disableDefaultSetters: boolean;
/** /**
* Vision-polyfill settings * Vision-polyfill settings
*/ */