Hermes/refboard-ayon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(refboard): canvas polish — transform box sync, dot grid, snap tuning, perf fixes

Browse Source 
- Fix transform box not updating after alignment/arrangement/normalize/flip operations
  (shortcuts, context menu, and selection toolbar all fixed with DRY _opUpdate helper)
- Replace 100ms polling loop with event-driven viewport updates (moved + wheel-scroll)
- Add adaptive dot grid background that responds to zoom/pan
- Reduce snap guide threshold from 8px to 4px for subtler snapping
- Remove PresenceOverlay (remote selection highlighting) — too heavy for minimal benefit
- Offset multiple dropped images so they don't overlap
- Add new canvas modules: SnapGuides, clipboard, grouping, FrameSprite, DrawingSprite,
  LaserPointer, context-menu-items, SelectionToolbar, Minimap
- Extract Editor hooks into dedicated files (useBoardLoader, useCanvasSetup,
  useShortcutHandler, useLayerPanel, useSaveManager, useFollowMode)
- Sync improvements: real-time transform broadcast, board rooms, viewport sync
This commit is contained in:
Hiren Kangad
2026-03-10 03:58:53 +05:30
parent cfd7adf73d
commit e9509ef7b0
41 changed files with 4171 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/services/mm-watcher.js
+18 -49
View File
@@ -12,8 +12,7 @@ const { URL } = require('url');
const { v4: uuidv4 } = require('uuid');
const sharp = require('sharp');
const { getAllBoardChannelLinks, getImageByMmFileId, createImage, getBoard } = require('../db');
const { putBuffer, getImageUrl, MIME_TO_EXT } = require('../minio');
const { generateLOD } = require('./lod-generator');
const { putBuffer, getImageUrl, MIME_TO_EXT, MAX_FILE_SIZE } = require('../minio');
const MM_URL = process.env.MM_URL;
const MM_BOT_TOKEN = process.env.MM_BOT_TOKEN;
@@ -87,7 +86,7 @@ function mmDownloadFile(fileId) {
const contentType = (res.headers['content-type'] || 'application/octet-stream').split(';')[0].trim();
const chunks = [];
let totalSize = 0;
const MAX_SIZE = 50 * 1024 * 1024;
const MAX_SIZE = MAX_FILE_SIZE;
res.on('data', (chunk) => {
totalSize += chunk.length;
@@ -147,47 +146,23 @@ function classifyMedia(mimeType) {
}
/**
* Upload image with LOD tiers (mirrors upload.js logic).
* Upload a media file (image or video) to MinIO as a single file.
* GPU handles all image scaling natively — no LOD tiers needed.
*/
async function uploadImageWithLOD(boardId, imageId, buffer, mimetype) {
const assetKey = `boards/${boardId}/${imageId}`;
const originalExt = MIME_TO_EXT[mimetype] || '.bin';
if (mimetype === 'image/svg+xml' || mimetype === 'image/gif') {
const fullPath = `${assetKey}/full${originalExt}`;
await putBuffer(fullPath, buffer, mimetype);
let width = null, height = null;
if (mimetype !== 'image/svg+xml') {
try {
const meta = await sharp(buffer).metadata();
width = meta.width || null;
height = meta.height || null;
} catch {}
}
return { assetKey, minioPath: fullPath, width, height };
}
const lod = await generateLOD(buffer, originalExt);
await Promise.all([
putBuffer(`${assetKey}/thumb${lod.thumb.ext}`, lod.thumb.buffer, lod.thumb.ext === '.webp' ? 'image/webp' : mimetype),
putBuffer(`${assetKey}/medium${lod.medium.ext}`, lod.medium.buffer, lod.medium.ext === '.webp' ? 'image/webp' : mimetype),
putBuffer(`${assetKey}/full${lod.full.ext}`, lod.full.buffer, mimetype),
]);
const minioPath = `${assetKey}/full${lod.full.ext}`;
return { assetKey, minioPath, width: lod.full.width, height: lod.full.height };
}
/**
* Upload a video file (single file, no LOD).
*/
async function uploadVideo(boardId, imageId, buffer, mimetype) {
const assetKey = `boards/${boardId}/${imageId}`;
async function uploadMedia(boardId, imageId, buffer, mimetype) {
const ext = MIME_TO_EXT[mimetype] || '.bin';
const fullPath = `${assetKey}/full${ext}`;
await putBuffer(fullPath, buffer, mimetype);
return { assetKey, minioPath: fullPath, width: null, height: null };
const minioPath = `boards/${boardId}/${imageId}${ext}`;
await putBuffer(minioPath, buffer, mimetype);
let width = null, height = null;
if (mimetype !== 'image/svg+xml' && !mimetype.startsWith('video/')) {
try {
const meta = await sharp(buffer).metadata();
width = meta.width || null;
height = meta.height || null;
} catch {}
}
return { assetKey: minioPath, minioPath, width, height };
}
/**
@@ -239,13 +214,7 @@ async function processLink(link) {
const imageId = uuidv4();
const mediaType = classifyMedia(mimeType);
let assetKey, minioPath, width, height;
if (mediaType === 'video') {
({ assetKey, minioPath, width, height } = await uploadVideo(boardId, imageId, buffer, mimeType));
} else {
({ assetKey, minioPath, width, height } = await uploadImageWithLOD(boardId, imageId, buffer, mimeType));
}
const { assetKey, minioPath, width, height } = await uploadMedia(boardId, imageId, buffer, mimeType);
const publicUrl = getImageUrl(minioPath);