From 6a308ba81d2ba11b05309cc65b7e7efeca1bda96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= Date: Mon, 31 May 2021 21:01:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=97=B6=E8=A2=AB=E6=94=BE=E5=85=A5=E5=AE=B9?= =?UTF-8?q?=E5=99=A8=E7=9A=84=E8=A7=86=E8=A7=89=E5=8F=8D=E9=A6=88,=20?= =?UTF-8?q?=E9=80=9A=E8=BF=87=20enableReactiveContainer=20=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bem-tools/border-container.tsx | 119 ++++++++++++++++++ .../src/builtin-simulator/bem-tools/index.tsx | 4 +- packages/designer/src/designer/designer.ts | 2 + packages/engine/src/engine-core.ts | 4 + 4 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 packages/designer/src/builtin-simulator/bem-tools/border-container.tsx diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-container.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-container.tsx new file mode 100644 index 000000000..461487e07 --- /dev/null +++ b/packages/designer/src/builtin-simulator/bem-tools/border-container.tsx @@ -0,0 +1,119 @@ +import * as React from 'react'; +import { Component, Fragment, ReactElement, PureComponent } from 'react'; +import classNames from 'classnames'; +import { computed, observer, Title, globalLocale } from '@ali/lowcode-editor-core'; +import { I18nData, isI18nData, TitleContent } from '@ali/lowcode-types'; +import { DropLocation } from '../../designer'; +import { BuiltinSimulatorHost } from '../../builtin-simulator/host'; +import { ParentalNode } from '../../document/node'; + +export class BorderContainerInstance extends PureComponent<{ + title: TitleContent; + rect: DOMRect | null; + scale: number; + scrollX: number; + scrollY: number; +}> { + render() { + const { title, rect, scale, scrollX, scrollY } = this.props; + if (!rect) { + return null; + } + + const style = { + width: rect.width * scale, + height: rect.height * scale, + transform: `translate(${(scrollX + rect.left) * scale}px, ${(scrollY + rect.top) * scale}px)`, + }; + + const className = classNames('lc-borders lc-borders-detecting'); + + return ( +
+ + </div> + ); + } +} + +function getTitle(title: string | I18nData | ReactElement) { + if (typeof title === 'string') return title; + if (isI18nData(title)) { + const locale = globalLocale.getLocale() || 'zh-CN'; + return `将放入到此${title[locale]}`; + } + return ''; +} + +@observer +export class BorderContainer extends Component<{ + host: BuiltinSimulatorHost, +}, { + target?: ParentalNode, +}> { + + state = {} as any; + + @computed get scale() { + return this.props.host.viewport.scale; + } + + @computed get scrollX() { + return this.props.host.viewport.scrollX; + } + + @computed get scrollY() { + return this.props.host.viewport.scrollY; + } + + componentDidMount() { + const { host } = this.props; + + host.designer.editor.on('designer.dropLocation.change', (loc: DropLocation) => { + let { target } = this.state; + if (target === loc?.target) return; + this.setState({ + target: loc?.target, + }); + }); + } + + render() { + const { host } = this.props; + const { target } = this.state; + if (target == undefined) { + return null; + } + const instances = host.getComponentInstances(target!); + if (!instances || instances.length < 1) { + return null; + } + + if (instances.length === 1) { + return ( + <BorderContainerInstance + key="line-h" + title={getTitle(target.componentMeta.title)} + scale={this.scale} + scrollX={this.scrollX} + scrollY={this.scrollY} + rect={host.computeComponentInstanceRect(instances[0], target.componentMeta.rootSelector)} + /> + ); + } + return ( + <Fragment> + {instances.map((inst, i) => ( + <BorderContainerInstance + key={`line-h-${i}`} + title={getTitle(target.componentMeta.title)} + scale={this.scale} + scrollX={this.scrollX} + scrollY={this.scrollY} + rect={host.computeComponentInstanceRect(inst, target.componentMeta.rootSelector)} + /> + ))} + </Fragment> + ); + } +} diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx index f50f6a26b..97ce673dc 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/index.tsx @@ -1,6 +1,7 @@ import React, { Component } from 'react'; -import { observer } from '@ali/lowcode-editor-core'; +import { observer, engineConfig } from '@ali/lowcode-editor-core'; import { BorderDetecting } from './border-detecting'; +import { BorderContainer } from './border-container'; import { BuiltinSimulatorHost } from '../host'; import { BorderSelecting } from './border-selecting'; import BorderResizing from './border-resizing'; @@ -25,6 +26,7 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> { <div className="lc-bem-tools" style={{ transform: `translate(${-scrollX * scale}px,${-scrollY * scale}px)` }}> <BorderDetecting key="hovering" host={host} /> <BorderSelecting key="selecting" host={host} /> + { engineConfig.get('enableReactiveContainer') && <BorderContainer key="reactive-container-border" host={host} /> } <InsertionView key="insertion" host={host} /> <BorderResizing key="resizing" host={host} /> { diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 5a418266d..5dac0d1ec 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -246,6 +246,7 @@ export class Designer { this._dropLocation.document.internalSetDropLocation(null); } this._dropLocation = loc; + this.postEvent('dropLocation.change', loc); loc.document.internalSetDropLocation(loc); this.activeTracker.track({ node: loc.target, detail: loc.detail }); return loc; @@ -258,6 +259,7 @@ export class Designer { if (this._dropLocation) { this._dropLocation.document.internalSetDropLocation(null); } + this.postEvent('dropLocation.change', undefined); this._dropLocation = undefined; } diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index b979a8af6..9e3ed31b7 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -187,6 +187,10 @@ interface EngineOptions { deviceMapper?: { transform: (originalDevice: string) => string; }; + /** + * 开启拖拽组件时，即将被放入的容器是否有视觉反馈 + */ + enableReactiveContainer?: boolean; [key: string]: any; }