${buildControlRow("shape", t("ui_shape") + " (ms)", settings.shapeDuration.value, 100, 5000, 100)}
${buildControlRow("freedraw", t("ui_freedraw") + " (ms)", settings.freedrawDuration.value, 100, 5000, 100)}
${buildControlRow("gap", t("ui_gap") + " (0-1)", settings.gapRatio.value, 0, 1, 0.05)}
`;
document.body.appendChild(panel);
updatePlaybackUI();
setTimeout(() => {
panel.style.opacity = "1";
panel.style.transform = "scale(1)";
}, 10);
const header = panel.querySelector("#drag-header");
let isDragging = false, startX, startY, initialLeft, initialTop;
header.addEventListener("mousedown", (e) => {
isDragging = true;
header.style.cursor = "grabbing";
startX = e.clientX;
startY = e.clientY;
const rect = panel.getBoundingClientRect();
initialLeft = rect.left;
initialTop = rect.top;
panel.style.right = 'auto';
panel.style.bottom = 'auto';
panel.style.left = initialLeft + "px";
panel.style.top = initialTop + "px";
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
panel.style.left = `${initialLeft + dx}px`;
panel.style.top = `${initialTop + dy}px`;
});
document.addEventListener("mouseup", () => {
isDragging = false;
header.style.cursor = "grab";
});
const bindControls = (id) => {
const inp = panel.querySelector(`#inp-${id}`);
const slider = panel.querySelector(`#slider-${id}`);
inp.addEventListener('input', () => { slider.value = inp.value; });
slider.addEventListener('input', () => { inp.value = slider.value; });
};
["shape", "freedraw", "text", "gap"].forEach(bindControls);
const textModeChk = panel.querySelector("#chk-text-mode");
const textModeLbl = panel.querySelector("#lbl-text-mode");
const inpText = panel.querySelector("#inp-text");
const sliderText = panel.querySelector("#slider-text");
const applyTextModeBounds = (perChar) => {
if (perChar) {
textModeLbl.innerText = t("ui_text_mode_perchar");
inpText.min = 10; inpText.max = 500; inpText.step = 10;
sliderText.min = 10; sliderText.max = 500; sliderText.step = 10;
} else {
textModeLbl.innerText = t("ui_text_mode_total");
inpText.min = 100; inpText.max = 5000; inpText.step = 100;
sliderText.min = 100; sliderText.max = 5000; sliderText.step = 100;
}
};
textModeChk.onchange = (e) => {
const perChar = e.target.checked;
applyTextModeBounds(perChar);
let val = Number(inpText.value);
if (perChar) {
val = Math.max(10, Math.min(500, Math.floor(val / 10)));
} else {
val = Math.max(100, Math.min(5000, val * 10));
}
inpText.value = val;
sliderText.value = val;
};
const getCurrentConfig = () => ({
shapeDuration: Number(panel.querySelector("#inp-shape").value),
freedrawDuration: Number(panel.querySelector("#inp-freedraw").value),
textDuration: Number(panel.querySelector("#inp-text").value),
textDurationMode: panel.querySelector("#chk-text-mode").checked ? 'perChar' : 'total',
slideNavigation: panel.querySelector("#chk-slide-navigation").checked,
hideOnRun: panel.querySelector("#chk-hide").checked,
gapRatio: Number(panel.querySelector("#inp-gap").value),
targetMode: panel.querySelector("#sel-target").value
});
panel.querySelector("#btn-run").onclick = () => {
const config = getCurrentConfig();
if (config.hideOnRun) {
panel.dataset.hiddenMode = "true";
panel.style.opacity = "0";
panel.style.transform = "scale(0.95)";
panel.style.pointerEvents = "none";
setTimeout(() => { panel.style.display = "none"; }, 200);
new Notice(t("notice_hidden"));
} else {
panel.dataset.hiddenMode = "false";
}
startAnimation(config);
};
panel.querySelector("#btn-pause").onclick = () => {
if (!state.active) return;
if (state.paused) {
state.paused = false;
state.totalPausedDuration += performance.now() - state.pauseStartTime;
} else {
state.paused = true;
state.pauseStartTime = performance.now();
}
updatePlaybackUI();
};
panel.querySelector("#btn-stop").onclick = () => stopAnimation("notice_stop");
panel.querySelector("#btn-save").onclick = () => {
const config = getCurrentConfig();
settings["shapeDuration"].value = String(config.shapeDuration);
settings["freedrawDuration"].value = String(config.freedrawDuration);
settings["textDuration"].value = String(config.textDuration);
settings["textDurationMode"] = { value: config.textDurationMode };
settings["slideNavigation"] = { value: config.slideNavigation };
settings["hideOnRun"] = { value: config.hideOnRun };
settings["gapRatio"].value = String(config.gapRatio);
settings["targetMode"] = { value: config.targetMode };
ea.setScriptSettings(settings);
new Notice(t("notice_saved"));
};
const closePanel = (doStop = true) => {
panel.style.opacity = "0";
panel.style.transform = "scale(0.95)";
panel.style.pointerEvents = "none";
setTimeout(() => { if(panel.parentNode) panel.remove(); }, 200);
if(doStop && state.active) stopAnimation("notice_stop");
};
panel.querySelector("#btn-close").onclick = () => closePanel(true);
// ==========================================
// 5. 渲染核心工具集
// ==========================================
const drawProgressiveCode = (element, context, progress, payload) => {
const codeMap = window.ExcalidrawAutomate?.plugin?._ymjr_codeMap;
if (!codeMap) return false;
const cache = codeMap.get(element.id);
if (!cache || !cache.image || !cache.image.complete) return false;
const { appState, getElementAbsoluteCoords, allElementsMap } = payload;
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
const cx = (x1 + x2) / 2 + appState.scrollX;
const cy = (y1 + y2) / 2 + appState.scrollY;
let shiftX = (x2 - x1) / 2 - (element.x - x1);
let shiftY = (y2 - y1) / 2 - (element.y - y1);
context.save();
context.translate(cx, cy);
context.rotate(element.angle);
context.translate(-shiftX, -shiftY);
const styleTheme = element.customData?.codeHighlight?.style || 'atom-one-dark';
context.fillStyle = styleTheme.includes('light') ? '#fafafa' : '#282c34';
context.fillRect(-10, -10, element.width + 20, element.height + 20);
const textLength = element.text.length;
const visibleChars = Math.floor(textLength * progress);
const lines = element.text.split('\n');
let charsPassed = 0;
let currentLineIdx = 0;
let charsInCurrentLine = 0;
for (let i = 0; i < lines.length; i++) {
const lineLen = lines[i].length + 1;
if (charsPassed + lineLen > visibleChars) {
currentLineIdx = i;
charsInCurrentLine = Math.max(0, visibleChars - charsPassed);
break;
}
charsPassed += lineLen;
if (i === lines.length - 1) {
currentLineIdx = i;
charsInCurrentLine = lines[i].length;
}
}
const getVisualLen = (str) => {
let len = 0;
for (let i = 0; i < str.length; i++) {
const code = str.charCodeAt(i);
if (code === 9) len += 4;
else if (code > 255) len += 2;
else len += 1;
}
return len;
};
const visualMaxLineLen = Math.max(1, ...lines.map(getVisualLen));
const visualCurrentLen = getVisualLen(lines[currentLineIdx].substring(0, charsInCurrentLine));
const currentLineRatio = visualCurrentLen / visualMaxLineLen;
const lineHeight = element.height / lines.length;
context.beginPath();
const currentY = currentLineIdx * lineHeight;
if (currentLineIdx > 0) {
context.rect(-10, -10, element.width + 20, 10 + currentY + 1);
}
const currentMaskWidth = 10 + (element.width * currentLineRatio) + 15;
const currentH = currentLineIdx === 0 ? (lineHeight + 10) : (lineHeight + 2);
const startY = currentLineIdx === 0 ? -10 : (currentY - 1);
context.rect(-10, startY, currentMaskWidth, currentH);
context.clip();
context.drawImage(cache.image, -10, -10, element.width + 20, element.height + 20);
context.restore();
return true;
};
const drawProgressiveRoughShape = (element, rc, renderConfig, progress) => {
let shapeOrShapes = api.ShapeCache.generateElementShape(element, renderConfig);
if (!shapeOrShapes) return;
const shapes = Array.isArray(shapeOrShapes) ? shapeOrShapes : [shapeOrShapes];
shapes.forEach(drawable => {
if (!drawable || !drawable.sets) { rc.draw(drawable); return; }
const slicedSets = drawable.sets.map(set => {
if (set.type === 'path') {
let p = Math.min(1, progress / 0.7);
return { ...set, ops: set.ops.slice(0, Math.max(1, Math.floor(set.ops.length * p))) };
} else {
let p = Math.max(0, (progress - 0.7) / 0.3);
return { ...set, ops: set.ops.slice(0, Math.max(0, Math.floor(set.ops.length * p))) };
}
});
rc.draw({ ...drawable, sets: slicedSets });
});
};
const drawProgressiveFreedraw = (element, context, renderConfig, progress, payload) => {
const { allElementsMap, appState, getElementAbsoluteCoords } = payload;
const keepPoints = Math.max(2, Math.floor(element.points.length * progress));
const fakeElement = {
...element, id: element.id + "_f",
points: element.points.slice(0, keepPoints),
pressures: element.pressures ? element.pressures.slice(0, keepPoints) : []
};
const shapes = api.ShapeCache.generateElementShape(fakeElement, renderConfig) || [];
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
const cx = (x1 + x2) / 2 + appState.scrollX;
const cy = (y1 + y2) / 2 + appState.scrollY;
let shiftX = (x2 - x1) / 2 - (element.x - x1);
let shiftY = (y2 - y1) / 2 - (element.y - y1);
context.save();
context.translate(cx, cy);
context.rotate(element.angle);
context.translate(-shiftX, -shiftY);
for (const shape of shapes) {
if (typeof shape === "string") {
const path = new Path2D(shape);
const hasOutline = element.customData?.strokeOptions?.hasOutline;
context.fillStyle = hasOutline ? element.backgroundColor : element.strokeColor;
context.fill(path);
if (hasOutline) {
context.lineWidth = element.strokeWidth * (element.customData?.strokeOptions?.outlineWidth ?? 1);
context.strokeStyle = element.strokeColor;
context.stroke(path);
}
} else if (payload.rc) payload.rc.draw(shape);
}
context.restore();
};
const textRenderOffset = { x: 0, y: 0 };
const drawProgressiveText = (element, context, renderConfig, progress, payload) => {
const { allElementsMap, appState, generateElementWithCanvas, drawElementFromCanvas } = payload;
if (!generateElementWithCanvas || !drawElementFromCanvas) return false;
const sourceText = element.text || "";
const visibleChars = Math.floor(sourceText.length * progress);
if (visibleChars === 0) return true;
const visibleString = sourceText.substring(0, visibleChars);
const fakeElement = {
...element,
text: visibleString,
rawText: visibleString,
originalText: visibleString
};
const elementWithCanvas = generateElementWithCanvas(
fakeElement,
allElementsMap,
renderConfig,
appState
);
if (!elementWithCanvas) return false;
// The native cached-canvas renderer requires a scene-space position offset.
drawElementFromCanvas(
elementWithCanvas,
context,
renderConfig,
appState,
allElementsMap,
textRenderOffset
);
return true;
};
const handleRenderBefore = (payload) => {
if (!state.active) return false;
const { element, rc, context, renderConfig, appState, getElementAbsoluteCoords, allElementsMap } = payload;
const progress = state.progressMap.get(element.id);
if (progress === undefined) return true;
if (progress <= 0) {
return true;
}
if (progress >= 1) return false;
if (element.type === "image") { context.globalAlpha = progress; return false; }
if (element.type === "text" && element.customData?.codeHighlight) {
const isDrawn = drawProgressiveCode(element, context, progress, payload);
if (isDrawn) return true;
}
if (element.type === "text") return drawProgressiveText(element, context, renderConfig, progress, payload);
if (element.type === "freedraw") { drawProgressiveFreedraw(element, context, renderConfig, progress, payload); return true; }
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
const cx = (x1 + x2) / 2 + appState.scrollX;
const cy = (y1 + y2) / 2 + appState.scrollY;
let shiftX = (x2 - x1) / 2 - (element.x - x1);
let shiftY = (y2 - y1) / 2 - (element.y - y1);
context.save();
context.translate(cx, cy);
context.rotate(element.angle);
context.translate(-shiftX, -shiftY);
drawProgressiveRoughShape(element, rc, renderConfig, progress);
context.restore();
return true;
};
// ==========================================
// 6. 动画核心循环
// ==========================================
const applySlideTransition = (segment, progress) => {
if (!segment.from) {
const current = api.getAppState();
segment.from = {
scrollX: current.scrollX,
scrollY: current.scrollY,
zoom: current.zoom.value
};
}
const p = Math.max(0, Math.min(1, progress));
const target = segment.navigation;
api.updateScene({
appState: {
scrollX: segment.from.scrollX * (1 - p) - target.left * p,
scrollY: segment.from.scrollY * (1 - p) - target.top * p,
zoom: {
value: segment.from.zoom * (1 - p) + target.nextZoom * p
},
shouldCacheIgnoreZoom: p < 1
}
});
};
const loop = () => {
if (!state.active) return;
if (state.paused) {
state.reqId = requestAnimationFrame(loop);
return;
}
const elapsed = performance.now() - state.startTime - state.totalPausedDuration;
let needsUpdate = false;
state.elements.forEach(el => {
let progress = 0;
if (elapsed >= el._animEnd) progress = 1;
else if (elapsed > el._animStart && el._animEnd > el._animStart) {
progress = (elapsed - el._animStart) / (el._animEnd - el._animStart);
}
if (state.progressMap.get(el.id) !== progress) {
state.progressMap.set(el.id, progress);
needsUpdate = true;
}
});
let activeSlide = null;
for (const segment of state.timeline || []) {
if (segment.type !== "slide") continue;
if (elapsed >= segment.end) {
if (!segment.completed) {
applySlideTransition(segment, 1);
segment.completed = true;
}
} else if (elapsed >= segment.start) {
activeSlide = segment;
break;
}
}
if (activeSlide) {
const progress = (elapsed - activeSlide.start) /
(activeSlide.end - activeSlide.start);
applySlideTransition(activeSlide, progress);
}
if (needsUpdate) api.updateScene({ elements: api.getSceneElements() });
if (elapsed < state.totalDuration + 100) {
state.reqId = requestAnimationFrame(loop);
} else {
stopAnimation("notice_finish");
}
};