{"_id":"@chenpengxu/tmagic-stage","name":"@chenpengxu/tmagic-stage","dist-tags":{"latest":"1.6.0-beta.6"},"versions":{"1.6.0-beta.6":{"version":"1.6.0-beta.6","name":"@chenpengxu/tmagic-stage","type":"module","main":"dist/tmagic-stage.umd.cjs","module":"dist/tmagic-stage.js","types":"types/index.d.ts","exports":{".":{"types":"./types/index.d.ts","import":"./dist/tmagic-stage.js","require":"./dist/tmagic-stage.umd.cjs"},"./*":"./*"},"license":"Apache-2.0","engines":{"node":">=18"},"repository":{"directory":"packages/stage","type":"git","url":"git+https://github.com/Tencent/tmagic-editor.git"},"dependencies":{"@scena/guides":"^0.29.2","events":"^3.3.0","keycon":"^1.4.0","lodash-es":"^4.17.21","moveable":"^0.53.0","moveable-helper":"^0.4.0","scenejs":"^1.10.3"},"devDependencies":{"@types/events":"^3.0.3","@types/lodash-es":"^4.17.4"},"peerDependencies":{"@tmagic/core":"workspace:*","typescript":"catalog:"},"peerDependenciesMeta":{"typescript":{"optional":true}},"_id":"@chenpengxu/tmagic-stage@1.6.0-beta.6","gitHead":"eedcc5583eec9b5b5a33b77506c601f66c2622e1","description":"画布是编辑器中最核心的功能，处理组件拖拽和所见即所得的展示。 ## 画布整体功能示意图 ![魔方编辑器](https://vfiles.gtimg.cn/vupload/20221113/78b8ab1668310500232.png) 如上图所示，中间粉色区域及其周边的标尺，是画布区域，就是这个模块代码要处理的内容。<br/><br/> ## 已选组件的组件树 ![已选组件列表](https://vfiles.gtimg.cn/vupload/20221113/c3816e1668311041998.p","bugs":{"url":"https://github.com/Tencent/tmagic-editor/issues"},"homepage":"https://github.com/Tencent/tmagic-editor#readme","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-qciY7AI2QUwylkwwxHDEUst6LhRFPXJI3ng1asvBzBw65NkZ3Zhawx9GBNBCHZxgnpSq05nMw/sAetaqZ7w6Eg==","shasum":"7caa9a0424acbf6b208e24f5645c58cbbb0c22e8","tarball":"https://registry.npmjs.org/@chenpengxu/tmagic-stage/-/tmagic-stage-1.6.0-beta.6.tgz","fileCount":24,"unpackedSize":442833,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCvp0gybDlImHbcLkPB7cs+2+vyeTmVBHraaN0crRJz3gIhAKpStu+WAHfyLT0EenAFTUvUH4CWxo7Xnvg4BsGcmNBe"}]},"_npmUser":{"name":"chenpengxu","email":"345071778@qq.com"},"directories":{},"maintainers":[{"name":"chenpengxu","email":"345071778@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tmagic-stage_1.6.0-beta.6_1755422605087_0.06786662959095735"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-17T09:23:24.961Z","1.6.0-beta.6":"2025-08-17T09:23:25.314Z","modified":"2025-08-17T09:23:25.617Z"},"maintainers":[{"name":"chenpengxu","email":"345071778@qq.com"}],"description":"画布是编辑器中最核心的功能，处理组件拖拽和所见即所得的展示。 ## 画布整体功能示意图 ![魔方编辑器](https://vfiles.gtimg.cn/vupload/20221113/78b8ab1668310500232.png) 如上图所示，中间粉色区域及其周边的标尺，是画布区域，就是这个模块代码要处理的内容。<br/><br/> ## 已选组件的组件树 ![已选组件列表](https://vfiles.gtimg.cn/vupload/20221113/c3816e1668311041998.p","homepage":"https://github.com/Tencent/tmagic-editor#readme","repository":{"directory":"packages/stage","type":"git","url":"git+https://github.com/Tencent/tmagic-editor.git"},"bugs":{"url":"https://github.com/Tencent/tmagic-editor/issues"},"license":"Apache-2.0","readme":"# 画布功能介绍\n画布是编辑器中最核心的功能，处理组件拖拽和所见即所得的展示。\n## 画布整体功能示意图\n![魔方编辑器](https://vfiles.gtimg.cn/vupload/20221113/78b8ab1668310500232.png)\n如上图所示，中间粉色区域及其周边的标尺，是画布区域，就是这个模块代码要处理的内容。<br/><br/>\n## 已选组件的组件树\n![已选组件列表](https://vfiles.gtimg.cn/vupload/20221113/c3816e1668311041998.png)\n已选组件列表，组件列表也可以单选、多选、高亮、删除、拖拽组件到容器内<br/><br/>\n\n## 画布支持的功能\n- 渲染runtime\n- 从编辑器增加组件，可以在左侧组件列表中通过单击/拖拽往画布中加入组件\n- 删除组件，在画布中右键单击组件，在弹出菜单中删除；或者在左侧已选组件的组件树中右键删除组件\n- 单选拖拽组件，可以在画布中选中组件，也可以在左侧目录中\n- 多选拖拽组件，通过按住ctrl健选中多个组件\n- 拖拽改变组件大小\n- 旋转组件\n- 高亮组件，在画布中mousemove经过组件的时候，或者在组件树中mousemove经过组件的时候，高亮组件\n- 配置组件，单选选中组件之后，右侧表单区域对组件进行配置，并更新组件的渲染\n- 添加/删除/隐藏/显示参考线，通过在标尺中往画布中拖拽，给画布添加参考线，图中两条竖向和一天横向的红色线条就是参考线\n- 辅助对齐，单选和多选都支持拖拽过程中会辅助对齐其它组件，并在靠近参考线时吸附到参考线\n- 拖拽组件进入容器，支持通过在画布中单选，或者在组件树中单选，将组件拖拽进入容器\n<br/><br/>\n# 核心类介绍\n## StageCore\n- 负责统一对外接口，编辑器通过StageCore传入runtime、添加/删除组件、缩放画布、更新参考线和标尺等；同时StageCore也会对外抛出事件，比如组件选中、多选、高亮、更新，runtimeReady等。\n- 管理三个核心类：StageRender、StageMask、ActionManager\n<br/><br/>\n## StageRender\n基于iframe加载传入进来的runtimeUrl，并支持增删改查组件。还提供了一个核心API：getElementsFromPoint，该API负责获取指定坐标下所有dom节点。\n<br/><br/>\n## StageMask\nmask是一个盖在画布区域的一个蒙层，主要作用是隔离鼠标事件，避免鼠标事件直接作用于runtime中的组件，从而避免触发组件本身的点击事件（比如链接组件会跳走）。mask在滚动画布时，需要保证同步大小。\n<br/><br/>\n## ActionManager\n- 负责监听鼠标和键盘事件，基于这些事件，形成单选、多选、高亮行为。主要监听的是蒙层上的鼠标事件，通过StageRender.getElementsFromPoint计算获得鼠标下方的组件，实现事件监听和实际组件的解构。\n- 向上负责跟StageCore双向通信，提供接口供core调用，并向core抛出事件\n- 向下管理StageDragResize、StageMultiDragResize、StageHighlight这三个单选、多选、高亮类，让它们协同工作\n<br/><br/>\n## StageDragResize\n负责单选相关逻辑，拖拽、改变大小、旋转等行为是依赖于开源库Moveable实现的，这些行为并不是直接作用于组件本身，而是在蒙层上创建了一个跟组件同等大小的边框div，实际拖拽的是边框div，在拖拽过程中同步更新组件。\n这个类的主要工作包括：\n- 初始化组件操作边框，初始化moveable参数\n- 更新moveable参数，比如增加了参考线、缩放了大小、表单改变了组件，都需要更新\n- 接收moveable的回调函数，同步去更新实际组件的渲染\n<br/><br/>\n## StageMultiDragResize\n功能跟StageDragResize类似，只是这个类是负责多选操作的，通过ctrl健选中多个组件，多选状态下不支持通过表单配置组件。\n<br/><br/>\n## StageHighlight\n在鼠标经过画布中的组件、或者鼠标经过组件目录树中的组件时，会触发组件高亮，高亮也是通过moveable实现的，这个类主要负责初始化moveable并管理高亮状态。\n<br/><br/>\n## MoveableOptionsManager\nStageDragResize、StageMultiDragResize的父类，负责管理Moveable的配置\n<br/><br/>\n## TargetShadow\n统一管理拖拽框和高亮框，包括创建、更新、销毁。\n<br/><br/>\n## DragResizeHelper\n- 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；\n- 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；\n- 有个特殊情况是流式布局下，moveableHelper不支持，targetShadow也是DragResizeHelper直接改的\n","readmeFilename":"README.md","_rev":"1-387a681b306be607bc434ebfd13a6c2e"}