massivebox/siyuan-jsdraw-plugin
massivebox/siyuan-jsdraw-plugin
2
1
Fork 0
forked from mirrors/plugin-sample-vite-svelte
Code Issues 4 Pull requests Projects 3 Releases 7 Packages Wiki Activity Actions

Fix sync inconsistencies across devices

Browse source 
Changed APIs to upload assets, reworked saving logic so that files are synced across devices when changed locally.
This commit is contained in:
MassiveBox 2025-04-05 19:30:31 +02:00
parent e165c69664
commit 4555ec275f
Signed by: massivebox
GPG key ID: 9B74D3A59181947D
5 changed files with 104 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/editorTab.ts
View file

@ -2,37 +2,51 @@ import {Dialog, getFrontend, ITabModel, openTab, Plugin} from "siyuan"
import Editor, {BaseWidget, EditorEventType} from "js-draw";
import { MaterialIconProvider } from '@js-draw/material-icons';
import 'js-draw/styles';
import {getFile, saveFile} from "@/file";
import {getFile, saveFile, uploadAsset} from "@/file";
import {DATA_PATH, JSON_MIME, SVG_MIME, TOOLBAR_PATH} from "@/const";
import {replaceAntiCacheID} from "@/protyle";
import {idToPath} from "@/helper";
import {replaceSyncID} from "@/protyle";
import {IDsToAssetPath} from "@/helper";
import {removeFile} from "@/api";
export function openEditorTab(p: Plugin, path: string) {
export function openEditorTab(p: Plugin, fileID: string, initialSyncID: string) {
if(getFrontend() == "mobile") {
const dialog = new Dialog({
width: "100vw",
height: "100vh",
content: `<div id="DrawingPanel" style="width:100%; height: 100%;"></div>`,
});
createEditor(dialog.element.querySelector("#DrawingPanel"), path);
createEditor(dialog.element.querySelector("#DrawingPanel"), fileID, initialSyncID);
return;
}
for(const tab of p.getOpenedTab()["whiteboard"]) {
if(tab.data.fileID == fileID) {
alert("File is already open in another editor tab!");
return;
}
}
openTab({
app: p.app,
custom: {
title: 'Drawing',
icon: 'iconDraw',
id: "siyuan-jsdraw-pluginwhiteboard",
data: { path: path }
data: {
fileID: fileID,
initialSyncID: initialSyncID
}
}
});
}
async function saveCallback(editor: Editor, path: string, saveButton: BaseWidget) {
async function saveCallback(editor: Editor, fileID: string, oldSyncID: string, saveButton: BaseWidget): Promise<string> {
const svgElem = editor.toSVG();
let newSyncID;
try {
saveFile(DATA_PATH + path, SVG_MIME, svgElem.outerHTML);
await replaceAntiCacheID(path);
newSyncID = (await uploadAsset(fileID, SVG_MIME, svgElem.outerHTML)).syncID;
await replaceSyncID(fileID, oldSyncID, newSyncID);
await removeFile(DATA_PATH + IDsToAssetPath(fileID, oldSyncID));
saveButton.setDisabled(true);
setTimeout(() => { // @todo improve save button feedback
saveButton.setDisabled(false);
@ -41,11 +55,14 @@ async function saveCallback(editor: Editor, path: string, saveButton: BaseWidget
alert("Error saving drawing! Enter developer mode to find the error, and a copy of the current status.");
console.error(error);
console.log("Couldn't save SVG: ", svgElem.outerHTML)
return oldSyncID;
}
return newSyncID
}
export function createEditor(element: HTMLElement, path: string) {
export function createEditor(element: HTMLElement, fileID: string, initialSyncID: string) {
const editor = new Editor(element, {
iconProvider: new MaterialIconProvider(),
@ -60,14 +77,21 @@ export function createEditor(element: HTMLElement, path: string) {
}
});
// restore drawing
getFile(DATA_PATH + path).then(svg => {
getFile(DATA_PATH +IDsToAssetPath(fileID, initialSyncID)).then(svg => {
if(svg != null) {
editor.loadFromSVG(svg);
}
});
let syncID = initialSyncID;
// save logic
const saveButton = toolbar.addSaveButton(() => saveCallback(editor, path, saveButton));
const saveButton = toolbar.addSaveButton(() => {
saveCallback(editor, fileID, syncID, saveButton).then(
newSyncID => {
syncID = newSyncID
}
)
});
// save toolbar config on tool change (toolbar state is not saved in SVGs!)
editor.notifier.on(EditorEventType.ToolUpdated, () => {
@ -81,15 +105,12 @@ export function createEditor(element: HTMLElement, path: string) {
export function editorTabInit(tab: ITabModel) {
let path = tab.data.path;
if(path == null) {
const fileID = tab.data.id; // legacy compatibility
if (fileID == null) {
alert("File ID and path missing - couldn't open file.")
const fileID = tab.data.fileID;
const initialSyncID = tab.data.initialSyncID;
if (fileID == null || initialSyncID == null) {
alert("File or Sync ID and path missing - couldn't open file.")
return;
}
path = idToPath(fileID);
}
createEditor(tab.element, path);
createEditor(tab.element, fileID, initialSyncID);
}

17
src/file.ts
View file

@ -1,10 +1,25 @@
import {getFileBlob, putFile} from "@/api";
import {getFileBlob, putFile, upload} from "@/api";
import {ASSETS_PATH} from "@/const";
import {assetPathToIDs} from "@/helper";
function toFile(title: string, content: string, mimeType: string){
const blob = new Blob([content], { type: mimeType });
return new File([blob], title, { type: mimeType });
}
// upload asset to the assets folder, return fileID and syncID
export async function uploadAsset(fileID: string, mimeType: string, content: string) {
const file = toFile(fileID + ".svg", content, mimeType);
let r = await upload('/' + ASSETS_PATH, [file]);
if(r.errFiles) {
throw new Error("Failed to upload file");
}
return assetPathToIDs(r.succMap[file.name]);
}
export function saveFile(path: string, mimeType: string, content: string) {
const file = toFile(path.split('/').pop(), content, mimeType);

52
src/helper.ts
View file

@ -1,5 +1,5 @@
import { Plugin } from 'siyuan';
import {DATA_PATH, EMBED_PATH} from "@/const";
import {ASSETS_PATH} from "@/const";
const drawIcon: string = `
<symbol id="iconDraw" viewBox="0 0 28 28">
@ -23,7 +23,7 @@ export function getMenuHTML(icon: string, text: string): string {
`;
}
export function generateSiyuanId() {
export function generateTimeString() {
const now = new Date();
const year = now.getFullYear().toString();
@ -33,26 +33,45 @@ export function generateSiyuanId() {
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timestamp = `${year}${month}${day}${hours}${minutes}${seconds}`;
return `${year}${month}${day}${hours}${minutes}${seconds}`;
}
export function generateRandomString() {
const characters = 'abcdefghijklmnopqrstuvwxyz';
let random = '';
for (let i = 0; i < 7; i++) {
random += characters.charAt(Math.floor(Math.random() * characters.length));
}
return random;
return `${timestamp}-${random}`;
}
export function idToPath(id: string) {
return DATA_PATH + id + '.svg';
export function IDsToAssetPath(fileID: string, syncID: string) {
return `${ASSETS_PATH}${fileID}-${syncID}.svg`
}
export function assetPathToIDs(assetPath: string): { fileID: string; syncID: string } | null {
const filename = assetPath.split('/').pop() || '';
if (!filename.endsWith('.svg')) return null;
// Split into [basename, extension] and check format
const [basename] = filename.split('.');
const parts = basename.split('-');
// Must contain exactly 2 hyphens separating 3 non-empty parts
if (parts.length !== 3 || !parts[0] || !parts[1] || !parts[2]) return null;
return {
fileID: parts[0],
syncID: parts[1] + '-' + parts[2]
};
}
// [Edit](siyuan://plugins/siyuan-jsdraw-pluginwhiteboard/?icon=iconDraw&title=Drawing&data={"id":"${id}"})
// ![Drawing](assets/${id}.svg)
export function getPreviewHTML(path: string): string {
export function getMarkdownBlock(fileID: string, syncID: string): string {
return `
<iframe src="${EMBED_PATH + path}&antiCache=0"></iframe>
![Drawing](${IDsToAssetPath(fileID, syncID)})
`
}
@ -74,20 +93,13 @@ export function findImgSrc(element: HTMLElement): string | null {
return null;
}
export function imgSrcToPath(imgSrc: string | null): string | null {
export function imgSrcToIDs(imgSrc: string | null): { fileID: string; syncID: string } | null {
if (!imgSrc) return null;
const url = new URL(imgSrc);
imgSrc = decodeURIComponent(url.pathname);
if(imgSrc.startsWith('/assets/')) {
return imgSrc.substring(1);
}
return null
return assetPathToIDs(imgSrc);
}
// Helper to safely escape regex special characters
export function escapeRegExp(string: string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

22
src/index.ts
View file

@ -1,16 +1,15 @@
import {Plugin, Protyle} from 'siyuan';
import {
getPreviewHTML,
getMarkdownBlock,
loadIcons,
getMenuHTML,
generateSiyuanId,
findImgSrc,
imgSrcToPath
imgSrcToIDs, generateTimeString, generateRandomString
} from "@/helper";
import {editorTabInit, openEditorTab} from "@/editorTab";
import {ASSETS_PATH} from "@/const";
export default class DrawJSPlugin extends Plugin {
onload() {
loadIcons(this);
@ -24,22 +23,21 @@ export default class DrawJSPlugin extends Plugin {
filter: ["Insert Drawing", "Add drawing", "whiteboard", "freehand", "graphics", "jsdraw"],
html: getMenuHTML("iconDraw", this.i18n.insertDrawing),
callback: (protyle: Protyle) => {
const path = ASSETS_PATH + generateSiyuanId() + ".svg";
protyle.insert(getPreviewHTML(path), true, false);
openEditorTab(this, path);
const fileID = generateRandomString();
const syncID = generateTimeString() + '-' + generateRandomString();
protyle.insert(getMarkdownBlock(fileID, syncID), true, false);
openEditorTab(this, fileID, syncID);
}
}];
this.eventBus.on("open-menu-image", (e: any) => {
const path = imgSrcToPath(findImgSrc(e.detail.element));
if(path === null) {
return;
}
const ids = imgSrcToIDs(findImgSrc(e.detail.element));
if(ids === null) return;
e.detail.menu.addItem({
icon: "iconDraw",
label: "Edit with js-draw",
click: () => {
openEditorTab(this, path);
openEditorTab(this, ids.fileID, ids.syncID);
}
})
})

10
src/protyle.ts
View file

@ -1,5 +1,5 @@
import {getBlockByID, sql, updateBlock} from "@/api";
import {DUMMY_HOST} from "@/const";
import {IDsToAssetPath} from "@/helper";
export async function findImageBlocks(src: string) {
@ -45,9 +45,9 @@ export async function replaceBlockContent(
}
}
export async function replaceAntiCacheID(src: string) {
export async function replaceSyncID(fileID: string, oldSyncID: string, newSyncID: string) {
const search = encodeURI(src); // the API uses URI-encoded
const search = encodeURI(IDsToAssetPath(fileID, oldSyncID)); // the API uses URI-encoded
// find blocks containing that image
const blocks = await findImageBlocks(search);
@ -61,9 +61,7 @@ export async function replaceAntiCacheID(src: string) {
.filter(source => source.startsWith(search)) // discard other images
for(const source of sources) {
const url = new URL(source, DUMMY_HOST);
url.searchParams.set('antiCache', Date.now().toString()); // set or replace antiCache
const newSource = url.href.replace(DUMMY_HOST, '');
const newSource = IDsToAssetPath(fileID, newSyncID);
await replaceBlockContent(block.id, source, newSource);
}
}