修复和重构Sorter.ts

Question

[x] 修正 StyleManager 中的排序器使用情况（包含排序属性层的回归） [x] 基于“Components.canMove”的重构分选器 [x] 更新“canMove”，检查将主符号丢弃在其自身实例内。

mohamedsalem401 · Accepted Answer

这事结束了。

mohamedsalem401 · Answer

其理念是重构分拣器以提升可维护性和可读性。我们可以实施以下改动：让“Sorter”类依赖抽象树结构，而不是依赖“Component”或“Layers”等具体实现，让“Sorter”类使用更通用、抽象的树结构。这样会让它更灵活、更易重复使用。将代码拆分为多个较小的类，每个类负责单一职责'ComponentManager.canMove': 使用 'ComponentManager.canMove' 方法来判断是否可以移动某个“组件”。这样可以避免代码重复，并确保应用不同部分的行为一致。我们将看看如何逐一应用这些观点为了使“Sorter”类独立于任何模型实现，我们可以在“SorterOptions”中添加一个参数，返回一个元素是否可以拖入另一个元素的函数。 “TSX 导出界面 SorterOptions { container？： HTMLElement; canMove：（targetModel：Model，srcModel：Model，index：number）=> 布尔值; ... } 而任何依赖“组件”的事物 “TSX 新的工具。分选器（{ 容器：this....

GJS Helper · Answer

此次修复和重构解决了GrapesJSSorter.ts和组件移动逻辑中的多个关键领域，解决了样式管理器中的回归问题，并提升了整体拖放体验，尤其是可重用组件（符号）方面。 1.修复StyleManager中排序器的使用（带有排序属性层的回归） 问题：引入了回归，StyleManager通过拖放排序属性层（例如多个box-shadow或text-shadow值）的能力被破坏。这通常发生在负责拖放重排序的Sorter组件配置错误或未正确集成样式管理器属性层的动态DOM结构时。 解决方案： 修复涉及正确重新集成并配置Sorter，并嵌入StyleManager的UI。这确保Sorter正确识别可拖拽的物品（单个属性层）及其容器，并且其onSort回调在图层重排序时正确更新底层CSS模型。这可能包括调整传递给Sorter实例的container和item选择器，或确保onSort逻辑正确映射新的DOM顺序与GrapesJS样式属性。 2.使用Components.canMove的重构分选器 问题： 在重构之前，Sorter组件可能有自己的逻辑，可能冗余或灵活性较低，用于判断组件是否可以移动到特...

修复和重构Sorter.ts

问题

回答（3）

相关问答

Component：styleUpdate / component：styleUpdate：propertyName 未被触发

在切换某些目标时，添加到样式管理器的自定义类型 update（）不再被触发。

Cannot Store Data Unexpected token '-'

RTE insert link does not update DOM

与此问题匹配的付费插件

浏览插件分类

问题