Update image and video workflow nodes
This commit is contained in:
o1key
@@ -0,0 +1,701 @@
|
||||
import { app } from "../../../scripts/app.js";
|
||||
|
||||
const STORAGE_KEY = "o1key-notes";
|
||||
const SEEDED_KEY = "o1key-notes-seeded-v2";
|
||||
const STYLE_ID = "o1key-notes-styles";
|
||||
|
||||
let notes = [];
|
||||
let searchText = "";
|
||||
let activeFilter = "all";
|
||||
let noteContainer = null;
|
||||
let editingNoteId = null;
|
||||
let draftNote = null;
|
||||
let pendingDelete = false;
|
||||
|
||||
const SAMPLE_NOTES = [
|
||||
{
|
||||
title: "产品主图：高级玻璃质感",
|
||||
tags: ["产品图", "玻璃", "灯光"],
|
||||
content: `Clean studio lighting, translucent glass material, subtle caustics, soft shadow, premium product photography, 85mm lens, minimal background, high detail.
|
||||
|
||||
使用方式：
|
||||
1. 把产品图作为参考图输入
|
||||
2. 保留主体轮廓，只调整材质和灯光
|
||||
3. 如果玻璃过亮，降低 "caustics" 权重`
|
||||
},
|
||||
{
|
||||
title: "Nano Banana 参考图经验",
|
||||
tags: ["Nano Banana", "参考图"],
|
||||
content: `参考图越多越容易跑偏，主体一致性优先用 1-3 张图。
|
||||
|
||||
复杂场景建议分两步：
|
||||
1. 先生成主体和构图
|
||||
2. 再用局部或参考图做材质、背景、文字等精修
|
||||
|
||||
如果提示词和参考图冲突，模型通常会优先参考图。`
|
||||
},
|
||||
{
|
||||
title: "电商模特换装模板",
|
||||
tags: ["电商", "模特", "换装"],
|
||||
content: `Keep face identity and original pose. Replace the outfit with: [服装描述].
|
||||
Realistic fabric texture, natural folds, accurate seams, studio e-commerce photography, clean background, consistent lighting.
|
||||
|
||||
Avoid changing body shape, face, hairstyle, camera angle, or hand position.`
|
||||
},
|
||||
{
|
||||
title: "常用负向词",
|
||||
tags: ["负向词", "通用"],
|
||||
content: "low quality, blurry, deformed hands, extra fingers, bad anatomy, distorted text, watermark, logo, oversaturated, plastic skin, broken geometry"
|
||||
},
|
||||
{
|
||||
title: "图片批量命名经验",
|
||||
tags: ["批量", "工作流"],
|
||||
content: `批量生图前先确认保存路径和命名规则。
|
||||
|
||||
推荐流程：
|
||||
1. 小批量跑 2-3 张确认风格
|
||||
2. 固定提示词和参考图
|
||||
3. 再放大批量数量
|
||||
|
||||
这样失败成本最低，也更容易定位是哪一环导致跑偏。`
|
||||
}
|
||||
];
|
||||
|
||||
const CSS = `
|
||||
#o1key-notes-root{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;color:#ddd;background:var(--comfy-menu-bg,#202020);overflow:hidden;font-family:inherit;--o1n-blue:#4f8cff;--o1n-blue-2:#7eb8f7;--o1n-blue-soft:rgba(79,140,255,.14)}
|
||||
#o1key-notes-header{padding:12px 14px 10px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
|
||||
.o1n-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
|
||||
.o1n-title{font-size:14px;font-weight:700;color:#eee;letter-spacing:.2px}
|
||||
.o1n-head-actions{display:flex;gap:5px}
|
||||
.o1n-icon-btn{width:28px;height:28px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:rgba(255,255,255,.035);color:#888;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
|
||||
.o1n-icon-btn:hover{color:#ddd;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
|
||||
.o1n-icon-btn.primary{background:var(--o1n-blue);color:#fff;border-color:transparent}
|
||||
.o1n-icon-btn.primary:hover{background:#6ca0ff;color:#fff}
|
||||
#o1n-search-box{height:34px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.045);display:flex;align-items:center;gap:8px;padding:0 10px;transition:border-color .15s}
|
||||
#o1n-search-box:focus-within{border-color:rgba(79,140,255,.42)}
|
||||
#o1n-search{flex:1;background:transparent;border:0;outline:0;color:#ddd;font-size:12px;min-width:0}
|
||||
#o1n-search::placeholder{color:#666}
|
||||
#o1n-panel-status{height:16px;margin-top:7px;color:#777;font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.o1n-tag-strip{display:flex;gap:6px;margin-top:10px;overflow-x:auto;padding-bottom:1px}
|
||||
.o1n-tag-strip::-webkit-scrollbar{display:none}
|
||||
.o1n-tag-filter{height:26px;padding:0 9px;border-radius:7px;border:1px solid rgba(255,255,255,.09);background:transparent;color:#929292;font-size:12px;display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;transition:all .15s}
|
||||
.o1n-tag-filter:hover{color:#cfcfcf;border-color:rgba(255,255,255,.16)}
|
||||
.o1n-tag-filter.active{color:var(--o1n-blue-2);border-color:rgba(79,140,255,.36);background:var(--o1n-blue-soft)}
|
||||
#o1key-notes-list{flex:1;min-height:0;overflow:auto;padding:8px 10px 12px;display:flex;flex-direction:column;gap:6px}
|
||||
#o1key-notes-list::-webkit-scrollbar,#o1n-content::-webkit-scrollbar{width:4px}
|
||||
#o1key-notes-list::-webkit-scrollbar-thumb,#o1n-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
|
||||
.o1n-item{border:1px solid transparent;border-radius:8px;padding:10px;background:transparent;cursor:pointer;transition:all .12s}
|
||||
.o1n-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
|
||||
.o1n-item.active{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.12);box-shadow:inset 2px 0 0 var(--o1n-blue)}
|
||||
.o1n-item-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
|
||||
.o1n-item-title{font-size:13px;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
|
||||
.o1n-item-edit{font-size:11px;color:#777;flex-shrink:0}
|
||||
.o1n-item-text{font-size:12px;line-height:1.45;color:#8b8b8b;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
|
||||
.o1n-item-meta{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#666;font-size:10px}
|
||||
.o1n-item-tags{display:flex;gap:4px;overflow:hidden;min-width:0}
|
||||
.o1n-tag{color:var(--o1n-blue-2);background:rgba(79,140,255,.1);border:1px solid rgba(79,140,255,.2);border-radius:5px;padding:2px 5px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
|
||||
.o1n-empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#666;font-size:13px;line-height:1.6;padding:20px}
|
||||
.o1n-editor-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.34);display:flex;align-items:stretch;justify-content:flex-end;z-index:30;animation:o1n-fade .12s ease}
|
||||
.o1n-editor{width:100%;height:100%;background:var(--comfy-menu-bg,#202020);border-left:1px solid rgba(79,140,255,.28);box-shadow:0 22px 70px rgba(0,0,0,.46);display:flex;flex-direction:column;min-height:0}
|
||||
.o1n-editor-top{height:48px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
|
||||
.o1n-editor-title{font-size:13px;font-weight:700;color:#eee}
|
||||
.o1n-editor-body{padding:12px;display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}
|
||||
#o1n-title-input,#o1n-content{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.045);color:#ddd;outline:0;font-family:inherit;transition:border-color .15s}
|
||||
#o1n-title-input{height:34px;padding:0 10px;font-size:13px;font-weight:700;flex-shrink:0}
|
||||
#o1n-content{flex:1;min-height:160px;resize:none;padding:11px 12px;font-size:13px;line-height:1.58}
|
||||
#o1n-title-input:focus,#o1n-content:focus{border-color:rgba(79,140,255,.42)}
|
||||
.o1n-tag-editor{min-height:74px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.035);padding:7px;flex-shrink:0}
|
||||
.o1n-tag-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
|
||||
.o1n-tag-token{height:24px;padding:0 7px;border-radius:6px;border:1px solid rgba(79,140,255,.25);background:rgba(79,140,255,.1);color:var(--o1n-blue-2);display:inline-flex;align-items:center;gap:6px;font-size:12px}
|
||||
.o1n-tag-remove{color:#8baee8;font-size:13px;line-height:1;cursor:pointer}
|
||||
.o1n-tag-input{height:24px;min-width:104px;flex:1;border:1px dashed rgba(255,255,255,.14);border-radius:6px;background:transparent;color:#ddd;padding:0 7px;font-size:12px;outline:0}
|
||||
.o1n-tag-input::placeholder{color:#777}
|
||||
.o1n-tag-hint{margin-top:7px;color:#666;font-size:11px;line-height:1.35}
|
||||
.o1n-editor-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;padding:12px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
|
||||
.o1n-action{height:32px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.035);color:#aaa;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .15s}
|
||||
.o1n-action:hover{color:#e5e5e5;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16)}
|
||||
.o1n-action.primary{background:var(--o1n-blue);color:#fff;border-color:transparent;font-weight:700}
|
||||
.o1n-action.primary:hover{background:#6ca0ff;color:#fff}
|
||||
.o1n-action.accent{background:#d8b45b;color:#171717;border-color:transparent;font-weight:700}
|
||||
.o1n-action.accent:hover{background:#e3c474;color:#111}
|
||||
.o1n-action.danger:hover{background:rgba(215,101,101,.18);border-color:rgba(215,101,101,.32);color:#f0a0a0}
|
||||
.o1n-delete-confirm{grid-column:1 / -1;display:none;align-items:center;gap:7px;padding:7px 8px;border:1px solid rgba(215,101,101,.24);border-radius:7px;background:rgba(215,101,101,.08);color:#ccc;font-size:12px}
|
||||
.o1n-delete-confirm.show{display:flex}
|
||||
.o1n-delete-confirm span{flex:1;min-width:0}
|
||||
.o1n-mini-btn{height:24px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.06);color:#bbb;padding:0 8px;font-size:11px;cursor:pointer}
|
||||
.o1n-mini-btn.danger{background:rgba(215,101,101,.5);border-color:rgba(215,101,101,.3);color:#fff}
|
||||
#o1n-status{grid-column:1 / -1;height:16px;color:#777;font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
#o1n-import-file{display:none}
|
||||
@keyframes o1n-fade{from{opacity:0}to{opacity:1}}
|
||||
`;
|
||||
|
||||
function genId() {
|
||||
return Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
|
||||
}
|
||||
|
||||
function now() {
|
||||
return Date.now();
|
||||
}
|
||||
|
||||
function parseTags(value) {
|
||||
if (Array.isArray(value)) return value.map(String).map(s => s.trim()).filter(Boolean);
|
||||
return String(value || "")
|
||||
.split(/[,，、\s]+/)
|
||||
.map(s => s.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function makeNote(data = {}) {
|
||||
const ts = now();
|
||||
return {
|
||||
id: data.id || genId(),
|
||||
title: String(data.title || "未命名笔记"),
|
||||
tags: parseTags(data.tags || data.category || ""),
|
||||
content: String(data.content || ""),
|
||||
createdAt: data.createdAt || ts,
|
||||
updatedAt: data.updatedAt || ts,
|
||||
};
|
||||
}
|
||||
|
||||
function cloneNote(note) {
|
||||
return {
|
||||
...note,
|
||||
tags: [...(note.tags || [])],
|
||||
};
|
||||
}
|
||||
|
||||
function formatDate(ts) {
|
||||
const d = new Date(ts || now());
|
||||
const today = new Date();
|
||||
const pad = n => String(n).padStart(2, "0");
|
||||
if (d.toDateString() === today.toDateString()) {
|
||||
return `今天 ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
return `${pad(d.getMonth() + 1)}/${pad(d.getDate())}`;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? "")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function icon(name, size = 14) {
|
||||
const icons = {
|
||||
plus: `<path d="M12 5v14M5 12h14"/>`,
|
||||
search: `<circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>`,
|
||||
copy: `<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>`,
|
||||
insert: `<path d="M12 5v14"/><path d="M19 12H5"/>`,
|
||||
save: `<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/>`,
|
||||
trash: `<path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/>`,
|
||||
download: `<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/>`,
|
||||
upload: `<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/>`,
|
||||
node: `<rect x="3" y="4" width="7" height="7" rx="1"/><rect x="14" y="13" width="7" height="7" rx="1"/><path d="M10 7.5h3a4 4 0 014 4V13"/>`,
|
||||
close: `<path d="M18 6L6 18M6 6l12 12"/>`,
|
||||
};
|
||||
return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${icons[name] || icons.plus}</svg>`;
|
||||
}
|
||||
|
||||
function injectStyles() {
|
||||
if (document.getElementById(STYLE_ID)) return;
|
||||
const el = document.createElement("style");
|
||||
el.id = STYLE_ID;
|
||||
el.textContent = CSS;
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
|
||||
function loadNotes() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
notes = raw ? JSON.parse(raw).map(makeNote) : [];
|
||||
} catch {
|
||||
notes = [];
|
||||
}
|
||||
|
||||
if (!localStorage.getItem(SEEDED_KEY)) {
|
||||
const existingTitles = new Set(notes.map(n => n.title));
|
||||
const samples = SAMPLE_NOTES.map(makeNote).filter(n => !existingTitles.has(n.title));
|
||||
notes = [...samples, ...notes];
|
||||
localStorage.setItem(SEEDED_KEY, "1");
|
||||
saveNotes();
|
||||
}
|
||||
}
|
||||
|
||||
function saveNotes() {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function allTags() {
|
||||
const counts = new Map();
|
||||
for (const note of notes) {
|
||||
for (const tag of note.tags || []) counts.set(tag, (counts.get(tag) || 0) + 1);
|
||||
}
|
||||
return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 12);
|
||||
}
|
||||
|
||||
function filteredNotes() {
|
||||
const q = searchText.trim().toLowerCase();
|
||||
return notes.filter(note => {
|
||||
if (activeFilter.startsWith("tag:") && !(note.tags || []).includes(activeFilter.slice(4))) return false;
|
||||
if (!q) return true;
|
||||
return [note.title, note.content, ...(note.tags || [])].join("\n").toLowerCase().includes(q);
|
||||
}).sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
|
||||
}
|
||||
|
||||
app.registerExtension({
|
||||
name: "o1key.notePanel",
|
||||
async setup() {
|
||||
loadNotes();
|
||||
app.extensionManager.registerSidebarTab({
|
||||
id: "o1key-notes",
|
||||
title: "笔记",
|
||||
icon: "pi pi-pencil",
|
||||
type: "custom",
|
||||
render: (container) => {
|
||||
injectStyles();
|
||||
renderNotePanel(container);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function renderNotePanel(container) {
|
||||
container.innerHTML = "";
|
||||
container.style.position = "relative";
|
||||
container.style.height = "100%";
|
||||
container.style.overflow = "hidden";
|
||||
|
||||
const root = document.createElement("div");
|
||||
root.id = "o1key-notes-root";
|
||||
root.innerHTML = `
|
||||
<div id="o1key-notes-header">
|
||||
<div class="o1n-title-row">
|
||||
<div class="o1n-title">笔记</div>
|
||||
<div class="o1n-head-actions">
|
||||
<button class="o1n-icon-btn" id="o1n-import" title="导入 JSON">${icon("upload")}</button>
|
||||
<button class="o1n-icon-btn" id="o1n-export" title="导出 JSON">${icon("download")}</button>
|
||||
<button class="o1n-icon-btn primary" id="o1n-new" title="新建笔记">${icon("plus")}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="o1n-search-box">${icon("search", 13)}<input id="o1n-search" placeholder="搜索笔记内容或标签" value="${escapeHtml(searchText)}"></div>
|
||||
<div class="o1n-tag-strip" id="o1n-tag-strip"></div>
|
||||
<div id="o1n-panel-status"></div>
|
||||
</div>
|
||||
<div id="o1key-notes-list"></div>
|
||||
<input id="o1n-import-file" type="file" accept=".json,application/json">
|
||||
`;
|
||||
container.appendChild(root);
|
||||
noteContainer = root;
|
||||
bindPanelEvents(root);
|
||||
renderTagFilters();
|
||||
renderList();
|
||||
renderEditor();
|
||||
}
|
||||
|
||||
function bindPanelEvents(root) {
|
||||
root.querySelector("#o1n-new").addEventListener("click", createNote);
|
||||
root.querySelector("#o1n-export").addEventListener("click", exportNotes);
|
||||
root.querySelector("#o1n-import").addEventListener("click", () => root.querySelector("#o1n-import-file").click());
|
||||
root.querySelector("#o1n-import-file").addEventListener("change", importNotes);
|
||||
root.querySelector("#o1n-search").addEventListener("input", (e) => {
|
||||
searchText = e.target.value;
|
||||
renderList();
|
||||
});
|
||||
}
|
||||
|
||||
function renderTagFilters() {
|
||||
const row = noteContainer?.querySelector("#o1n-tag-strip");
|
||||
if (!row) return;
|
||||
const tags = allTags();
|
||||
row.innerHTML = `<button class="o1n-tag-filter${activeFilter === "all" ? " active" : ""}" data-filter="all">全部 <span>${notes.length}</span></button>` +
|
||||
tags.map(([tag, count]) => {
|
||||
const filter = `tag:${tag}`;
|
||||
return `<button class="o1n-tag-filter${activeFilter === filter ? " active" : ""}" data-filter="${escapeHtml(filter)}">#${escapeHtml(tag)} <span>${count}</span></button>`;
|
||||
}).join("");
|
||||
|
||||
row.querySelectorAll("[data-filter]").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
activeFilter = btn.dataset.filter;
|
||||
renderTagFilters();
|
||||
renderList();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const list = noteContainer.querySelector("#o1key-notes-list");
|
||||
const visible = filteredNotes();
|
||||
|
||||
if (!visible.length) {
|
||||
list.innerHTML = `<div class="o1n-empty">没有匹配的笔记</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = visible.map(note => {
|
||||
const tags = (note.tags || []).slice(0, 3).map(tag => `<span class="o1n-tag">#${escapeHtml(tag)}</span>`).join("");
|
||||
return `<div class="o1n-item${note.id === editingNoteId ? " active" : ""}" data-id="${note.id}">
|
||||
<div class="o1n-item-top">
|
||||
<div class="o1n-item-title">${escapeHtml(note.title || "未命名笔记")}</div>
|
||||
<div class="o1n-item-edit">编辑</div>
|
||||
</div>
|
||||
<div class="o1n-item-text">${escapeHtml(note.content || "空笔记")}</div>
|
||||
<div class="o1n-item-meta"><div class="o1n-item-tags">${tags || `<span class="o1n-tag">#未分类</span>`}</div><span>${formatDate(note.updatedAt)}</span></div>
|
||||
</div>`;
|
||||
}).join("");
|
||||
|
||||
list.querySelectorAll(".o1n-item").forEach(item => {
|
||||
item.addEventListener("click", () => openEditor(item.dataset.id));
|
||||
});
|
||||
}
|
||||
|
||||
function renderEditor() {
|
||||
noteContainer.querySelector(".o1n-editor-backdrop")?.remove();
|
||||
if (!draftNote) return;
|
||||
pendingDelete = false;
|
||||
|
||||
const overlay = document.createElement("div");
|
||||
overlay.className = "o1n-editor-backdrop";
|
||||
overlay.innerHTML = `
|
||||
<div class="o1n-editor">
|
||||
<div class="o1n-editor-top">
|
||||
<div class="o1n-editor-title">${editingNoteId ? "编辑笔记" : "新建笔记"}</div>
|
||||
<button class="o1n-icon-btn" id="o1n-close-editor" title="关闭">${icon("close", 13)}</button>
|
||||
</div>
|
||||
<div class="o1n-editor-body">
|
||||
<input id="o1n-title-input" value="${escapeHtml(draftNote.title)}" placeholder="笔记标题">
|
||||
<div class="o1n-tag-editor">
|
||||
<div class="o1n-tag-row">
|
||||
${(draftNote.tags || []).map(tag => `<span class="o1n-tag-token">${escapeHtml(tag)} <span class="o1n-tag-remove" data-tag="${escapeHtml(tag)}">×</span></span>`).join("")}
|
||||
<input class="o1n-tag-input" id="o1n-tag-input" placeholder="＋ 添加标签">
|
||||
</div>
|
||||
<div class="o1n-tag-hint">输入标签后按 Enter，或用逗号分隔多个标签。</div>
|
||||
</div>
|
||||
<textarea id="o1n-content" placeholder="记录提示词、参数经验、踩坑结论...">${escapeHtml(draftNote.content)}</textarea>
|
||||
</div>
|
||||
<div class="o1n-editor-actions">
|
||||
<button class="o1n-action" id="o1n-cancel">取消</button>
|
||||
<button class="o1n-action" id="o1n-copy">${icon("copy", 13)}复制</button>
|
||||
<button class="o1n-action accent" id="o1n-insert">${icon("insert", 13)}插入</button>
|
||||
<button class="o1n-action" id="o1n-save-from-node">${icon("node", 13)}从节点保存</button>
|
||||
<button class="o1n-action danger" id="o1n-delete">${icon("trash", 13)}删除</button>
|
||||
<button class="o1n-action primary" id="o1n-save">${icon("save", 13)}保存</button>
|
||||
<div class="o1n-delete-confirm" id="o1n-delete-confirm">
|
||||
<span>确定删除这条笔记？</span>
|
||||
<button class="o1n-mini-btn danger" id="o1n-delete-yes">删除</button>
|
||||
<button class="o1n-mini-btn" id="o1n-delete-no">取消</button>
|
||||
</div>
|
||||
<div id="o1n-status"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
noteContainer.appendChild(overlay);
|
||||
bindEditorEvents(overlay);
|
||||
}
|
||||
|
||||
function bindEditorEvents(overlay) {
|
||||
overlay.querySelector("#o1n-close-editor").addEventListener("click", closeEditor);
|
||||
overlay.querySelector("#o1n-cancel").addEventListener("click", closeEditor);
|
||||
overlay.querySelector("#o1n-title-input").addEventListener("input", updateDraftFromEditor);
|
||||
overlay.querySelector("#o1n-content").addEventListener("input", updateDraftFromEditor);
|
||||
overlay.querySelectorAll(".o1n-tag-remove").forEach(btn => {
|
||||
btn.addEventListener("click", () => removeDraftTag(btn.dataset.tag));
|
||||
});
|
||||
overlay.querySelector("#o1n-tag-input").addEventListener("keydown", handleTagInputKeydown);
|
||||
overlay.querySelector("#o1n-tag-input").addEventListener("blur", commitTagInput);
|
||||
overlay.querySelector("#o1n-copy").addEventListener("click", copyDraftContent);
|
||||
overlay.querySelector("#o1n-insert").addEventListener("click", insertDraftContent);
|
||||
overlay.querySelector("#o1n-save-from-node").addEventListener("click", saveFromCurrentNode);
|
||||
overlay.querySelector("#o1n-delete").addEventListener("click", requestDeleteEditingNote);
|
||||
overlay.querySelector("#o1n-delete-yes").addEventListener("click", deleteEditingNote);
|
||||
overlay.querySelector("#o1n-delete-no").addEventListener("click", hideDeleteConfirm);
|
||||
overlay.querySelector("#o1n-save").addEventListener("click", saveDraft);
|
||||
}
|
||||
|
||||
function openEditor(id) {
|
||||
const note = notes.find(n => n.id === id);
|
||||
if (!note) return;
|
||||
editingNoteId = id;
|
||||
draftNote = cloneNote(note);
|
||||
renderList();
|
||||
renderEditor();
|
||||
}
|
||||
|
||||
function closeEditor() {
|
||||
editingNoteId = null;
|
||||
draftNote = null;
|
||||
pendingDelete = false;
|
||||
renderList();
|
||||
renderEditor();
|
||||
}
|
||||
|
||||
function createNote() {
|
||||
editingNoteId = null;
|
||||
draftNote = makeNote({ title: "新笔记", tags: ["未分类"], content: "" });
|
||||
renderList();
|
||||
renderEditor();
|
||||
noteContainer.querySelector("#o1n-title-input")?.focus();
|
||||
}
|
||||
|
||||
function updateDraftFromEditor() {
|
||||
if (!draftNote) return;
|
||||
draftNote.title = noteContainer.querySelector("#o1n-title-input")?.value.trim() || "未命名笔记";
|
||||
draftNote.content = noteContainer.querySelector("#o1n-content")?.value || "";
|
||||
draftNote.updatedAt = now();
|
||||
}
|
||||
|
||||
function addTagsFromText(value) {
|
||||
if (!draftNote) return false;
|
||||
const incoming = parseTags(value);
|
||||
if (!incoming.length) return false;
|
||||
const existing = new Set(draftNote.tags || []);
|
||||
for (const tag of incoming) existing.add(tag);
|
||||
draftNote.tags = [...existing];
|
||||
draftNote.updatedAt = now();
|
||||
renderDraftTags();
|
||||
return true;
|
||||
}
|
||||
|
||||
function commitTagInput() {
|
||||
const input = noteContainer?.querySelector("#o1n-tag-input");
|
||||
if (!input) return;
|
||||
if (addTagsFromText(input.value)) input.value = "";
|
||||
}
|
||||
|
||||
function handleTagInputKeydown(e) {
|
||||
if (e.key !== "Enter" && e.key !== "," && e.key !== "，") return;
|
||||
e.preventDefault();
|
||||
commitTagInput();
|
||||
}
|
||||
|
||||
function removeDraftTag(tag) {
|
||||
if (!draftNote) return;
|
||||
draftNote.tags = (draftNote.tags || []).filter(t => t !== tag);
|
||||
draftNote.updatedAt = now();
|
||||
renderDraftTags();
|
||||
}
|
||||
|
||||
function renderDraftTags() {
|
||||
const row = noteContainer?.querySelector(".o1n-tag-row");
|
||||
if (!row || !draftNote) return;
|
||||
row.innerHTML = `
|
||||
${(draftNote.tags || []).map(tag => `<span class="o1n-tag-token">${escapeHtml(tag)} <span class="o1n-tag-remove" data-tag="${escapeHtml(tag)}">×</span></span>`).join("")}
|
||||
<input class="o1n-tag-input" id="o1n-tag-input" placeholder="＋ 添加标签">
|
||||
`;
|
||||
row.querySelectorAll(".o1n-tag-remove").forEach(btn => {
|
||||
btn.addEventListener("click", () => removeDraftTag(btn.dataset.tag));
|
||||
});
|
||||
const input = row.querySelector("#o1n-tag-input");
|
||||
input.addEventListener("keydown", handleTagInputKeydown);
|
||||
input.addEventListener("blur", commitTagInput);
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function saveDraft() {
|
||||
if (!draftNote) return;
|
||||
updateDraftFromEditor();
|
||||
draftNote.tags = draftNote.tags?.length ? draftNote.tags : ["未分类"];
|
||||
if (editingNoteId) {
|
||||
const idx = notes.findIndex(n => n.id === editingNoteId);
|
||||
if (idx >= 0) notes[idx] = cloneNote(draftNote);
|
||||
} else {
|
||||
draftNote.id = genId();
|
||||
draftNote.createdAt = now();
|
||||
draftNote.updatedAt = now();
|
||||
notes.unshift(cloneNote(draftNote));
|
||||
editingNoteId = draftNote.id;
|
||||
}
|
||||
saveNotes();
|
||||
renderTagFilters();
|
||||
closeEditor();
|
||||
}
|
||||
|
||||
function requestDeleteEditingNote() {
|
||||
if (!editingNoteId) {
|
||||
closeEditor();
|
||||
return;
|
||||
}
|
||||
pendingDelete = true;
|
||||
const box = noteContainer?.querySelector("#o1n-delete-confirm");
|
||||
box?.classList.add("show");
|
||||
setStatus("");
|
||||
}
|
||||
|
||||
function hideDeleteConfirm() {
|
||||
pendingDelete = false;
|
||||
noteContainer?.querySelector("#o1n-delete-confirm")?.classList.remove("show");
|
||||
}
|
||||
|
||||
function deleteEditingNote() {
|
||||
if (!editingNoteId) {
|
||||
closeEditor();
|
||||
return;
|
||||
}
|
||||
const note = notes.find(n => n.id === editingNoteId);
|
||||
if (!note) return;
|
||||
notes = notes.filter(n => n.id !== editingNoteId);
|
||||
saveNotes();
|
||||
renderTagFilters();
|
||||
closeEditor();
|
||||
}
|
||||
|
||||
async function copyDraftContent() {
|
||||
updateDraftFromEditor();
|
||||
try {
|
||||
await navigator.clipboard.writeText(draftNote?.content || "");
|
||||
setStatus("已复制");
|
||||
} catch {
|
||||
setStatus("复制失败，请手动选择内容");
|
||||
}
|
||||
}
|
||||
|
||||
function insertDraftContent() {
|
||||
updateDraftFromEditor();
|
||||
const text = draftNote?.content || "";
|
||||
if (!text.trim()) {
|
||||
setStatus("当前笔记内容为空");
|
||||
return;
|
||||
}
|
||||
if (insertIntoFocusedInput(text) || insertIntoSelectedNode(text)) {
|
||||
setStatus("已插入");
|
||||
return;
|
||||
}
|
||||
navigator.clipboard?.writeText(text).catch(() => {});
|
||||
setStatus("未找到可插入位置，已复制内容");
|
||||
}
|
||||
|
||||
function setStatus(message) {
|
||||
const el = noteContainer?.querySelector("#o1n-status");
|
||||
if (!el) return;
|
||||
el.textContent = message;
|
||||
clearTimeout(setStatus._timer);
|
||||
setStatus._timer = setTimeout(() => {
|
||||
if (el.textContent === message) el.textContent = "";
|
||||
}, 2200);
|
||||
}
|
||||
|
||||
function setPanelStatus(message) {
|
||||
const el = noteContainer?.querySelector("#o1n-panel-status");
|
||||
if (!el) return;
|
||||
el.textContent = message;
|
||||
clearTimeout(setPanelStatus._timer);
|
||||
setPanelStatus._timer = setTimeout(() => {
|
||||
if (el.textContent === message) el.textContent = "";
|
||||
}, 2600);
|
||||
}
|
||||
|
||||
function insertIntoFocusedInput(text) {
|
||||
const el = document.activeElement;
|
||||
if (!el || noteContainer.contains(el)) return false;
|
||||
if (!(el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement)) return false;
|
||||
const start = el.selectionStart ?? el.value.length;
|
||||
const end = el.selectionEnd ?? el.value.length;
|
||||
const before = el.value.slice(0, start);
|
||||
const after = el.value.slice(end);
|
||||
const spacer = before && !before.endsWith("\n") ? "\n" : "";
|
||||
el.value = before + spacer + text + after;
|
||||
const pos = (before + spacer + text).length;
|
||||
el.setSelectionRange(pos, pos);
|
||||
el.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
el.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
return true;
|
||||
}
|
||||
|
||||
function findSelectedNode() {
|
||||
const selectedNodes = app.canvas?.selected_nodes;
|
||||
if (selectedNodes) {
|
||||
const values = Array.isArray(selectedNodes) ? selectedNodes : Object.values(selectedNodes);
|
||||
if (values.length) return values[0];
|
||||
}
|
||||
return app.canvas?.selected_node || null;
|
||||
}
|
||||
|
||||
function isPromptWidget(widget) {
|
||||
const name = String(widget?.name || "").toLowerCase();
|
||||
const value = widget?.value;
|
||||
if (typeof value !== "string") return false;
|
||||
return (
|
||||
name.includes("prompt") ||
|
||||
name.includes("提示词") ||
|
||||
name.includes("正向") ||
|
||||
name === "text" ||
|
||||
name === "文本"
|
||||
);
|
||||
}
|
||||
|
||||
function insertIntoSelectedNode(text) {
|
||||
const node = findSelectedNode();
|
||||
if (!node?.widgets?.length) return false;
|
||||
const widget = node.widgets.find(isPromptWidget) || node.widgets.find(w => typeof w.value === "string");
|
||||
if (!widget) return false;
|
||||
const current = widget.value || "";
|
||||
const spacer = current && !current.endsWith("\n") ? "\n" : "";
|
||||
widget.value = current + spacer + text;
|
||||
widget.callback?.(widget.value, app.canvas, node, widget);
|
||||
app.graph?.setDirtyCanvas?.(true, true);
|
||||
return true;
|
||||
}
|
||||
|
||||
function getPromptWidgetsFromSelectedNode() {
|
||||
const node = findSelectedNode();
|
||||
if (!node?.widgets?.length) return [];
|
||||
return node.widgets.filter(w => typeof w.value === "string" && String(w.value).trim());
|
||||
}
|
||||
|
||||
function saveFromCurrentNode() {
|
||||
const widgets = getPromptWidgetsFromSelectedNode();
|
||||
if (!widgets.length) {
|
||||
setStatus("当前没有选中包含文本的节点");
|
||||
return;
|
||||
}
|
||||
|
||||
const preferred = widgets.find(isPromptWidget) || widgets[0];
|
||||
const node = findSelectedNode();
|
||||
draftNote = makeNote({
|
||||
title: `${node?.title || node?.type || "节点"}：${preferred.name || "提示词"}`,
|
||||
tags: [node?.title || node?.type || "节点"],
|
||||
content: preferred.value,
|
||||
});
|
||||
editingNoteId = null;
|
||||
renderEditor();
|
||||
setStatus("已读取当前节点内容，保存后写入笔记");
|
||||
}
|
||||
|
||||
function exportNotes() {
|
||||
const blob = new Blob([JSON.stringify(notes, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `o1key-notes-${new Date().toISOString().slice(0, 10)}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
async function importNotes(e) {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
try {
|
||||
const imported = JSON.parse(await file.text());
|
||||
const list = Array.isArray(imported) ? imported : imported.notes;
|
||||
if (!Array.isArray(list)) throw new Error("Invalid notes file");
|
||||
const existing = new Set(notes.map(n => n.id));
|
||||
const normalized = list.map(makeNote).map(n => {
|
||||
if (existing.has(n.id)) n.id = genId();
|
||||
return n;
|
||||
});
|
||||
notes = [...normalized, ...notes];
|
||||
saveNotes();
|
||||
renderTagFilters();
|
||||
renderList();
|
||||
setPanelStatus(`已导入 ${normalized.length} 条笔记`);
|
||||
} catch {
|
||||
setPanelStatus("导入失败，请确认 JSON 格式");
|
||||
}
|
||||
}
|
||||
+319
-5
@@ -25,6 +25,7 @@ const STYLES = `
|
||||
.pb-toolbar .pb-sep { width:1px; height:24px; background:#555; margin:0 4px; }
|
||||
.pb-toolbar input[type=color] { width:32px; height:28px; border:none; padding:0; cursor:pointer; border-radius:4px; }
|
||||
.pb-toolbar input[type=range] { width:80px; accent-color:#0066ff; }
|
||||
.pb-toolbar input.pb-mosaic-size { width:90px; }
|
||||
.pb-toolbar .pb-label { color:#aaa; font-size:12px; }
|
||||
.pb-canvas-wrap { border:2px solid #444; border-radius:4px; overflow:hidden; }
|
||||
.pb-actions { display:flex; gap:10px; margin-top:10px; }
|
||||
@@ -41,6 +42,64 @@ function injectStyles() {
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
|
||||
function clamp(value, min, max) {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
const PB_EXPORT_PROPS = ["pbTool"];
|
||||
|
||||
function clampPointer(canvas, pointer) {
|
||||
return {
|
||||
x: clamp(pointer.x, 0, canvas.width),
|
||||
y: clamp(pointer.y, 0, canvas.height),
|
||||
};
|
||||
}
|
||||
|
||||
function makeCircleCursor(size) {
|
||||
const cursorSize = clamp(Math.round(size), 18, 80);
|
||||
const center = cursorSize / 2;
|
||||
const hotspot = Math.round(center);
|
||||
const radius = Math.max(3, center - 2);
|
||||
const svg = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="${cursorSize}" height="${cursorSize}" viewBox="0 0 ${cursorSize} ${cursorSize}">
|
||||
<circle cx="${center}" cy="${center}" r="${radius}" fill="none" stroke="black" stroke-width="3"/>
|
||||
<circle cx="${center}" cy="${center}" r="${radius}" fill="none" stroke="white" stroke-width="1.5"/>
|
||||
</svg>
|
||||
`.trim();
|
||||
return `url("data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}") ${hotspot} ${hotspot}, crosshair`;
|
||||
}
|
||||
|
||||
function applyMosaicCursor(canvas, state) {
|
||||
const cursor = makeCircleCursor(state.mosaicSize);
|
||||
canvas.defaultCursor = cursor;
|
||||
canvas.hoverCursor = cursor;
|
||||
}
|
||||
|
||||
function configureMosaicObject(obj) {
|
||||
obj.set({
|
||||
selectable: false,
|
||||
hasControls: false,
|
||||
hasBorders: false,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
lockScalingX: true,
|
||||
lockScalingY: true,
|
||||
lockRotation: true,
|
||||
perPixelTargetFind: true,
|
||||
objectCaching: false,
|
||||
});
|
||||
obj.pbTool = "mosaic";
|
||||
return obj;
|
||||
}
|
||||
|
||||
function normalizeMosaicObjects(canvas) {
|
||||
canvas.getObjects().forEach((obj) => {
|
||||
if (obj.pbTool === "mosaic" || obj.type === "image") {
|
||||
configureMosaicObject(obj);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Get current image URL from node ---
|
||||
function getImageUrl(node) {
|
||||
if (node.imgs && node.imgs.length > 0) {
|
||||
@@ -71,7 +130,7 @@ class HistoryManager {
|
||||
if (this.locked) return;
|
||||
this.index++;
|
||||
this.stack.length = this.index;
|
||||
this.stack.push(this.canvas.toJSON());
|
||||
this.stack.push(this.canvas.toJSON(PB_EXPORT_PROPS));
|
||||
}
|
||||
undo() {
|
||||
if (this.index <= 0) return;
|
||||
@@ -86,6 +145,7 @@ class HistoryManager {
|
||||
_restore() {
|
||||
this.locked = true;
|
||||
this.canvas.loadFromJSON(this.stack[this.index], () => {
|
||||
normalizeMosaicObjects(this.canvas);
|
||||
this.canvas.renderAll();
|
||||
this.locked = false;
|
||||
});
|
||||
@@ -97,7 +157,7 @@ function setupShapeDrawing(canvas, state) {
|
||||
let startX, startY, shape;
|
||||
|
||||
canvas.on("mouse:down", (opt) => {
|
||||
if (state.tool === "select" || state.tool === "brush") return;
|
||||
if (state.tool === "select" || state.tool === "brush" || state.tool === "eraser" || state.tool === "mosaic") return;
|
||||
const ptr = canvas.getPointer(opt.e);
|
||||
startX = ptr.x;
|
||||
startY = ptr.y;
|
||||
@@ -132,12 +192,247 @@ function setupShapeDrawing(canvas, state) {
|
||||
});
|
||||
|
||||
canvas.on("mouse:up", () => {
|
||||
if (!state.drawing) return;
|
||||
if (!state.drawing || !shape) return;
|
||||
state.drawing = false;
|
||||
shape = null;
|
||||
});
|
||||
}
|
||||
|
||||
// --- Mosaic brush handler ---
|
||||
function createMosaicSource(sourceImg, canvas, blockSize) {
|
||||
const scaleX = canvas.width / sourceImg.width;
|
||||
const scaleY = canvas.height / sourceImg.height;
|
||||
const sourceBlockSize = Math.max(1, Math.round(blockSize / Math.min(scaleX, scaleY)));
|
||||
const smallW = Math.max(1, Math.ceil(sourceImg.width / sourceBlockSize));
|
||||
const smallH = Math.max(1, Math.ceil(sourceImg.height / sourceBlockSize));
|
||||
|
||||
const smallCanvas = document.createElement("canvas");
|
||||
smallCanvas.width = smallW;
|
||||
smallCanvas.height = smallH;
|
||||
const smallCtx = smallCanvas.getContext("2d");
|
||||
smallCtx.imageSmoothingEnabled = true;
|
||||
smallCtx.drawImage(sourceImg, 0, 0, sourceImg.width, sourceImg.height, 0, 0, smallW, smallH);
|
||||
|
||||
const pixelCanvas = document.createElement("canvas");
|
||||
pixelCanvas.width = sourceImg.width;
|
||||
pixelCanvas.height = sourceImg.height;
|
||||
const pixelCtx = pixelCanvas.getContext("2d");
|
||||
pixelCtx.imageSmoothingEnabled = false;
|
||||
pixelCtx.drawImage(smallCanvas, 0, 0, smallW, smallH, 0, 0, sourceImg.width, sourceImg.height);
|
||||
|
||||
return pixelCanvas;
|
||||
}
|
||||
|
||||
function getMosaicBrushBounds(sourceImg, canvas, centerX, centerY, size) {
|
||||
const scaleX = canvas.width / sourceImg.width;
|
||||
const scaleY = canvas.height / sourceImg.height;
|
||||
const sourceX = centerX / scaleX;
|
||||
const sourceY = centerY / scaleY;
|
||||
const radiusX = Math.max(1, (size / 2) / scaleX);
|
||||
const radiusY = Math.max(1, (size / 2) / scaleY);
|
||||
|
||||
return {
|
||||
centerX: sourceX,
|
||||
centerY: sourceY,
|
||||
radius: Math.max(radiusX, radiusY),
|
||||
left: clamp(Math.floor(sourceX - radiusX), 0, sourceImg.width),
|
||||
top: clamp(Math.floor(sourceY - radiusY), 0, sourceImg.height),
|
||||
right: clamp(Math.ceil(sourceX + radiusX), 0, sourceImg.width),
|
||||
bottom: clamp(Math.ceil(sourceY + radiusY), 0, sourceImg.height),
|
||||
};
|
||||
}
|
||||
|
||||
function expandMosaicBounds(bounds, brushBounds) {
|
||||
if (!bounds.left && bounds.left !== 0) {
|
||||
bounds.left = brushBounds.left;
|
||||
bounds.top = brushBounds.top;
|
||||
bounds.right = brushBounds.right;
|
||||
bounds.bottom = brushBounds.bottom;
|
||||
return;
|
||||
}
|
||||
bounds.left = Math.min(bounds.left, brushBounds.left);
|
||||
bounds.top = Math.min(bounds.top, brushBounds.top);
|
||||
bounds.right = Math.max(bounds.right, brushBounds.right);
|
||||
bounds.bottom = Math.max(bounds.bottom, brushBounds.bottom);
|
||||
}
|
||||
|
||||
function paintMosaicStamp(sourceImg, canvas, mosaicSource, strokeCtx, bounds, point) {
|
||||
const brushBounds = getMosaicBrushBounds(sourceImg, canvas, point.x, point.y, point.size);
|
||||
if (brushBounds.right <= brushBounds.left || brushBounds.bottom <= brushBounds.top) return false;
|
||||
|
||||
strokeCtx.save();
|
||||
strokeCtx.beginPath();
|
||||
strokeCtx.arc(brushBounds.centerX, brushBounds.centerY, brushBounds.radius, 0, Math.PI * 2);
|
||||
strokeCtx.clip();
|
||||
strokeCtx.drawImage(
|
||||
mosaicSource,
|
||||
brushBounds.left,
|
||||
brushBounds.top,
|
||||
brushBounds.right - brushBounds.left,
|
||||
brushBounds.bottom - brushBounds.top,
|
||||
brushBounds.left,
|
||||
brushBounds.top,
|
||||
brushBounds.right - brushBounds.left,
|
||||
brushBounds.bottom - brushBounds.top
|
||||
);
|
||||
strokeCtx.restore();
|
||||
|
||||
expandMosaicBounds(bounds, brushBounds);
|
||||
return true;
|
||||
}
|
||||
|
||||
function paintMosaicLine(sourceImg, canvas, mosaicSource, strokeCtx, bounds, from, to, size) {
|
||||
const dx = to.x - from.x;
|
||||
const dy = to.y - from.y;
|
||||
const distance = Math.hypot(dx, dy);
|
||||
const step = Math.max(2, size * 0.25);
|
||||
const steps = Math.max(1, Math.ceil(distance / step));
|
||||
let painted = false;
|
||||
|
||||
for (let i = 1; i <= steps; i++) {
|
||||
const t = i / steps;
|
||||
painted = paintMosaicStamp(sourceImg, canvas, mosaicSource, strokeCtx, bounds, {
|
||||
x: from.x + dx * t,
|
||||
y: from.y + dy * t,
|
||||
size,
|
||||
}) || painted;
|
||||
}
|
||||
|
||||
return painted;
|
||||
}
|
||||
|
||||
function createMosaicStrokeObject(strokeCanvas, bounds, canvas, sourceImg) {
|
||||
const width = bounds.right - bounds.left;
|
||||
const height = bounds.bottom - bounds.top;
|
||||
if (width < 1 || height < 1) return Promise.resolve(null);
|
||||
|
||||
const cropCanvas = document.createElement("canvas");
|
||||
cropCanvas.width = width;
|
||||
cropCanvas.height = height;
|
||||
cropCanvas.getContext("2d").drawImage(
|
||||
strokeCanvas,
|
||||
bounds.left,
|
||||
bounds.top,
|
||||
width,
|
||||
height,
|
||||
0,
|
||||
0,
|
||||
width,
|
||||
height
|
||||
);
|
||||
|
||||
const scaleX = canvas.width / sourceImg.width;
|
||||
const scaleY = canvas.height / sourceImg.height;
|
||||
const dataUrl = cropCanvas.toDataURL("image/png");
|
||||
return new Promise(resolve => {
|
||||
fabric.Image.fromURL(dataUrl, (imgObj) => {
|
||||
configureMosaicObject(imgObj).set({
|
||||
left: bounds.left * scaleX,
|
||||
top: bounds.top * scaleY,
|
||||
scaleX,
|
||||
scaleY,
|
||||
});
|
||||
resolve(imgObj);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupMosaicDrawing(canvas, state, sourceImg, history) {
|
||||
let lastPoint, mosaicSource, strokeCanvas, strokeCtx, strokePreview, strokeBounds, strokePainted;
|
||||
|
||||
const refreshPreview = () => {
|
||||
if (!strokePreview) return;
|
||||
strokePreview.dirty = true;
|
||||
canvas.requestRenderAll();
|
||||
};
|
||||
|
||||
canvas.on("mouse:down", (opt) => {
|
||||
if (state.tool !== "mosaic") return;
|
||||
const ptr = clampPointer(canvas, canvas.getPointer(opt.e));
|
||||
lastPoint = ptr;
|
||||
state.drawing = true;
|
||||
strokePainted = false;
|
||||
strokeBounds = {};
|
||||
mosaicSource = createMosaicSource(sourceImg, canvas, state.mosaicSize);
|
||||
|
||||
strokeCanvas = document.createElement("canvas");
|
||||
strokeCanvas.width = sourceImg.width;
|
||||
strokeCanvas.height = sourceImg.height;
|
||||
strokeCtx = strokeCanvas.getContext("2d");
|
||||
strokeCtx.imageSmoothingEnabled = false;
|
||||
|
||||
strokePreview = new fabric.Image(strokeCanvas, {
|
||||
left: 0,
|
||||
top: 0,
|
||||
scaleX: canvas.width / sourceImg.width,
|
||||
scaleY: canvas.height / sourceImg.height,
|
||||
selectable: false,
|
||||
evented: false,
|
||||
excludeFromExport: true,
|
||||
objectCaching: false,
|
||||
});
|
||||
|
||||
history.locked = true;
|
||||
canvas.add(strokePreview);
|
||||
history.locked = false;
|
||||
|
||||
strokePainted = paintMosaicStamp(sourceImg, canvas, mosaicSource, strokeCtx, strokeBounds, {
|
||||
x: ptr.x,
|
||||
y: ptr.y,
|
||||
size: state.mosaicSize,
|
||||
}) || strokePainted;
|
||||
refreshPreview();
|
||||
});
|
||||
|
||||
canvas.on("mouse:move", (opt) => {
|
||||
if (state.tool !== "mosaic" || !state.drawing || !strokeCtx || !lastPoint) return;
|
||||
const ptr = clampPointer(canvas, canvas.getPointer(opt.e));
|
||||
strokePainted = paintMosaicLine(
|
||||
sourceImg,
|
||||
canvas,
|
||||
mosaicSource,
|
||||
strokeCtx,
|
||||
strokeBounds,
|
||||
lastPoint,
|
||||
ptr,
|
||||
state.mosaicSize
|
||||
) || strokePainted;
|
||||
lastPoint = ptr;
|
||||
refreshPreview();
|
||||
});
|
||||
|
||||
canvas.on("mouse:up", async () => {
|
||||
if (!state.drawing || !strokePreview) return;
|
||||
|
||||
history.locked = true;
|
||||
canvas.remove(strokePreview);
|
||||
history.locked = false;
|
||||
state.drawing = false;
|
||||
lastPoint = null;
|
||||
|
||||
if (!strokePainted) {
|
||||
strokeCanvas = null;
|
||||
strokeCtx = null;
|
||||
strokePreview = null;
|
||||
mosaicSource = null;
|
||||
canvas.renderAll();
|
||||
return;
|
||||
}
|
||||
|
||||
const mosaicObj = await createMosaicStrokeObject(strokeCanvas, strokeBounds, canvas, sourceImg);
|
||||
mosaicSource = null;
|
||||
strokeCanvas = null;
|
||||
strokeCtx = null;
|
||||
strokePreview = null;
|
||||
|
||||
if (mosaicObj) {
|
||||
canvas.add(mosaicObj);
|
||||
canvas.discardActiveObject();
|
||||
}
|
||||
canvas.renderAll();
|
||||
});
|
||||
}
|
||||
|
||||
// --- Open Paint Modal ---
|
||||
async function openPaintModal(node) {
|
||||
injectStyles();
|
||||
@@ -192,7 +487,7 @@ async function openPaintModal(node) {
|
||||
const cw = Math.round(img.width * scale);
|
||||
const ch = Math.round(img.height * scale);
|
||||
|
||||
const state = { tool: "brush", color: "#ff0000", width: 4, drawing: false };
|
||||
const state = { tool: "brush", color: "#ff0000", width: 4, mosaicSize: 14, drawing: false };
|
||||
|
||||
const toolbar = buildToolbar(state);
|
||||
overlay.appendChild(toolbar);
|
||||
@@ -222,6 +517,7 @@ async function openPaintModal(node) {
|
||||
if (savedState) {
|
||||
await new Promise(resolve => {
|
||||
canvas.loadFromJSON(savedState, () => {
|
||||
normalizeMosaicObjects(canvas);
|
||||
// Re-apply background since loadFromJSON may clear it
|
||||
canvas.setBackgroundImage(bgUrl, () => { canvas.renderAll(); resolve(); }, {
|
||||
scaleX: cw / img.width, scaleY: ch / img.height, crossOrigin: "anonymous"
|
||||
@@ -238,6 +534,7 @@ async function openPaintModal(node) {
|
||||
|
||||
// Shape drawing
|
||||
setupShapeDrawing(canvas, state);
|
||||
setupMosaicDrawing(canvas, state, img, history);
|
||||
wireToolbar(toolbar, canvas, state, history);
|
||||
|
||||
// Actions buttons
|
||||
@@ -265,7 +562,7 @@ async function openPaintModal(node) {
|
||||
// Confirm - save painted image and store canvas state for re-editing
|
||||
actions.querySelector(".pb-confirm").onclick = async () => {
|
||||
// Save canvas objects (without background) for future re-editing
|
||||
node.properties.paintBrushCanvas = canvas.toJSON();
|
||||
node.properties.paintBrushCanvas = canvas.toJSON(PB_EXPORT_PROPS);
|
||||
node.graph?.change?.();
|
||||
await savePaintedImage(canvas, node, img.width, img.height);
|
||||
close();
|
||||
@@ -326,12 +623,15 @@ function buildToolbar(state) {
|
||||
<button data-tool="rect">矩形</button>
|
||||
<button data-tool="circle">圆形</button>
|
||||
<button data-tool="line">直线</button>
|
||||
<button data-tool="mosaic">马赛克</button>
|
||||
<button data-tool="eraser">橡皮擦</button>
|
||||
<span class="pb-sep"></span>
|
||||
<span class="pb-label">颜色</span>
|
||||
<input type="color" class="pb-color" value="${state.color}">
|
||||
<span class="pb-label">线宽</span>
|
||||
<input type="range" class="pb-width" min="1" max="40" value="${state.width}">
|
||||
<span class="pb-label">块大小</span>
|
||||
<input type="range" class="pb-mosaic-size" min="4" max="80" value="${state.mosaicSize}">
|
||||
<span class="pb-sep"></span>
|
||||
<button data-action="undo">撤回</button>
|
||||
<button data-action="clear">清空</button>
|
||||
@@ -351,6 +651,8 @@ function wireToolbar(toolbar, canvas, state, history) {
|
||||
if (state.tool === "brush") {
|
||||
canvas.isDrawingMode = true;
|
||||
canvas.selection = false;
|
||||
canvas.defaultCursor = "default";
|
||||
canvas.hoverCursor = "move";
|
||||
canvas.freeDrawingBrush.color = state.color;
|
||||
canvas.freeDrawingBrush.width = state.width;
|
||||
} else if (state.tool === "eraser") {
|
||||
@@ -359,6 +661,11 @@ function wireToolbar(toolbar, canvas, state, history) {
|
||||
canvas.selection = true;
|
||||
canvas.defaultCursor = "crosshair";
|
||||
canvas.hoverCursor = "pointer";
|
||||
} else if (state.tool === "mosaic") {
|
||||
canvas.isDrawingMode = false;
|
||||
canvas.selection = false;
|
||||
canvas.discardActiveObject();
|
||||
applyMosaicCursor(canvas, state);
|
||||
} else {
|
||||
canvas.isDrawingMode = false;
|
||||
canvas.selection = false;
|
||||
@@ -396,6 +703,13 @@ function wireToolbar(toolbar, canvas, state, history) {
|
||||
}
|
||||
};
|
||||
|
||||
toolbar.querySelector(".pb-mosaic-size").oninput = (e) => {
|
||||
state.mosaicSize = parseInt(e.target.value);
|
||||
if (state.tool === "mosaic") {
|
||||
applyMosaicCursor(canvas, state);
|
||||
}
|
||||
};
|
||||
|
||||
// Action buttons
|
||||
toolbar.querySelector("[data-action=undo]").onclick = () => history.undo();
|
||||
toolbar.querySelector("[data-action=clear]").onclick = () => {
|
||||
|
||||
Reference in New Issue
Block a user