@plait/core 0.11.0 → 0.12.0

package/fesm2020/plait-core.mjs

@@ -1323,6 +1323,110 @@ const cacheMovingElements = (board, elements) => {
     BOARD_TO_MOVING_ELEMENT.set(board, elements);
 };
 
+function cloneCSSStyle(nativeNode, clonedNode) {
+    const targetStyle = clonedNode.style;
+    if (!targetStyle) {
+        return;
+    }
+    const sourceStyle = window.getComputedStyle(nativeNode);
+    if (sourceStyle.cssText) {
+        targetStyle.cssText = sourceStyle.cssText;
+        targetStyle.transformOrigin = sourceStyle.transformOrigin;
+    }
+    else {
+        Array.from(sourceStyle).forEach(name => {
+            let value = sourceStyle.getPropertyValue(name);
+            targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+        });
+    }
+}
+function createCanvas(width, height, fillStyle) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    ctx.strokeStyle = '#ffffff';
+    ctx.fillStyle = fillStyle;
+    ctx.fillRect(0, 0, width, height);
+    return {
+        canvas,
+        ctx
+    };
+}
+function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+function cloneSvg(board, options) {
+    const elementHostBox = getRectangleByElements(board, board.children, true);
+    const { width, height, x, y } = elementHostBox;
+    const { padding = 4, inlineStyleClassNames } = options;
+    const sourceSvg = PlaitBoard.getHost(board);
+    const cloneSvgElement = sourceSvg.cloneNode(true);
+    cloneSvgElement.style.width = `${width}px`;
+    cloneSvgElement.style.height = `${height}px`;
+    cloneSvgElement.style.backgroundColor = '';
+    cloneSvgElement.setAttribute('width', `${width}`);
+    cloneSvgElement.setAttribute('height', `${height}`);
+    cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
+    if (inlineStyleClassNames) {
+        const sourceNodes = Array.from(sourceSvg.querySelectorAll(inlineStyleClassNames));
+        const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(inlineStyleClassNames));
+        sourceNodes.forEach((node, index) => {
+            const cloneNode = cloneNodes[index];
+            const childElements = Array.from(node.querySelectorAll('*')).filter(isElementNode);
+            const cloneChildElements = Array.from(cloneNode.querySelectorAll('*')).filter(isElementNode);
+            sourceNodes.push(...childElements);
+            cloneNodes.push(...cloneChildElements);
+        });
+        sourceNodes.forEach((node, index) => {
+            const cloneNode = cloneNodes[index];
+            cloneCSSStyle(node, cloneNode);
+        });
+    }
+    return cloneSvgElement;
+}
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('Failed to load image'));
+        img.src = src;
+    });
+}
+async function toImage(board, options) {
+    if (!board) {
+        return undefined;
+    }
+    const elementHostBox = getRectangleByElements(board, board.children, true);
+    const { ratio = 2, fillStyle = 'transparent' } = options;
+    const { width, height } = elementHostBox;
+    const ratioWidth = width * ratio;
+    const ratioHeight = height * ratio;
+    const cloneSvgElement = cloneSvg(board, options);
+    const { canvas, ctx } = createCanvas(ratioWidth, ratioHeight, fillStyle);
+    const svgStr = new XMLSerializer().serializeToString(cloneSvgElement);
+    const imgSrc = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
+    try {
+        const img = await loadImage(imgSrc);
+        ctx.drawImage(img, 0, 0, ratioWidth, ratioHeight);
+        const url = canvas.toDataURL('image/png');
+        return url;
+    }
+    catch (error) {
+        console.error('Error converting SVG to image:', error);
+        return undefined;
+    }
+}
+function downloadImage(url, name) {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    a.remove();
+}
+
 const PlaitElement = {
     isRootElement(value) {
         const parent = NODE_TO_PARENT.get(value);
@@ -2848,5 +2952,5 @@ const clearNodeWeakMap = (object) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ColorfulThemeColor, DarkThemeColor, DefaultThemeColor, ELEMENT_TO_COMPONENT, FLUSHING, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NODE_TO_INDEX, NODE_TO_PARENT, NS, PATH_REFS, POINTER_BUTTON, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, RectangleClient, RetroThemeColor, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, SoftThemeColor, StarryThemeColor, ThemeColorMode, ThemeColors, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createForeignObject, createG, createPath, createSVG, createSelectionOuterG, createTestingBoard, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawAbstractRoundRectangle, drawArrow, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElementOfRoot, getHitElements, getMovingElements, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ColorfulThemeColor, DarkThemeColor, DefaultThemeColor, ELEMENT_TO_COMPONENT, FLUSHING, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NODE_TO_INDEX, NODE_TO_PARENT, NS, PATH_REFS, POINTER_BUTTON, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, RectangleClient, RetroThemeColor, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, SoftThemeColor, StarryThemeColor, ThemeColorMode, ThemeColors, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createForeignObject, createG, createPath, createSVG, createSelectionOuterG, createTestingBoard, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, downloadImage, drawAbstractRoundRectangle, drawArrow, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElementOfRoot, getHitElements, getMovingElements, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map