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，不能用来裁画板
33 lines
946 B
Vue
33 lines
946 B
Vue
<script setup lang="ts">
|
||
/**
|
||
* 【T7 待实现 — 顶部工具栏】
|
||
*
|
||
* 左：工具组（选择 V / 文字 T / 矩形 R / 图片 Shift+K），当前工具高亮。
|
||
* 工具状态是 `useEditor().tool`，切换走 `runCommand("toolSelect")` 等命令——
|
||
* **不要直接写 tool.value**，否则工具栏和快捷键会走成两条路。
|
||
*
|
||
* 中：文件名 / 画布尺寸（尺寸预设与自定义从旧的 CanvasPanel 搬过来，那是 T10 的活）。
|
||
* 右：撤销 / 重做（`useHistory` 的 canUndo / canRedo 控制禁用态）、导出入口。
|
||
*/
|
||
</script>
|
||
|
||
<template>
|
||
<header class="topbar">
|
||
<span class="todo">T7 待实现：工具组 / 画布尺寸 / 撤销重做 / 导出</span>
|
||
</header>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0 12px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: var(--bg2);
|
||
}
|
||
.todo {
|
||
color: var(--fg-dim);
|
||
}
|
||
</style>
|