joint legao

This commit is contained in:
kangwei 2020-05-05 15:37:49 +08:00
parent 83d8ae4b81
commit 8119c4c1bc
7 changed files with 40 additions and 46 deletions

View File

@ -39,27 +39,25 @@ export class BorderHoveringInstance extends PureComponent<{
} }
@observer @observer
export class BorderHovering extends Component { export class BorderHovering extends Component<{ host: BuiltinSimulatorHost }> {
static contextType = SimulatorContext;
shouldComponentUpdate() { shouldComponentUpdate() {
return false; return false;
} }
@computed get scale() { @computed get scale() {
return (this.context as BuiltinSimulatorHost).viewport.scale; return this.props.host.viewport.scale;
} }
@computed get scrollX() { @computed get scrollX() {
return (this.context as BuiltinSimulatorHost).viewport.scrollX; return this.props.host.viewport.scrollX;
} }
@computed get scrollY() { @computed get scrollY() {
return (this.context as BuiltinSimulatorHost).viewport.scrollY; return this.props.host.viewport.scrollY;
} }
@computed get current() { @computed get current() {
const host = this.context as BuiltinSimulatorHost; const host = this.props.host;
const doc = host.document; const doc = host.document;
const selection = doc.selection; const selection = doc.selection;
const current = host.designer.hovering.current; const current = host.designer.hovering.current;
@ -70,7 +68,7 @@ export class BorderHovering extends Component {
} }
render() { render() {
const host = this.context as BuiltinSimulatorHost; const host = this.props.host;
const current = this.current; const current = this.current;
if (!current || host.viewport.scrolling) { if (!current || host.viewport.scrolling) {
return <Fragment />; return <Fragment />;

View File

@ -132,11 +132,9 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
} }
@observer @observer
export class BorderSelectingForNode extends Component<{ node: Node }> { export class BorderSelectingForNode extends Component<{ host: BuiltinSimulatorHost; node: Node }> {
static contextType = SimulatorContext;
get host(): BuiltinSimulatorHost { get host(): BuiltinSimulatorHost {
return this.context; return this.props.host;
} }
get dragging(): boolean { get dragging(): boolean {
@ -177,11 +175,9 @@ export class BorderSelectingForNode extends Component<{ node: Node }> {
} }
@observer @observer
export class BorderSelecting extends Component { export class BorderSelecting extends Component<{ host: BuiltinSimulatorHost }> {
static contextType = SimulatorContext;
get host(): BuiltinSimulatorHost { get host(): BuiltinSimulatorHost {
return this.context; return this.props.host;
} }
get dragging(): boolean { get dragging(): boolean {
@ -211,7 +207,7 @@ export class BorderSelecting extends Component {
return ( return (
<Fragment> <Fragment>
{selecting.map((node) => ( {selecting.map((node) => (
<BorderSelectingForNode key={node.id} node={node} /> <BorderSelectingForNode key={node.id} host={this.props.host} node={node} />
))} ))}
</Fragment> </Fragment>
); );

View File

@ -1,7 +1,6 @@
import { Component } from 'react'; import { Component } from 'react';
import { observer } from '@ali/lowcode-editor-core'; import { observer } from '@ali/lowcode-editor-core';
import { BorderHovering } from './border-hovering'; import { BorderHovering } from './border-hovering';
import { SimulatorContext } from '../context';
import { BuiltinSimulatorHost } from '../host'; import { BuiltinSimulatorHost } from '../host';
import { BorderSelecting } from './border-selecting'; import { BorderSelecting } from './border-selecting';
import { InsertionView } from './insertion'; import { InsertionView } from './insertion';
@ -9,21 +8,19 @@ import './bem-tools.less';
import './borders.less'; import './borders.less';
@observer @observer
export class BemTools extends Component { export class BemTools extends Component<{ host: BuiltinSimulatorHost }> {
static contextType = SimulatorContext;
shouldComponentUpdate() { shouldComponentUpdate() {
return false; return false;
} }
render() { render() {
const host = this.context as BuiltinSimulatorHost; const host = this.props.host;
const { scrollX, scrollY, scale } = host.viewport; const { scrollX, scrollY, scale } = host.viewport;
return ( return (
<div className="lc-bem-tools" style={{ transform: `translate(${-scrollX * scale}px,${-scrollY * scale}px)` }}> <div className="lc-bem-tools" style={{ transform: `translate(${-scrollX * scale}px,${-scrollY * scale}px)` }}>
<BorderHovering key="hovering" /> <BorderHovering key="hovering" host={host} />
<BorderSelecting key="selecting" /> <BorderSelecting key="selecting" host={host} />
<InsertionView key="insertion" /> <InsertionView key="insertion" host={host} />
</div> </div>
); );
} }

View File

@ -112,24 +112,19 @@ function processDetail({ target, detail, document }: DropLocation): InsertionDat
} }
@observer @observer
export class InsertionView extends Component { export class InsertionView extends Component<{ host: BuiltinSimulatorHost }> {
static contextType = SimulatorContext;
@computed get host(): BuiltinSimulatorHost {
return this.context;
}
shouldComponentUpdate() { shouldComponentUpdate() {
return false; return false;
} }
render() { render() {
const loc = this.host.document.dropLocation; const { host } = this.props;
const loc = host.document.dropLocation;
if (!loc) { if (!loc) {
return null; return null;
} }
const { scale, scrollX, scrollY } = this.host.viewport; const { scale, scrollX, scrollY } = host.viewport;
const { edge, insertType, coverRect, nearRect, vertical } = processDetail(loc); const { edge, insertType, coverRect, nearRect, vertical } = processDetail(loc);
if (!edge) { if (!edge) {

View File

@ -41,20 +41,17 @@ export class BuiltinSimulatorHostView extends Component<SimulatorHostProps> {
const { Provider } = SimulatorContext; const { Provider } = SimulatorContext;
return ( return (
<div className="lc-simulator"> <div className="lc-simulator">
<Provider value={this.host}> {/*progressing.visible ? <PreLoaderView /> : null*/}
{/*progressing.visible ? <PreLoaderView /> : null*/} <Canvas host={this.host} />
<Canvas />
</Provider>
</div> </div>
); );
} }
} }
@observer @observer
class Canvas extends Component { class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
static contextType = SimulatorContext;
render() { render() {
const sim = this.context as BuiltinSimulatorHost; const sim = this.props.host;
let className = 'lc-simulator-canvas'; let className = 'lc-simulator-canvas';
if (sim.deviceClassName) { if (sim.deviceClassName) {
className += ` ${sim.deviceClassName}`; className += ` ${sim.deviceClassName}`;
@ -65,8 +62,8 @@ class Canvas extends Component {
return ( return (
<div className={className}> <div className={className}>
<div ref={elmt => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport"> <div ref={elmt => sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport">
<BemTools /> <BemTools host={sim} />
<Content /> <Content host={sim} />
</div> </div>
</div> </div>
); );
@ -74,10 +71,9 @@ class Canvas extends Component {
} }
@observer @observer
class Content extends Component { class Content extends Component<{ host: BuiltinSimulatorHost }> {
static contextType = SimulatorContext;
render() { render() {
const sim = this.context as BuiltinSimulatorHost; const sim = this.props.host;
const viewport = sim.viewport; const viewport = sim.viewport;
let frameStyle = {}; let frameStyle = {};
if (viewport.scale < 1) { if (viewport.scale < 1) {

View File

@ -309,4 +309,11 @@ export class Props implements IPropParent {
getPropValue(path: string): any { getPropValue(path: string): any {
return this.getProp(path, false)?.value; return this.getProp(path, false)?.value;
} }
/**
*
*/
setPropValue(path: string, value: any) {
this.getProp(path, true)!.setValue(value);
}
} }

View File

@ -12,6 +12,11 @@ export interface OldPageData {
const pages = Object.assign(project, { const pages = Object.assign(project, {
setPages(pages: OldPageData[]) { setPages(pages: OldPageData[]) {
// FIXME: upgrade schema
pages[0].componentsTree.forEach((item: any) => {
item.lifeCycles = {};
item.methods = {};
});
project.load({ project.load({
version: '1.0.0', version: '1.0.0',
componentsMap: [], componentsMap: [],