@ 内容/ 经验- 视频- 编辑- 反应
私人软件包通知
说明: 本软件包无意被最终用户直接使用. 这是工作室体验包的依赖。 此软件包的更改不能保证在语义化后进行,如果直接使用,可以不经通知而中断.
目的
- 处理画布交互逻辑,包括拖放,打箱,放放区,重现,并与父框架沟通,以确保平滑地拖放体验.
- 请注意,此套件是React特有的框架.
概念
- 结构组成部分: 与用户体验布局有关的组件,如容器、区段和列.
- 内建组件: 代表用户提供内容的组件,这些组件被认为普遍有用,如图像,文本,和分隔器组件,或让用户快速启动,如按钮等. 请注意,这些组件并不是要覆盖用户可能希望拥有的每一个可能的组件. 相反,一般期望用户提供自己的一套组件来积累自己定制的经验。 例外情况一般将基于这种组件的普遍期望,例如今后卡片或木卫一组件.
- 自定义组件:通过经验SDK提供的定义构建的用户提供的组件.
- 邮件:为了让一个iFrame与其母帧进行通信,需要后信息,使两个帧能够相互通信. 共享信息的例子包括鼠标坐标或被取出并丢弃的组件.
- 浏览器限制:目前只有Chrome支持Click/Drag和Drop,而Safari和Firefox只允许Click和Drop.
- 树: 经验存储了自己版本的从真实来源中分离出来的树被存储为Contentful条目. 这是因为通过存储自己的树版,它可以为树提供UI优化和操纵,以最大限度地实现与性能有关的任务,例如当执行组件的拖放或重排时. 需要这种优化的一个具体例子是,当您将一个组件放入画布时。 没有自己的版本,组件会在基于鼠标位置的预定区域被放入之前会闪烁到其原有的被擦拭前地段.
- 更新真相来源: 在拖放端, iFrame 将更新自己的树后, 才会向父框发送邮件
useCanvasInteractions。然后,父框架将更新其树,这是真理的来源,然后发送 MSG 回信useEditorSubscriber至iFrame,确保两棵树相同,任何发现的相差之处得到解决. - @hello-pangea/dnd (韩语): 图书馆提供HOC(更高级的订单组件),经验为拖放提供杠杆. 此库中使用的两个组件是
Droppable财务报告和审定财务报表Draggable组件. - 区域: Div 包装符,代表要投放的其他组件的区域. 请注意,每次只能通过一个击出箱激活一个,并且是一个单独的从
Draggables。 。 。 . - 拖动: 允许组件取出并投放的Div包装. 请注意,这是与
Dropzones。 。 。 . - 模拟 DnD: 自定义构造的 DND 组件, 作为将一个组件从侧边栏拖入 iFrame 时的视觉花招。 由于在点击并拖曳新组件时拖曳是在母框中启动的,因此也触发了iFrame中模拟动作,因此iFrame处于和母框一样的拖曳状态. 然后当鼠标从母框交叉进入iFrame时,需要将后信息发送到iFrame会将鼠标坐标发送到父框Frame,这样被拖走的组件图标被放在正确的位置上,而iFrame会触发适当的命中框和空投区,因为所有的命中框和空投区都生活在iFrame.
- 组件包装: 有几种类型的 div 包装, 如
Dropzones财务报告和审定财务报表Draggables然而,还有一个包装器作为自定义布尔选项提供Custom Components。当此布尔值为真时,从 UI 中选择的所有样式选项都将被应用到此包装 div 中。 这样做是为了保存用户在自己的组件上的CSS样式,并屏蔽UI中选择的样式选项.