Skip to content

[Demo][Component] Update: Implement Sprite panel spacing #3272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
jiaxin-915 wants to merge 2 commits into
base: ui
Choose a base branch
from
+81 −128
Draft

[Demo][Component] Update: Implement Sprite panel spacing #3272

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
280af2d
Update: Implement Sprite panel spacing
jiaxinLiu1 Jun 15, 2026
eb4c449
Fix EditorList drag spacing and restore lockfile metadata
jiaxinLiu1 Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 3 additions & 25 deletions spx-gui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 5 additions & 14 deletions spx-gui/src/components/editor/common/EditorList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
<template>
<div class="flex-[1_1_0] flex">
<div class="flex-none flex flex-col border-r border-dividing-line-2">
<div
ref="itemsWrapper"
v-radar="listRadarInfo"
class="items mx-1.5 flex-[1_1_0] flex flex-col gap-2 overflow-y-auto"
>
<div ref="itemsWrapper" v-radar="listRadarInfo" class="items flex-[1_1_0] flex flex-col gap-2 overflow-y-auto">

@gemini-code-assist gemini-code-assist Bot Jun 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Add mx-0.5 (2px horizontal margin) to the container to compensate for keeping the horizontal padding at 10px (to avoid SortableJS sorting bugs at the end of the list), achieving the desired 12px of total visual spacing.

      <div ref="itemsWrapper" v-radar="listRadarInfo" class="items mx-0.5 flex-[1_1_0] flex flex-col gap-2 overflow-y-auto">

<slot></slot>
</div>
<UIDropdownWithTooltip>
Expand Down Expand Up @@ -84,18 +80,13 @@ useDragSortable(sortableList, itemsWrapper, {

<style scoped>
.items {
/* Here we keep the horizontal padding no more than `10px`, */
/* as SortableJS uses `10` as `spacer` when deciding whether to put dragging item to the end of the list. */
/* Padding no more than `10px` disables the `_ghostIsLast` check. */
/* See details in https://github.com/SortableJS/Sortable/blob/ddd059717333d07b5b1125b7e1dc89514734bcf0/src/Sortable.js#L1822 */
padding: 12px 10px;
padding: 12px;

@gemini-code-assist gemini-code-assist Bot Jun 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

By changing the horizontal padding of .items to 12px, you exceed the 10px limit that disables SortableJS's hardcoded _ghostIsLast spacer check (which is set to 10px). This can cause buggy behavior when dragging items to the very end of the list.\n\nTo achieve the desired 12px of visual spacing while keeping SortableJS happy, you can keep the horizontal padding at 10px and add a 2px horizontal margin (mx-0.5) to the container.

  padding: 12px 10px;

}

.items:deep(.sortable-ghost-item) {
/* Shadow-like effect */
/* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
border-color: var(--ui-color-grey-400) !important;
background-color: var(--ui-color-grey-400) !important;
opacity: 0.6;
filter: grayscale(1);

@fennoai fennoai Bot Jun 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[关键] 移除了 SortableJS 10px 水平内边距约束的说明注释

原注释记录了一个重要约束：SortableJS 使用 10 作为 spacer 阈值来决定是否触发 _ghostIsLast（将拖拽元素追加到列表末尾），因此水平 padding 须保持在 10px 以内。本 PR 删除了该注释，同时将水平 padding 从 10px 增大到 12px——恰好超过了注释中警告的临界值。

该注释的原始措辞在技术细节上可能并不完全精确（SortableJS 的 spacer 实际上与子元素的 bounding rect 比较，而非容器 padding 边缘），但它记录了一次真实的排查过程，并附有指向 SortableJS 源码的具体链接。删除注释的同时又做了注释所警告的那个改动，且未提供任何验证说明，会给后续维护者带来困惑。

建议：在合并前验证 12px 水平 padding 下拖拽到列表末尾的行为是否正常（尤其是 ghost 元素是否会意外跳到最后一位）。无论结果如何，请补充一条注释说明已验证该行为，或解释为何原有约束不再适用。

box-shadow: var(--ui-box-shadow-sm);
}

@fennoai fennoai Bot Jun 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[性能] filter: grayscale(1) 在拖拽过程中会触发昂贵的重绘

filter CSS 属性会强制浏览器将元素提升到独立合成层，并在每一帧对该元素及其所有子元素执行像素级颜色变换。在拖拽交互期间，ghost 元素每次移动都会触发一次完整的光栅化过程，在低性能设备或列表项包含图片缩略图（如 Sprite Costumes/Animations）时，可能导致拖拽卡帧。

相比之下，opacity: 0.6（本次变更已包含）在合成器层面处理，成本极低，能够实现相似的「淡化」视觉效果，而不需要 grayscale 滤镜带来的额外开销。

建议：考虑仅使用 opacity: 0.6 实现 ghost 元素的视觉降级效果，移除 filter: grayscale(1) 以避免拖拽帧率下降。如果保留灰度效果，请在目标设备上测试拖拽流畅度。

.items:deep(.sortable-ghost-item *) {
Expand Down
Loading