import React from 'react'; import { isEqual } from 'radash'; import { persistShape, removeShapes, notifyNotAllowedChange, notifyShapeNumberExceeded, } from './service'; const WHITEBOARD_CONFIG = Meteor.settings.public.whiteboard; const usePrevious = (value) => { const ref = React.useRef(); React.useEffect(() => { ref.current = value; }, [value]); return ref.current; }; const findRemoved = (A, B) => A.filter((a) => !B.includes(a)); const filterInvalidShapes = (shapes, curPageId, tldrawAPI) => { const retShapes = shapes; const keys = Object.keys(shapes); const removedChildren = []; const removedParents = []; keys.forEach((shape) => { if (shapes[shape].parentId !== curPageId) { if (!keys.includes(shapes[shape].parentId)) { delete retShapes[shape]; } } else if (shapes[shape].type === 'group') { const groupChildren = shapes[shape].children; groupChildren.forEach((child) => { if (!keys.includes(child)) { removedChildren.push(child); } }); retShapes[shape].children = groupChildren.filter((child) => !removedChildren.includes(child)); if (shapes[shape].children.length < 2) { removedParents.push(shape); delete retShapes[shape]; } } }); // remove orphaned children Object.keys(shapes).forEach((shape) => { if (shapes[shape] && shapes[shape].parentId !== curPageId) { if (removedParents.includes(shapes[shape].parentId)) { delete retShapes[shape]; } } // remove orphaned bindings if (shapes[shape] && shapes[shape].type === 'arrow' && (shapes[shape].handles.start.bindingId || shapes[shape].handles.end.bindingId)) { const startBinding = shapes[shape].handles.start.bindingId; const endBinding = shapes[shape].handles.end.bindingId; const startBindingData = tldrawAPI?.getBinding(startBinding); const endBindingData = tldrawAPI?.getBinding(endBinding); if (startBinding && (!startBindingData && ( removedParents.includes(startBindingData?.fromId) || removedParents.includes(startBindingData?.toId) || !keys.includes(startBindingData?.fromId) || !keys.includes(startBindingData?.toId) ))) { delete retShapes[shape].handles.start.bindingId; } if (endBinding && (!endBindingData && ( removedParents.includes(endBindingData?.fromId) || removedParents.includes(endBindingData?.toId) || !keys.includes(endBindingData?.fromId) || !keys.includes(endBindingData?.toId) ))) { delete retShapes[shape].handles.end.bindingId; } } }); return retShapes; }; const isValidShapeType = (shape) => { const invalidTypes = ['image', 'video']; return !invalidTypes.includes(shape?.type); }; const sendShapeChanges = ( app, changedShapes, shapes, prevShapes, hasShapeAccess, whiteboardId, currentUser, intl, redo = false, ) => { const invalidChange = Object.keys(changedShapes) .find((id) => !hasShapeAccess(id)); const invalidShapeType = Object.keys(changedShapes) .find((id) => !isValidShapeType(changedShapes[id])); const currentShapes = app?.document?.pages[app?.currentPageId]?.shapes; const { maxNumberOfAnnotations } = WHITEBOARD_CONFIG; // -1 for background shape const shapeNumberExceeded = Object.keys(currentShapes).length - 1 > maxNumberOfAnnotations; const isInserting = Object.keys(changedShapes) .filter( (shape) => typeof changedShapes[shape] === 'object' && changedShapes[shape].type && !prevShapes[shape], ).length !== 0; if (invalidChange || invalidShapeType || (shapeNumberExceeded && isInserting)) { if (shapeNumberExceeded) { notifyShapeNumberExceeded(intl, maxNumberOfAnnotations); } else { notifyNotAllowedChange(intl); } const modApp = app; // undo last command without persisting to not generate the onUndo/onRedo callback if (!redo) { const command = app.stack[app.pointer]; modApp.pointer -= 1; app.applyPatch(command.before, 'undo'); return; // eslint-disable-next-line no-else-return } else { modApp.pointer += 1; const command = app.stack[app.pointer]; app.applyPatch(command.after, 'redo'); return; } } const deletedShapes = []; Object.entries(changedShapes) .forEach(([id, shape]) => { if (!shape) deletedShapes.push(id); else { // checks to find any bindings assosiated with the changed shapes. // If any, they may need to be updated as well. const pageBindings = app.page.bindings; if (pageBindings) { Object.entries(pageBindings).forEach(([, b]) => { if (b.toId.includes(id)) { const boundShape = app.getShape(b.fromId); if (shapes[b.fromId] && !isEqual(boundShape, shapes[b.fromId])) { const shapeBounds = app.getShapeBounds(b.fromId); boundShape.size = [shapeBounds.width, shapeBounds.height]; persistShape(boundShape, whiteboardId); } } }); } let modShape = shape; if (!shape.id) { // check it already exists (otherwise we need the full shape) if (!shapes[id]) { modShape = app.getShape(id); } modShape.id = id; } const shapeBounds = app.getShapeBounds(id); const size = [shapeBounds.width, shapeBounds.height]; if (!shapes[id] || (shapes[id] && !isEqual(shapes[id].size, size))) { modShape.size = size; } if (!shapes[id] || (shapes[id] && !shapes[id].userId)) { modShape.userId = currentUser?.userId; } persistShape(modShape, whiteboardId); } }); // order the ids of shapes being deleted to prevent crash // when removing a group shape before its children const orderedDeletedShapes = []; deletedShapes.forEach((eid) => { if (shapes[eid]?.type !== 'group') { orderedDeletedShapes.unshift(eid); } else { orderedDeletedShapes.push(eid); } }); if (orderedDeletedShapes.length > 0) { removeShapes(orderedDeletedShapes, whiteboardId); } }; // map different localeCodes from bbb to tldraw const mapLanguage = (language) => { // bbb has xx-xx but in tldraw it's only xx if (['es', 'fa', 'it', 'pl', 'sv', 'uk'].some((lang) => language.startsWith(lang))) { return language.substring(0, 2); } // exceptions switch (language) { case 'nb-no': return 'no'; case 'zh-cn': return 'zh-ch'; default: return language; } }; /* getFontStyle adapted from tldraw source code https://github.com/tldraw/tldraw/blob/55a8831a6b036faae0dfd77d6733a8f585f5ae23/packages/tldraw/src/state/shapes/shared/shape-styles.ts#L123 */ const getFontStyle = (style) => { const fontSizes = { small: 28, medium: 48, large: 96, auto: 'auto', }; const fontFaces = { script: '"Caveat Brush"', sans: '"Source Sans Pro"', serif: '"Crimson Pro"', mono: '"Source Code Pro"', } const fontSize = fontSizes[style.size]; const fontFace = fontFaces[style.font]; const { scale = 1 } = style; return `${fontSize * scale}px/1 ${fontFace}`; } /* getMeasurementDiv and getTextSize adapted from tldraw source code https://github.com/tldraw/tldraw/blob/55a8831a6b036faae0dfd77d6733a8f585f5ae23/packages/tldraw/src/state/shapes/shared/getTextSize.ts */ const getMeasurementDiv = (font) => { // A div used for measurement const pre = document.getElementById('text-measure'); pre.style.font = font; return pre; } const getTextSize = (text, style, padding) => { const font = getFontStyle(style); if (!text) { return [16, 32]; } const melm = getMeasurementDiv(font); melm.textContent = text; if (!melm) { // We're in SSR return [10, 10]; } // In tests, offsetWidth and offsetHeight will be 0 const width = melm.offsetWidth || 1; const height = melm.offsetHeight || 1; return [width + padding, height + padding]; }; const Utils = { usePrevious, findRemoved, filterInvalidShapes, mapLanguage, sendShapeChanges, getTextSize, }; export default Utils; export { usePrevious, findRemoved, filterInvalidShapes, mapLanguage, sendShapeChanges, getTextSize, };