Jz0ojiang
8934f374bb
布局改成 顶部工具栏 / 左图层 / 中画布 / 右属性 / 底部悬浮胶囊。 新内核： - 图层模型：fabric 对象是唯一真源，LayerInfo 是只读投影； id/名字/锁定挂在 customProperties 上，随 toJSON 持久化 - 视口：zoom/pan 走 viewportTransform，只影响显示； 导出改为按视口裁剪（artboardExportOptions），旧的「multiplier 恒为 1」 在画布铺满工作区之后不再成立 - 历史：快照式撤销重做，30 步上限，带重入保护 - 命令表：快捷键 / 右键菜单 / 工具栏三个入口共用一份注册表 键位取自 Penpot 快捷键表 - 画板用 backgroundImage 画（跟随视口且不进 getObjects） 两个 fabric 陷阱已在注释里记下： - Rect 默认原点是中心，left:0/top:0 不写 originX/originY 会画错位置 - canvas.clipPath 不吃 viewportTransform，不能用来裁画板
41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 【T6 待实现 — 左侧图层面板】
|
|
*
|
|
* 数据来自 `@/editor/useLayers` 的 `layers`（从上到下 = 从前到后，和 Figma 一致）。
|
|
* 那个模块已经把所有操作都写好了：selectLayer / renameLayer / toggleVisible /
|
|
* toggleLocked / deleteLayer / moveLayerToRow。**面板只管界面，不要另写一套状态。**
|
|
*
|
|
* 要有：每行图标（按 kind）+ 名字 + 显隐眼睛 + 锁；点击选中，Ctrl/Shift 点多选；
|
|
* 双击重命名；拖拽排序（放到第 N 行调 moveLayerToRow）；行内或右键删除。
|
|
*/
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="layers">
|
|
<h2>图层</h2>
|
|
<p class="todo">T6 待实现</p>
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layers {
|
|
border-right: 1px solid var(--line);
|
|
background: var(--bg2);
|
|
overflow-y: auto;
|
|
padding: 10px 0;
|
|
}
|
|
.layers h2 {
|
|
margin: 0 12px 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
color: var(--fg-dim);
|
|
text-transform: uppercase;
|
|
}
|
|
.todo {
|
|
color: var(--fg-dim);
|
|
margin: 0 12px;
|
|
}
|
|
</style>
|