oceanzhu
|
3fb880d09b
|
refactor(stage):重构魔方编辑器stage代码
Squash merge branch 'feature/oc_actionbox_879360293' into 'master'
对魔方编辑器核心代码stage进行重构，这部分代码主要是负责编辑器中间画布区域的处理，包括渲染一个所见即所得的画布，支持组件的增删改查和拖拽、高亮操作。
旧代码存在的问题以及解决方案：
1、过多暴露属性和循环引用，导致stageCore、stageDragResize、StageMultiDragResize、StageRender、StageMask、StageHighlight之间形成复杂的网状依赖，非常不可控。StageCore负责创建后面5个类的实例，并把这些实例作为自己的公共属性，同时core把自己的this传给这些实例，这些实例就会通过core传进来的this，通过core间接的访问其它实例的方法和属性，比如在stageDragResize中可能存在这样的一个访问：this.core.stageRender.contentWindow.document
解决方案：
1）、属性尽量设置为私有，对外暴露方法，不暴露属性；
2）、core避免向其它类传递this，改为传递接口，需要什么就传什么
2、事件传递较多，跳来跳去，定位问题较为困难
解决方案：
重新梳理各个类的职责，尽量在类中闭环，减少事件传递。
新增了actionManager类，core负责管理render、mask、actionManager三个类;
actionManager负责管理单选、多选、高亮三个类，同时将mask中的事件监听，转移到actionManager监听，actionManager形成单选、多选、高亮行为后，直接调动单选、多选、高亮完成功能。
3、存在一些重复代码
主要是拖拽框的代码在单选、多选、高亮中各自维护，改为统一维护
4、多选不支持辅助线对齐
将单选中的moveableOption管理逻辑抽取出来成为单选和多选的父类，使多选支持辅助线对齐
本次改动取消了一些对外暴露的属性，moveableOption回调函数签名也有变化，详细情况如下：
删除stageCore公共属性：
public selectedDom: HTMLElement | undefined;
public selectedDomList: HTMLElement[] = [];
public highlightedDom: Element | undefined;
public dr: StageDragResize;
public multiDr: StageMultiDragResize;
public highlightLayer: StageHighlight;
public config: StageCoreConfig;
public zoom = DEFAULT_ZOOM;
public containerHighlightClassName: string;
public containerHighlightDuration: number;
public containerHighlightType?: ContainerHighlightType;
public isContainer: IsContainer;
stageCore入参改动：
这两个参数原本定义：
moveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
multiMoveableOptions?: ((core?: StageCore) => MoveableOptions) | MoveableOptions;
修改后定义：
moveableOptions?: CustomizeMoveableOptions;
multiMoveableOptions?: CustomizeMoveableOptions;
CustomizeMoveableOptions =
| ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
| MoveableOptions
| undefined;
export interface CustomizeMoveableOptionsCallbackConfig {
targetElId?: string;
}
|
2022-11-24 21:19:56 +08:00 |
|
roymondchen
|
4f8ea94ee8
|
feat(stage,editor): 拖入指定容器支持配置成按住alt才开启
|
2022-08-12 15:36:05 +08:00 |
|
roymondchen
|
4c5817a922
|
docs: 尖括号没有转义
|
2022-07-14 20:39:11 +08:00 |
|
roymondchen
|
0e0e3ee310
|
refactor: 使用@element-plus/icons-vue替换@element-plus/icons
|
2022-07-14 20:39:11 +08:00 |
|
roymondchen
|
260b6435cf
|
docs: 添加editor新props
|
2022-07-14 19:30:42 +08:00 |
|
roymondchen
|
dd1a8e22c5
|
docs: 添加render教程
|
2022-07-07 19:16:39 +08:00 |
|
roymondchen
|
4e4d380afd
|
docs: 修改文档表述不恰当问题
|
2022-07-01 17:42:59 +08:00 |
|
jia000
|
0fe6e0ed75
|
release v1.0.0-rc.11 (#138)
* fix(editor): 页面标题不要换行
* docs: 教程与stageCore
* fix(editor): runtime.updateRootConfig可以为空
* fix(editor): 编辑组件是获取parent需要获取到Proxy
* fix(editor): 默认page属性值加上layout
* fix(stage): magic注入时机应当在iframe onload之后
* chore: release v1.0.0-rc.11
* chore: 更新changlog
Co-authored-by: roymondchen <roymondchen@tencent.com>
|
2022-06-17 17:13:22 +08:00 |
|
roymondchen
|
cf3dfde648
|
docs: 表单配置文档整理
|
2022-05-17 16:21:40 +08:00 |
|