可视化编辑器1
前言
前面我们学习低代码，例如百度的低代码平台 amis，也有相应的可视化编辑器，通过拖拽的方式生成配置文件。就像这样
笔者自己也有类似需求：比如中台有个归档需求，通过选择一些配置让后端执行一些操作。目前只有A项目要归档，过些日子B项目也需要归档，后面还有 C项目归档。如果不想每次来都重新编码，最好做一个编辑器，配置好数据，归档功能根据编辑器生成的配置 json 自动生成岂不美哉！
本篇将开始自己实现一个可视化编辑器。
Tip：环境采用 spug 项目，一个开源的 react 后台系统。
编辑器页面框架搭建
需求：新建一个页面，有组件区、编辑区、属性区
效果如下图所示：
核心代码如下：
// spug\src\pages\lowcodeeditor\index.js
import React from 'react';
import { Layout } from 'antd';
import { observer } from 'mobx-react';
import styles from './style.module.less'
const { Header, Footer, Sider, Content } = Layout;
export default observer(function () {
return (
<Layout className={styles.box}>
<Sider width='400' className={styles.componentBox}>组件区</Sider>
<Layout>
<Header className={styles.editorMenuBox}>菜单区</Header>
<Content className={styles.editorBox}>编辑区</Content>
</Layout>
<Sider width='400' className={styles.attributeBox}>属性区</Sider>
</Layout>
)
})
Tip: 直接用 antd 中的 layout 布局。
// spug\src\pages\lowcodeeditor\style.module.less
.box{
min-width: 1500px;
// color: pink;
font-size: 2em;
// 组件盒子
.componentBox{
background-color: blue;
}
// 编辑器菜单
.editorMenuBox{
background-color: pink;
}
// 编辑器盒子
.editorBox{
background-color: red;
}
// 属性盒子
.attributeBox{
background-color: yellow;
}
}
根据配置文件渲染编辑区
需求：根据配置文件渲染编辑区
通常是从组件区拖拽组件到编辑区，编辑区就会显示该组件，这里先不管拖拽，直接通过定义数据，编辑区根据数据渲染。
这里采用绝对定位的玩法，你也可以选择其他的，比如拖拽到编辑器后释放，则渲染该组件，不支持拖动，就像 amis 编辑器。
思路：
- 将编辑区提取出单独模块 Container.js，完成对应css效果
- 新建数据配置文件 data.js，存放页面配置数据
- Container 根据配置数据将组件渲染到编辑区
Tip：最初打算将配置文件改为 .json 文件，后来发现缺少对应 loader 无法导入import data from './data.json'。
效果如下图所示
核心代码如下：
将容器抽取成单独组件：
// spug\src\pages\lowcodeeditor\Container.js
import React from 'react';
import { observer } from 'mobx-react';
import styles from './style.module.less'
import data from './data.js'
import store from './store';
import ComponentBlock from './ComponentBlock';
@observer
class Container extends React.Component {
componentDidMount() {
// 初始化
store.json = data
}
render() {
const {container = {}, components} = store.json || {};
const {width, height} = container
return (
<div className={styles.containerBox}>
<div className={styles.container} style={{width, height}}>
<ComponentBlock/>
</div>
</div>
)
}
}
export default Container
容器对应的样式：
// spug\src\pages\lowcodeeditor\style.module.less
.box{
...
// 容器盒子
.containerBox{
height: 100%;
border: 1px solid red;
padding: 5px;
// 容器的宽度高度有可能很大
overflow: auto;
}
// 容器
.container{
// 容器中的组件需要相对容器定位
position: relative;
margin:0 auto;
background: rgb(202, 199, 199);
border: 2px solid orange;
// 容器中渲染的组件
.componentBlock{
position: absolute;
}
}
}
配置数据格式如下：
// spug\src\pages\lowcodeeditor\data.js
const data = {
container: {
width: "800px",
height: "600px"
},
components: [
{top: 100, left: 300, 'zIndex': 1, type: 'text'},
{top: 200, left: 200, 'zIndex': 1, type: 'input'},
{top: 300, left: 100, 'zIndex': 1, type: 'button'},
]
}
export default data
组件块模块：
// spug\src\pages\lowcodeeditor\ComponentBlocks.js
import React, {Fragment} from 'react';
import { observer } from 'mobx-react';
import styles from './style.module.less'
import store from './store';
@observer
class ComponentBlock extends React.Component {
componentDidMount() {
// 初始化
}
render() {
const { components} = store.json || {};
return (
<Fragment>
{
components?.map(item => <p className={styles.componentBlock} style={{left: item.left, top: item.top}}>我的类型是: {item.type}</p>)
}
</Fragment>
)
}
}
export default ComponentBlock
直接引入容器组件（Container）：
// spug\src\pages\lowcodeeditor\index.js
...
import Container from './Container'
export default observer(function () {
return (
<Layout className={styles.box}>
<Layout>
<Header className={styles.editorMenuBox}>菜单区</Header>
<Content className={styles.editorBox}>
<Container/>
</Content>
</Layout>
</Layout>
)
})
将配置数据放入 store：
// spug\src\pages\lowcodeeditor\store.js
import { observable, computed } from 'mobx';
class Store {
// 配置数据
@observable json = null;
}
export default new Store()
物料区组件渲染
上面我们根据一些假数据，实现能根据位置渲染内容
编辑区现在渲染的三个组件都是文本，我们期望的是正确的text、input和button组件。
需求：物料区渲染组件、编辑区渲染对应的三个组件
效果如下图所示：
核心代码如下：
编辑区提取出单独的模块：
// spug\src\pages\lowcodeeditor\index.js
import Material from './Material'
...
export default observer(function () {
return (
<Layout className={styles.box}>
<Sider width='400' className={styles.componentBox}>
<Material/>
</Sider>
</Layout>
)
})
物料区（即组件区）注册三个组件：
// 物料区（即组件区）
// spug\src\pages\lowcodeeditor\Material.js
import React, { Fragment } from 'react';
import { observer } from 'mobx-react';
import { Input, Button, Tag } from 'antd';
import styles from './style.module.less'
import store from './store';
@observer
class Material extends React.Component {
componentDidMount() {
// 初始化
this.registerMaterial()
}
// 注册物料
registerMaterial = () => {
store.registerMaterial({
// 组件类型
key: 'text',
// 组件文本
label: '文本',
// 组件预览。函数以便传达参数进来
preview: () => '预览文本',
// 组件渲染
render: () => '渲染文本',
})
store.registerMaterial({
key: 'button',
label: '按钮',
preview: () => <Button type="primary">预览按钮</Button>,
render: () => <Button type="primary">渲染按钮</Button>,
})
store.registerMaterial({
key: 'input',
label: '输入框',
preview: () => <Input style={{ width: '50%', }} placeholder='预览输入框' />,
render: () => <Input placeholder='渲染输入框' />,
})
}
render() {
return (
<Fragment>
{
store.componentList.map((item, index) =>
<section className={styles.combomentBlock} key={index}>
{/* 文案 */}
<Tag className={styles.combomentBlockLabel} color="cyan">{item.label}</Tag>
{/* 组件渲染 */}
<div className={styles.combomentBlockBox}>{item.preview()}</div>
</section>)
}
</Fragment>
)
}
}
export default Material
编辑区调整一下，根据 store.componentMap 渲染对应组件：
// spug\src\pages\lowcodeeditor\ComponentBlocks.js
@observer
class ComponentBlock extends React.Component {
render() {
const { components } = store.json || {};
return (
<Fragment>
{
components?.map(item =>
<div style={{ position: 'absolute', left: item.left, top: item.top }}>{store.componentMap[item.type].render()}</div>
)
}
</Fragment>
)
}
}
物料的数据都放入状态管理模块中：
// spug\src\pages\lowcodeeditor\store.js
import { observable, computed } from 'mobx';
class Store {
// 配置数据
@observable json = null;
@observable componentList = []
@observable componentMap = {}
// 注册物料
registerMaterial = (item) => {
this.componentList.push(item)
this.componentMap[item.key] = item
}
}
export default new Store()
对应样式：
// spug\src\pages\lowcodeeditor\style.module.less
.box{
min-width: 1500px;
// 组件盒子
.componentBox{
background-color: #fff;
// 组件块
.combomentBlock{
position: relative;
margin: 10px;
border: 1px solid #95de64;
.combomentBlockLabel{
position: absolute;
left:0;
top:0;
}
.combomentBlockBox{
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
}
// 组件块上添加一个蒙版，防止用户点击组件
.combomentBlock::after{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.05);
// 增加移动效果
cursor: move;
}
}
...
物料组件拖拽到编辑区
需求：将物料区的组件拖拽到编辑区，并在鼠标释放的地方渲染该组件
效果如下图所示：
物料区的组件需要增加 draggable 属性就可以拖动了。就像这样：
<section className={styles.combomentBlock} key={index}
// 元素可以拖拽
draggable
>
</section>)
效果如下：
核心代码如下：
修改物料组件，让物料组件支持拖拽，并在拖拽前记录拖动的组件。
// 物料区（即组件区）
// spug\src\pages\lowcodeeditor\Material.js
@observer
class Material extends React.Component {
// 记录拖动的元素
dragstartHander = (e, target) => {
// 标记正在拖拽
store.dragging = true;
// 记录拖拽的组件
store.currentDragedCompoent = target
// {"key":"text","label":"文本"}
// console.log(JSON.stringify(target))
}
render() {
return (
<Fragment>
{
store.componentList.map((item, index) =>
<section className={styles.combomentBlock} key={index}
// 元素可以拖拽
draggable
onDragStart={e => this.dragstartHander(e, item)}
>
{/* 文案 */}
<Tag className={styles.combomentBlockLabel} color="cyan">{item.label}</Tag>
{/* 组件预览 */}
<div className={styles.combomentBlockBox}>{item.preview()}</div>
</section>)
}
</Fragment>
)
}
}
export default Material
容器组件中初始化配置文件，默认容器大小是800*600，并给容器增加 dragover 和 drop 事件，并在 drop 事件里新增组件到数据中。
// spug\src\pages\lowcodeeditor\Container.js
import React from 'react';
import { observer } from 'mobx-react';
import styles from './style.module.less'
import store from './store';
import ComponentBlocks from './ComponentBlocks';
@observer
class Container extends React.Component {
componentDidMount() {
// 初始化
store.json = {
container: {
width: "800px",
height: "600px"
},
components: [
// {top: 100, left: 300, 'zIndex': 1, type: 'text'},
]
}
}
// 如果不阻止默认行为，则不会触发 drop，进入容器后也不会出现移动标识
dragOverHander = e => {
e.preventDefault()
}
// 新增组件到数据中
dropHander = e => {
store.dragging = false;
// e 中没有offsetX，到原始事件中找到 offsetX。
const { nativeEvent = {} } = e;
const component = {
top: nativeEvent.offsetY,
left: nativeEvent.offsetX,
zIndex: 1,
type: store.currentDragedCompoent.type
};
// 重置
store.currentDragedCompoent = null;
// 添加组件
store.json.components.push(component)
}
render() {
const { container = {}, components } = store.json || {};
const { width, height } = container
return (
<div className={styles.containerBox}>
<div className={styles.container} style={{ width, height, }}
onDragOver={this.dragOverHander}
onDrop={this.dropHander}
>
<ComponentBlocks />
</div>
</div>
)
}
}
export default Container
物料组件拖拽到编辑区，释放鼠标时需要在该位置渲染组件，而 offerX 会相对容器中的子元素定位，这里使用 pointer-events 解决：
// spug\src\pages\lowcodeeditor\ComponentBlocks.js
@observer
class ComponentBlocks extends React.Component {
render() {
const { components } = store.json || {};
return (
<Fragment>
{
components?.map((item, index) =>
// `pointer-events: none` 解决offsetX 穿透子元素的问题。
// pointer-events 兼容性高达98%以上
<div key={index} style={{ pointerEvents: store.dragging ? 'none' : 'auto', position: 'absolute', left: item.left, top: item.top }}>{store.componentMap[item.type]?.render()}</div>
)
}
</Fragment>
)
}
}
store 中新增数据方法如下：
// spug\src\pages\lowcodeeditor\store.js
class Store {
@observable dragging = false;
// 记录当前拖动的组件，drop 时置空
@observable currentDragedCompoent = null
// 注册物料
registerMaterial = (item) => {
this.componentList.push(item)
this.componentMap[item.type] = item
}
...
}
export default new Store()
相关知识点：
- dragenter - 当拖动的元素或被选择的文本进入有效的放置目标时， dragenter 事件被触发。
- dragover - 当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件（每几百毫秒触发一次）
- dragleave - 事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发。
- drop - 事件在元素或选中的文本被放置在有效的放置目标上时被触发。
- DataTransfer.dropEffect 属性控制在拖放操作中给用户的反馈（通常是视觉上的）。它会影响在拖拽过程中光标的手势。笔者设置了
e.dataTransfer.dropEffect = "move" 也没效果 - offsetX - 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。会相对子元素，笔者采用
pointer-events: none 解决offsetX 穿透子元素的问题。
Tip：screenX、clientX、pageX, offsetX的区别如下图（来自网友 Demi）所示
还有一个小问题：物料拖拽到编辑区释放时，新组件的左上角(left,top)正好是释放时鼠标的位置。
笔者期望鼠标释放的位置是新组件的正中心。
增加 translate(-50%, -50%) 即可。就像这样
// spug\src\pages\lowcodeeditor\ComponentBlocks.js
<div key={index} style={{
...
// 鼠标释放的位置是新组件的正中心
transform: `translate(-50%, -50%)`
}}>...</div>
不过这个方案在下面实现辅助线对齐时却遇到问题，需要替换方案。
编辑区的组件拖拽
这里分三步：首先是选中组件，然后拖拽选中的组件，最后添加对齐辅助线功能。
编辑区的组件选中
需求：编辑区的组件支持选中。比如：
- 直接选中某组件就直接拖动（不释放鼠标）
- 仅选中某组件
- 选择多个组件，例如按住 shift
效果如下图所示：
这里用 mousedown 事件。核心代码如下：
// spug\src\pages\lowcodeeditor\ComponentBlocks.js
@observer
class ComponentBlocks extends React.Component {
mouseDownHandler = (e, target) => {
// 例如防止点击 input 时，input 会触发 focus 聚焦。
e.preventDefault()
// 如果按下 shift 则只处理单个
if (e.shiftKey) {
target.focus = !target.focus
} else if (!target.focus) {
// 清除所有选中
store.json.components.forEach(item => item.focus = false)
target.focus = true
} else {
// 这里无需清除所有选中
// 注销这句话拖动效果更好。
// target.focus = false
}
console.log(target)
}
render() {
const { components } = store.json || {};
return (
<Fragment>
{
components?.map((item, index) =>
<div key={index}
className={styles.containerBlockBox}
style={{
...
// 选中效果
border: item.focus ? '1.5px dashed red' : 'none',
}}
onMouseDown={e => this.mouseDownHandler(e, item)}
>...</div>
)
}
</Fragment>
)
}
}
export default ComponentBlocks
添加样式：
// spug\src\pages\lowcodeeditor\style.module.less
// 容器
.container{
...
// 编辑区的组件上添加一个蒙版，防止用户点击组件
.containerBlockBox::after{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
拖拽编辑区组件
需求：编辑区内的选中的组件支持拖拽
思路：
- 点击容器，应取消所有选中组件
- mousedown时记录点击的开始位置坐标，移动时计算偏移量并更新组件位置
核心代码如下：
// spug\src\pages\lowcodeeditor\Container.js
@observer
class Container extends React.Component {
...
// 点击容器，取消所有选中
clickHander = e => {
e.target.className.split(/\s+/).includes('container') &&
// 清除所有选中
store.json.components.forEach(item => item.focus = false)
}
mouseDownHandler = e => {
// 开始坐标
this.startCoordinate = {
x: e.pageX,
y: e.pageY
}
console.log('down。记录位置:', this.startCoordinate)
}
mouseMoveHander = e => {
if(!this.startCoordinate){
return
}
const {pageX, pageY} = e
const {x, y} = this.startCoordinate
// 移动的距离
const moveX = pageX - x
const moveY = pageY - y
console.log('move。更新位置。移动坐标：', {moveX, moveY})
store.focusComponents.forEach(item => {
item.top = item.top + moveY;
item.left = item.left + moveX;
})
// 更新开始位置。
this.startCoordinate = {
x: e.pageX,
y: e.pageY
}
}
mouseUpHander = e => {
console.log('up')
this.startCoordinate = null
}
render() {
const { container = {}, components } = store.json || {};
const { width, height } = container
return (
<div className={styles.containerBox}>
{/* 多个 className */}
<div className={`container ${styles.container}`} style={{ width, height, }}
...
onClick={this.clickHander}
onMouseDown={e => this.mouseDownHandler(e)}
onMouseMove={e => this.mouseMoveHander(e)}
onMouseUp={e => this.mouseUpHander(e)}
>
<ComponentBlocks />
</div>
</div>
)
}
}
export default Container
// spug\src\pages\lowcodeeditor\store.js
class Store {
// 配置数据
@observable json = null;
// 获取 json 中选中的项
@computed get focusComponents() {
return this.json.components.filter(item => item.focus)
}
// 获取 json 中未选中的项
@computed get unFocusComponents() {
return this.json.components.filter(item => !item.focus)
}
}
辅助线对齐
需求：增加对齐辅助线。比如讲文本组件和按钮组件顶对齐、底对齐、居中对齐等等。靠近辅助线时也能自动贴上去。
效果如下图所示：
思路：
- 记录未选中元素的辅助线的位置以及显现该辅助线的坐标
- 当前选中元素的坐标如果和辅助线的坐标匹配则显示对应辅助线
- 同时拖动多个元素，以最后选中的元素为准
每个未选中的元素有10种情况。请看下图：
A 表示未选中元素，B表示选中拖动的元素，A 有三条辅助线，从上到下5种情况下显示：
- A顶对B底
- A顶对B顶
- A中对B中
- A底对B底
- A底对B顶
这里是水平方向5中情况，垂直方向也有5种情况。
核心代码如下：
首先记录最后一个选中的元素。核心代码如下：
在 store.js 中增加如下相关变量：
- startCoordinate - 作用：1. 记录开始坐标位置，用于计算移动偏移量 2. 松开鼠标后，辅助线消失
- guide - 存放辅助线
- adjacency - 拖拽的组件靠近辅助线时（2px内），辅助线出现
- lastSelectedElement - 最后选中的元素
- adjacencyGuides - 紧邻的辅助线，即要显示的辅助线
// spug\src\pages\lowcodeeditor\store.js
import { observable, computed } from 'mobx';
class Store {
// 开始坐标。作用：1. 记录开始坐标位置，用于计算移动偏移量 2. 松开鼠标后，辅助线消失
@observable startCoordinate = null
// 辅助线。xArray 存储垂直方向的辅助线；yArray 存储水平方向的辅助线；
@observable guide = { xArray: [], yArray: [] }
// 拖拽的组件靠近辅助线时（2px内），辅助线出现
@observable adjacency = 2
// 最后选中的元素索引。用于辅助线
@observable lastSelectedIndex = -1
// 最后选中的元素
@computed get lastSelectedElement() {
return this.json.components[this.lastSelectedIndex]
}
// 紧邻的辅助线，即要显示的辅助线
@computed get adjacencyGuides() {
return this.lastSelectedElement && this.guide.yArray
// 相对元素坐标与靠近辅助线时，辅助线出现
?.filter(item => Math.abs(item.y - this.lastSelectedElement.top) <= this.adjacency)
}
}
export default new Store()
ComponentBlocks.js 改动如下：
- 将子组件的渲染抽离成一个单独组件ComponentBlock。主要用于获取组件的宽度和高度。组件得渲染后才知晓其尺寸
- mousedown 时记录鼠标位置以及初始化辅助线
- 辅助线有水平方向和垂直方向，分别存入 yArray 和 xArray 中。其数据结构为
{showTop: xx, y: xx}。笔者只实现了水平方向的辅助线。例如A顶（未选中元素）对B底 的 y 的计算方式请看下图：
- 将组件的选中样式从 border 改为不占空间的
outline，防止取消选中时组件的抖动。 - 鼠标释放的位置是新组件的正中心方案修改。第一次从物料区拖拽组件释放时修改坐标。
// spug\src\pages\lowcodeeditor\ComponentBlocks.js
...
@observer
class ComponentBlocks extends React.Component {
mouseDownHandler = (e, target, index) => {
...
// 记录开始位置
store.startCoordinate = {
x: e.pageX,
y: e.pageY
}
...
// 初始化辅助线。选中就初始化辅助线，取消不管。
this.initGuide(target, index)
}
// 初始化辅助线。
// 注：仅完成水平辅助线，垂直辅助线请自行完成。
initGuide = (component, index) => {
// 记录最后一个选中元素的索引
// 问题：依次选中1个、2个、3个元素，然后取消第3个元素的选中，这时最后一个元素的索引依然指向第三个元素，这就不正确了。会导致辅助线中相对最后一个选中元素不正确。
// 解决办法：通过定义变量（store.startCoordinate）来解决此问题
store.lastSelectedIndex = component.focus ? index : -1
if (!component.focus) {
return
}
// console.log('初始化辅助线')
store.guide = { xArray: [], yArray: [] }
store.unFocusComponents.forEach(item => {
const { xArray: x, yArray: y } = store.guide
// 相对元素。即选中的最后一个元素
const { lastSelectedElement: relativeElement } = store
// A顶（未选中元素）对B底
// showTop 辅助线出现位置。y - 相对元素的 top 值为 y 时辅助线将显现
y.push({ showTop: item.top, y: item.top - relativeElement.height })
// A顶对B顶
y.push({ showTop: item.top, y: item.top })
// A中对B中
y.push({ showTop: item.top + item.height / 2, y: item.top + (item.height - relativeElement.height) / 2 })
// A底对B底
y.push({ showTop: item.top + item.height, y: item.top + item.height - relativeElement.height })
// A底对B顶
y.push({ showTop: item.top + item.height, y: item.top + item.height })
})
}
render() {
const { components } = store.json || {};
return (
<Fragment>
{
components?.map((item, index) =>
<ComponentBlock key={index} index={index} item={item} mouseDownHandler={this.mouseDownHandler} />
)
}
</Fragment>
)
}
}
// 必须加上 @observer
// 将子组件拆分用于设置组件的宽度和高度
@observer
class ComponentBlock extends React.Component {
constructor(props) {
super(props)
this.box = React.createRef()
}
componentDidMount() {
// 初始化组件的宽度和高度
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
const { offsetWidth, offsetHeight } = this.box.current
const component = store.json.components[this.props.index] ?? {}
component.width = offsetWidth
component.height = offsetHeight
// 组件第一次从物料区拖拽到编辑区，将组件中心位置设置为释放鼠标位置。
// transform: `translate(-50%, -50%)` 的替代方案
if (component.isFromMaterial) {
component.isFromMaterial = false
component.left = component.left - (component.width) / 2
component.top = component.top - (component.height) / 2
}
}
render() {
const { index, item, mouseDownHandler } = this.props;
return (
<div ref={this.box}
className={styles.containerBlockBox}
style={{
...
// 选中效果
// border 改 outline（轮廓不占据空间）。否则取消元素选中会因border消失而抖动
outline: item.focus ? '1.5px dashed red' : 'none',
// 鼠标释放的位置是新组件的正中心
// transform: `translate(-50%, -50%)`,
}}
onMouseDown={e => mouseDownHandler(e, item, index)}
>{store.componentMap[item.type]?.render()}</div>
)
}
}
export default ComponentBlocks
Container.js 主要改动：
- isFromMaterial - 鼠标释放的位置是新组件的正中心的一个标记
- adjacencyGuideOffset - 自动贴近辅助线的偏移量。体验有些问题，默认关闭
- mouseUpHander - mouseup 后辅助线不在显示
- render() - 增加辅助线的渲染
// spug\src\pages\lowcodeeditor\Container.js
...
@observer
class Container extends React.Component {
...
dropHander = e => {
...
const component = {
// 从物料拖拽到编辑器。在编辑器初次显示后则关闭。
+ isFromMaterial: true,
top: nativeEvent.offsetY,
left: nativeEvent.offsetX,
zIndex: 1,
type: store.currentDragedCompoent.type
};
...
}
// 自动贴近辅助线的偏移量
// 体验有些问题，默认关闭。即贴近后，移动得慢会导致元素挪不开，因为自动贴近总会执行
// 注：只实现了Y轴（水平辅助线）
adjacencyGuideOffset = (close = true) => {
const result = { offsetY: 0, offsetX: 0 }
if (close) {
return result
}
// 取得接近的辅助线
const adjacencyGuide = store.guide.yArray
// 拖拽的组件靠近辅助线时（2px内），辅助线出现
.find(item => Math.abs(item.y - store.lastSelectedElement.top) <= store.adjacency)
if (adjacencyGuide) {
// 体验不好：取消贴近辅助线功能
result.offsetY = adjacencyGuide.y - store.lastSelectedElement.top;
}
return result
}
mouseMoveHander = e => {
// 选中元素后，再移动才有效
if (!store.startCoordinate) {
return
}
// 上个位置
const { x, y } = store.startCoordinate
let { pageX: newX, pageY: newY } = e
// 自动贴近偏移量。默认关闭此功能。
const { offsetY: autoApproachOffsetY, offsetX: autoApproachOffsetX } = this.adjacencyGuideOffset()
// 移动的距离
const moveX = newX - x + autoApproachOffsetX
const moveY = newY - y + autoApproachOffsetY
// console.log('move。更新位置。移动坐标：', {moveX, moveY})
store.focusComponents.forEach(item => {
item.left += moveX
item.top += moveY
})
// 更新开始位置。
store.startCoordinate = {
x: newX,
y: newY
}
}
// mouseup 后辅助线不在显示
mouseUpHander = e => {
store.startCoordinate = null
}
render() {
...
return (
<div className={styles.containerBox}>
<div>
<ComponentBlocks />
{/* 辅助线 */}
{
store.startCoordinate && store.adjacencyGuides
?.map((item, index) => {
return <i key={index} className={styles.guide} style={{ top: item.showTop }}></i>
})
}
</div>
</div>
)
}
}
export default Container
辅助线样式：
// spug\src\pages\lowcodeeditor\style.module.less
// 辅助线
.guide{
position: absolute;
width: 100%;
border-top: 1px dashed red;
}
作者：彭加李
