一个低代码（可视化拖拽）教学项目
Home Page: https://woai3c.github.io/visual-drag-demo
License: MIT License
一个低代码平台的前端部分，靠拖拉拽生成页面。
这是本项目具有的功能点，如果想了解详情请参考本项目的四篇文档，每个功能点都有不同程度的描述以及动图帮助你理解。
npm i
npm run dev
npm run build
MIT
拖拽完成后，可以根据配置修改数据后如何调用自定义组件里的方法
编译报错
Bug原因：move事件一直用最开始点击Shape的坐标作为比较坐标。举个例子：当我点击了Shape之后，在开始坐标的右边一直移动，无论是左移还是右移，当前鼠标坐标curX-startX会永远大于0，即move事件会认为，Shape在向右移动
解决办法：move事件每次比较时，都应该用上一次鼠标移动的坐标作为比较坐标
calculateTop 函数代码如下：
function calculateTop(style, curPositon, proportion, needLockProportion, pointInfo) {
const { symmetricPoint, curPoint } = pointInfo
let rotatedcurPositon = calculateRotatedPointCoordinate(curPositon, curPoint, -style.rotate)
let rotatedTopMiddlePoint = calculateRotatedPointCoordinate({
x: curPoint.x,
y: rotatedcurPositon.y,
}, curPoint, style.rotate)
// 勾股定理
let newHeight = Math.sqrt((rotatedTopMiddlePoint.x - symmetricPoint.x) ** 2 + (rotatedTopMiddlePoint.y - symmetricPoint.y) ** 2)
if (newHeight > 0) {
const newCenter = {
x: rotatedTopMiddlePoint.x - (rotatedTopMiddlePoint.x - symmetricPoint.x) / 2,
y: rotatedTopMiddlePoint.y + (symmetricPoint.y - rotatedTopMiddlePoint.y) / 2,
}
let width = style.width
// 因为调整的是高度 所以只需根据锁定的比例调整宽度即可
if (needLockProportion) {
width = newHeight * proportion
}
style.width = width
style.height = Math.round(newHeight)
style.top = Math.round(newCenter.y - (newHeight / 2))
style.left = Math.round(newCenter.x - (style.width / 2))
}
}我不太理解的是这里为什么要以 curPoint 为圆心旋转，感觉这里应该以 center 为圆心更好，理由如下：当拖拽 top 点的时候，我们需要忽略非 top 方向的拖拽。拖拽前是以 center 为圆心的，拖拽后我们仍然以 center 为圆心就可以求出相应旋转前的坐标位置，具体到代码如下（暂时忽略锁影响，另外我发现 top 点可以拖到 bottom 点以下，不太清楚是不是设计如此，如果算 bug 的话可以加上 symmetricPoint.y > rotatedTopMiddlePoint.y 的判断，而且勾股定理 newHeight 不可能为负数，这个判断是多余的）：
function calculateTop(style, curPosition, proportion, pointInfo) {
const { symmetricPoint, center } = pointInfo;
// 先获取旋转前 curPosition 对应坐标
const beforeRotateCurPosition = calculateRotatedPointCoordinate(curPosition, center, -style.rotate);
// 忽略 x 轴的偏移，计算 y 轴上对应点
const beforeRotateTopPoint = { x: center.x, y: beforeRotateCurPosition.y };
// 计算旋转后的坐标
const afterRotateTopPoint = calculateRotatedPointCoordinate(beforeRotateTopPoint, center, style.rotate);
if (symmetricPoint.y > afterRotateTopPoint.y) {
const newHeight = Math.sqrt((afterRotateTopPoint.x - symmetricPoint.x) ** 2 + (afterRotateTopPoint.y - symmetricPoint.y) ** 2);
const centerPoint = getCenterPoint(afterRotateTopPoint, symmetricPoint);
style.height = Math.round(newHeight);
style.top = Math.round(centerPoint.y - (newHeight / 2));
style.left = Math.round(centerPoint.x - (style.width / 2));
}
}实际测试发现以 curPoint 和 center 旋转 y 坐标只相差 1 不到，基本看不出区别，希望能够说下这里以 curPoint 旋转的原因。
如果想把预览页面当作独立的html进行单独发布，那么该如何做呢
内容输入框用键盘粘贴复制的文字 提示要选择组件
是否支持画布边界设置，画布内的组件不允许超过画布边界
（虽然vuex中已经不存在了）
RT：
有时候拆分之后的组件还没有办法编辑！！
解决办法：将cut方法里的还原剪切数据代码，同时加入到copy方法里
功能很全面了，赞！，更新的也很及时啊，大赞！
框选多个组建后，还需要组合才能一起移动，太麻烦了，可以考虑一下框选后组件们一起动吗？
组件成组后，来个组内移动的小功能会更赞啊，在没有拆分组的情况下可以组内元素进行位移，这样在页面结构复杂的时候混很方便，不用在拆分重组，元素过多的时候或拥挤的时候，框选并不舒适哦。
最后再来个鸟瞰图就更棒了，在画布大小过大的时候(1920x1200)情况下，是看不全页面的，有了鸟瞰图方便太多了！
初始化如下图：
元素top初始值是175，如图所示bottom拖拽一下，按理来说top值应该始终为175不变，但是有时候会产生正负几个像素的偏差（如果一次没出现，就让元素失焦再选中，重复几次），经测试其它点均有此问题
这样就会给人呈现元素突然位移抖一下的现象，是否各种矩阵计算导致了center值或者height值出现了偏差？
如果要组合的组件中，已经存在组合数据，为什么要拆分呀，不能直接组合嵌套吗？
我看这里面的组合方法有两个删除,会导致将两个组合组件再组合的时候,会无辜删除了其他组件
Uploading 20210930_102202.mp4…
大佬，这个编辑器组件 大小px 改成百分比百有什么思路吗
透明度没有用，加一个圆角属性更好
RT
原因：使用颜色选择器时，对应组件颜色也实时变化，看起来会更加直观
实现办法：颜色选择器自带active-change事件，可以用来获取面板实时颜色，并赋给组件
应该把 -1 去掉吧
增加echarts拖拽组件，修改宽高图表大小不变
我将此项目嵌套我当前项目中，只要打开工艺图页面，不做任何操作，然后关闭后，进入"其他页面"粘贴内容时一直提示‘请选择组件’，我怎么才能让这个粘贴事件不影响我这个"其他页面"呢
想加上碰撞检测，是在component/Editor/Shape里handleMouseDownOnPoint方法里修改吗
RT：
建议对 componentData 做监听
我VText组件中看到这样一句话
this.element.propValue = e.target.innerHTML || ' '很容易理解，在用户清空文本的情况下保留一个空格，但是实际测试的过程中有一些异常，异常的步骤如下：
一句话总结就是连续清空两次 VText 组件，v-html 并不会渲染。
解决的办法很简单，在 blur 的时候赋值一个新值，watch 传入的 element 变化，使用 innerHTML 手动赋值。
但我比较好奇这里的 v-html 为什么会在连续清除两次后会失效，如果你知道原因，请告诉我，不胜感激。
右键按下的时候会有菜单，放开的时候马上就消失了
能增加画直线和画曲线的功能吗
实际开发左侧矩形图片等元素是接口返回的，那怎么动态生成矩形图片等自定义组件呢，现在是有一个类型就去新建一个.vue文件
强迫症看起来比较难受
bug原因：在鼠标移出后hoverPreviewAnimate仍不变，即class中仍有动画类名
解决办法：可以同时加入鼠标移出事件，让hoverPreviewAnimate等于空字符串
你好,作者大佬,首先感谢你贡献,让我免于开除....,最近在使用的时候发现几个问题
1.操作方式：拖动两个组件，选中后组合并复制，拆分第二次组合的组件，会消失，并在原组件上生成一个新的;
原因应该是拖动后的复制组件,被拆分后几个组件使用的是第一次的坐标
2.我在原有的组件基础上加了echart图表,如果echart给动态赋过数据后,那么执行撤回和重做的操作会使echart变成空白
原因应该是赋值的操作没有添加入快照中,需要将赋值这一步加入记录,但是我在赋值的时候加入了添加快照的方法,好像不生效
3.如果将画布大小设置为19201080,scale为60%,我将预览的页面大小设置为19201080,scale为100%,页面中组件会位置在左侧,那如果生成的大屏页面怎么做到完全贴合呢
大佬,我应该是个菜鸡了,这几个问题,我研究了两天,改了总是有bug,期望你的回复,谢谢,感谢大佬的贡献
发生的gif 如下：
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.