@plait/common 0.75.0-next.9 → 0.76.0

package/esm2022/text/text-measure.mjs

@@ -1,5 +1,6 @@
 import { Node } from 'slate';
 import { getLineHeightByFontSize } from '../utils/text';
+import { IS_WINDOWS } from '@plait/core';
 export function measureElement(element, options, containerMaxWidth = 10000) {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
@@ -30,8 +31,35 @@ export function measureElement(element, options, containerMaxWidth = 10000) {
         lineTexts.forEach((text, index) => {
             const font = getFont(text, { fontFamily: options.fontFamily, fontSize: options.fontSize });
             ctx.font = font;
-            const textMetrics = ctx.measureText(text.text);
-            lineWidth += textMetrics.width;
+            // Windows 平台下的特殊处理
+            if (IS_WINDOWS) {
+                let adjustedWidth = 0;
+                // 逐字符处理
+                for (let i = 0; i < text.text.length; i++) {
+                    const char = text.text[i];
+                    const charMetrics = ctx.measureText(char);
+                    // 判断是否为汉字（通过 Unicode 范围）
+                    if (/[\u4e00-\u9fa5]/.test(char)) {
+                        adjustedWidth += charMetrics.width;
+                    }
+                    else {
+                        // 非汉字字符的宽度调整
+                        if (/[a-zA-Z]/.test(char)) {
+                            adjustedWidth += charMetrics.width + 1.5; // 字母
+                        }
+                        else if (/[0-9]/.test(char)) {
+                            adjustedWidth += charMetrics.width + 1.5; // 数字
+                        }
+                        else {
+                            adjustedWidth += charMetrics.width + 0.8; // 其他符号
+                        }
+                    }
+                }
+                lineWidth += adjustedWidth;
+            }
+            else {
+                lineWidth += ctx.measureText(text.text).width;
+            }
             const isLast = index === lineTexts.length - 1;
             // skip when text is empty and is not last text of line
             if (text['font-size'] && (isLast || text.text !== '')) {
@@ -58,4 +86,4 @@ export function measureElement(element, options, containerMaxWidth = 10000) {
 const getFont = (text, options) => {
     return `${text.italic ? 'italic ' : ''} ${text.bold ? 'bold ' : ''} ${text['font-size'] || options.fontSize}px ${options.fontFamily} `;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1tZWFzdXJlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tbW9uL3NyYy90ZXh0L3RleHQtbWVhc3VyZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRTdCLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV4RCxNQUFNLFVBQVUsY0FBYyxDQUMxQixPQUF5QixFQUN6QixPQUdDLEVBQ0Qsb0JBQTRCLEtBQUs7SUFFakMsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUNoRCxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBNkIsQ0FBQztJQUNoRSxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3hDLE1BQU0sS0FBSyxHQUFtQixDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ25DLEtBQUssTUFBTSxTQUFTLElBQUksV0FBVyxFQUFFLENBQUM7UUFDbEMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLFNBQVMsQ0FBQztRQUN6QixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3JDLE1BQU0sU0FBUyxHQUFHLFVBQVUsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDekMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDLGlCQUF5QixFQUFFLEtBQWEsRUFBRSxFQUFFO1lBQzNELE1BQU0sV0FBVyxHQUFHLEVBQUUsR0FBRyxJQUFJLEVBQUUsSUFBSSxFQUFFLGlCQUFpQixFQUFFLENBQUM7WUFDekQsSUFBSSxLQUFLLEtBQUssQ0FBQyxFQUFFLENBQUM7Z0JBQ2QsTUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFN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XG5pbXBvcnQgeyBDdXN0b21UZXh0LCBQYXJhZ3JhcGhFbGVtZW50IH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRMaW5lSGVpZ2h0QnlGb250U2l6ZSB9IGZyb20gJy4uL3V0aWxzL3RleHQnO1xuXG5leHBvcnQgZnVuY3Rpb24gbWVhc3VyZUVsZW1lbnQoXG4gICAgZWxlbWVudDogUGFyYWdyYXBoRWxlbWVudCxcbiAgICBvcHRpb25zOiB7XG4gICAgICAgIGZvbnRTaXplOiBudW1iZXI7XG4gICAgICAgIGZvbnRGYW1pbHk6IHN0cmluZztcbiAgICB9LFxuICAgIGNvbnRhaW5lck1heFdpZHRoOiBudW1iZXIgPSAxMDAwMFxuKSB7XG4gICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnY2FudmFzJyk7XG4gICAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJykgYXMgQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEO1xuICAgIGNvbnN0IHRleHRFbnRyaWVzID0gTm9kZS50ZXh0cyhlbGVtZW50KTtcbiAgICBjb25zdCBsaW5lczogQ3VzdG9tVGV4dFtdW10gPSBbW11dO1xuICAgIGZvciAoY29uc3QgdGV4dEVudHJ5IG9mIHRleHRFbnRyaWVzKSB7XG4gICAgICAgIGNvbnN0IFt0ZXh0XSA9IHRleHRFbnRyeTtcbiAgICAgICAgY29uc3QgdGV4dFN0cmluZyA9IE5vZGUuc3RyaW5nKHRleHQpO1xuICAgICAgICBjb25zdCB0ZXh0QXJyYXkgPSB0ZXh0U3RyaW5nLnNwbGl0KCdcXG4nKTtcbiAgICAgICAgdGV4dEFycmF5LmZvckVhY2goKHNlZ21lbnRUZXh0U3RyaW5nOiBzdHJpbmcsIGluZGV4OiBudW1iZXIpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHNlZ21lbnRUZXh0ID0geyAuLi50ZXh0LCB0ZXh0OiBzZWdtZW50VGV4dFN0cmluZyB9O1xuICAgICAgICAgICAgaWYgKGluZGV4ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgY29uc3QgY3VycmVudExpbmUgPSBsaW5lc1tsaW5lcy5sZW5ndGggLSAxXTtcbiAgICAgICAgICAgICAgICBjdXJyZW50TGluZS5wdXNoKHNlZ21lbnRUZXh0KTtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgY29uc3QgbmV3TGluZTogQ3VzdG9tVGV4dFtdID0gW107XG4gICAgICAgICAgICAgICAgbmV3TGluZS5wdXNoKHNlZ21lbnRUZXh0KTtcbiAgICAgICAgICAgICAgICBsaW5lcy5wdXNoKG5ld0xpbmUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG4gICAgbGV0IHdpZHRoID0gMDtcbiAgICBsZXQgaGVpZ2h0ID0gMDtcbiAgICBsaW5lcy5mb3JFYWNoKChsaW5lVGV4dHM6IEN1c3RvbVRleHRbXSwgaW5kZXg6IG51bWJlcikgPT4ge1xuICAgICAgICBsZXQgbGluZVdpZHRoID0gMDtcbiAgICAgICAgbGV0IG1heExpbmVIZWlnaHQgPSBnZXRMaW5lSGVpZ2h0QnlGb250U2l6ZShvcHRpb25zLmZvbnRTaXplKTtcbiAgICAgICAgbGluZVRleHRzLmZvckVhY2goKHRleHQ6IEN1c3RvbVRleHQsIGluZGV4OiBudW1iZXIpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGZvbnQgPSBnZXRGb250KHRleHQsIHsgZm9udEZhbWlseTogb3B0aW9ucy5mb250RmFtaWx5LCBmb250U2l6ZTogb3B0aW9ucy5mb250U2l6ZSB9KTtcbiAgICAgICAgICAgIGN0eC5mb250ID0gZm9udDtcbiAgICAgICAgICAgIGNvbnN0IHRleHRNZXRyaWNzID0gY3R4Lm1lYXN1cmVUZXh0KHRleHQudGV4dCk7XG4gICAgICAgICAgICBsaW5lV2lkdGggKz0gdGV4dE1ldHJpY3Mud2lkdGg7XG4gICAgICAgICAgICBjb25zdCBpc0xhc3QgPSBpbmRleCA9PT0gbGluZVRleHRzLmxlbmd0aCAtIDE7XG4gICAgICAgICAgICAvLyBza2lwIHdoZW4gdGV4dCBpcyBlbXB0eSBhbmQgaXMgbm90IGxhc3QgdGV4dCBvZiBsaW5lXG4gICAgICAgICAgICBpZiAodGV4dFsnZm9udC1zaXplJ10gJiYgKGlzTGFzdCB8fCB0ZXh0LnRleHQgIT09ICcnKSkge1xuICAgICAgICAgICAgICAgIGNvbnN0IGxpbmVIZWlnaHQgPSBnZXRMaW5lSGVpZ2h0QnlGb250U2l6ZShwYXJzZUZsb2F0KHRleHRbJ2ZvbnQtc2l6ZSddKSk7XG4gICAgICAgICAgICAgICAgaWYgKGxpbmVIZWlnaHQgPiBtYXhMaW5lSGVpZ2h0KSB7XG4gICAgICAgICAgICAgICAgICAgIG1heExpbmVIZWlnaHQgPSBsaW5lSGVpZ2h0O1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICAgIGlmIChsaW5lV2lkdGggPD0gY29udGFpbmVyTWF4V2lkdGgpIHtcbiAgICAgICAgICAgIGlmIChsaW5lV2lkdGggPiB3aWR0aCkge1xuICAgICAgICAgICAgICAgIHdpZHRoID0gbGluZVdpZHRoO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgaGVpZ2h0ICs9IG1heExpbmVIZWlnaHQ7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB3aWR0aCA9IGNvbnRhaW5lck1heFdpZHRoO1xuICAgICAgICAgICAgY29uc3QgbGluZVdyYXBOdW1iZXIgPSBNYXRoLmNlaWwobGluZVdpZHRoIC8gY29udGFpbmVyTWF4V2lkdGgpO1xuICAgICAgICAgICAgaGVpZ2h0ICs9IG1heExpbmVIZWlnaHQgKiBsaW5lV3JhcE51bWJlcjtcbiAgICAgICAgfVxuICAgIH0pO1xuICAgIHJldHVybiB7IHdpZHRoLCBoZWlnaHQgfTtcbn1cblxuY29uc3QgZ2V0Rm9udCA9IChcbiAgICB0ZXh0OiBDdXN0b21UZXh0LFxuICAgIG9wdGlvbnM6IHtcbiAgICAgICAgZm9udFNpemU6IG51bWJlcjtcbiAgICAgICAgZm9udEZhbWlseTogc3RyaW5nO1xuICAgIH1cbikgPT4ge1xuICAgIHJldHVybiBgJHt0ZXh0Lml0YWxpYyA/ICdpdGFsaWMgJyA6ICcnfSAke3RleHQuYm9sZCA/ICdib2xkICcgOiAnJ30gJHt0ZXh0Wydmb250LXNpemUnXSB8fCBvcHRpb25zLmZvbnRTaXplfXB4ICR7b3B0aW9ucy5mb250RmFtaWx5fSBgO1xufTtcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1tZWFzdXJlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tbW9uL3NyYy90ZXh0L3RleHQtbWVhc3VyZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBRTdCLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBRXpDLE1BQU0sVUFBVSxjQUFjLENBQzFCLE9BQXlCLEVBQ3pCLE9BR0MsRUFDRCxvQkFBNEIsS0FBSztJQUVqQyxNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2hELE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUE2QixDQUFDO0lBQ2hFLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDeEMsTUFBTSxLQUFLLEdBQW1CLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDbkMsS0FBSyxNQUFNLFNBQVMsSUFBSSxXQUFXLEVBQUUsQ0FBQztRQUNsQyxNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsU0FBUyxDQUFDO1FBQ3pCLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDckMsTUFBTSxTQUFTLEdBQUcsVUFBVSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN6QyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUMsaUJBQXlCLEVBQUUsS0FBYSxFQUFFLEVBQUU7WUFDM0QsTUFBTSxXQUFXLEdBQUcsRUFBRSxHQUFHLElBQUksRUFBRSxJQUFJLEVBQUUsaUJBQWlCLEVBQUUsQ0FBQztZQUN6RCxJQUFJLEtBQUssS0FBSyxDQUFDLEVBQUUsQ0FBQztnQkFD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VSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQzFFLElBQUksVUFBVSxHQUFHLGFBQWEsRUFBRSxDQUFDO29CQUM3QixhQUFhLEdBQUcsVUFBVSxDQUFDO2dCQUMvQixDQUFDO1lBQ0wsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxTQUFTLElBQUksaUJBQWlCLEVBQUUsQ0FBQztZQUNqQyxJQUFJLFNBQVMsR0FBRyxLQUFLLEVBQUUsQ0FBQztnQkFDcEIsS0FBSyxHQUFHLFNBQVMsQ0FBQztZQUN0QixDQUFDO1lBQ0QsTUFBTSxJQUFJLGFBQWEsQ0FBQztRQUM1QixDQUFDO2FBQU0sQ0FBQztZQUNKLEtBQUssR0FBRyxpQkFBaUIsQ0FBQztZQUMxQixNQUFNLGNBQWMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxpQkFBaUIsQ0FBQyxDQUFDO1lBQ2hFLE1BQU0sSUFBSSxhQUFhLEdBQUcsY0FBYyxDQUFDO1FBQzdDLENBQUM7SUFDTCxDQUFDLENBQUMsQ0FBQztJQUNILE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLENBQUM7QUFDN0IsQ0FBQztBQUVELE1BQU0sT0FBTyxHQUFHLENBQ1osSUFBZ0IsRUFDaEIsT0FHQyxFQUNILEVBQUU7SUFDQSxPQUFPLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxRQUFRLE1BQU0sT0FBTyxDQUFDLFVBQVUsR0FBRyxDQUFDO0FBQzNJLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5vZGUgfSBmcm9tICdzbGF0ZSc7XG5pbXBvcnQgeyBDdXN0b21UZXh0LCBQYXJhZ3JhcGhFbGVtZW50IH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRMaW5lSGVpZ2h0QnlGb250U2l6ZSB9IGZyb20gJy4uL3V0aWxzL3RleHQnO1xuaW1wb3J0IHsgSVNfV0lORE9XUyB9IGZyb20gJ0BwbGFpdC9jb3JlJztcblxuZXhwb3J0IGZ1bmN0aW9uIG1lYXN1cmVFbGVtZW50KFxuICAgIGVsZW1lbnQ6IFBhcmFncmFwaEVsZW1lbnQsXG4gICAgb3B0aW9uczoge1xuICAgICAgICBmb250U2l6ZTogbnVtYmVyO1xuICAgICAgICBmb250RmFtaWx5OiBzdHJpbmc7XG4gICAgfSxcbiAgICBjb250YWluZXJNYXhXaWR0aDogbnVtYmVyID0gMTAwMDBcbikge1xuICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpO1xuICAgIGNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpIGFzIENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRDtcbiAgICBjb25zdCB0ZXh0RW50cmllcyA9IE5vZGUudGV4dHMoZWxlbWVudCk7XG4gICAgY29uc3QgbGluZXM6IEN1c3RvbVRleHRbXVtdID0gW1tdXTtcbiAgICBmb3IgKGNvbnN0IHRleHRFbnRyeSBvZiB0ZXh0RW50cmllcykge1xuICAgICAgICBjb25zdCBbdGV4dF0gPSB0ZXh0RW50cnk7XG4gICAgICAgIGNvbnN0IHRleHRTdHJpbmcgPSBOb2RlLnN0cmluZyh0ZXh0KTtcbiAgICAgICAgY29uc3QgdGV4dEFycmF5ID0gdGV4dFN0cmluZy5zcGxpdCgnXFxuJyk7XG4gICAgICAgIHRleHRBcnJheS5mb3JFYWNoKChzZWdtZW50VGV4dFN0cmluZzogc3RyaW5nLCBpbmRleDogbnVtYmVyKSA9PiB7XG4gICAgICAgICAgICBjb25zdCBzZWdtZW50VGV4dCA9IHsgLi4udGV4dCwgdGV4dDogc2VnbWVudFRleHRTdHJpbmcgfTtcbiAgICAgICAgICAgIGlmIChpbmRleCA9PT0gMCkge1xuICAgICAgICAgICAgICAgIGNvbnN0IGN1cnJlbnRMaW5lID0gbGluZXNbbGluZXMubGVuZ3RoIC0gMV07XG4gICAgICAgICAgICAgICAgY3VycmVudExpbmUucHVzaChzZWdtZW50VGV4dCk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIGNvbnN0IG5ld0xpbmU6IEN1c3RvbVRleHRbXSA9IFtdO1xuICAgICAgICAgICAgICAgIG5ld0xpbmUucHVzaChzZWdtZW50VGV4dCk7XG4gICAgICAgICAgICAgICAgbGluZXMucHVzaChuZXdMaW5lKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfVxuICAgIGxldCB3aWR0aCA9IDA7XG4gICAgbGV0IGhlaWdodCA9IDA7XG4gICAgbGluZXMuZm9yRWFjaCgobGluZVRleHRzOiBDdXN0b21UZXh0W10sIGluZGV4OiBudW1iZXIpID0+IHtcbiAgICAgICAgbGV0IGxpbmVXaWR0aCA9IDA7XG4gICAgICAgIGxldCBtYXhMaW5lSGVpZ2h0ID0gZ2V0TGluZUhlaWdodEJ5Rm9udFNpemUob3B0aW9ucy5mb250U2l6ZSk7XG4gICAgICAgIGxpbmVUZXh0cy5mb3JFYWNoKCh0ZXh0OiBDdXN0b21UZXh0LCBpbmRleDogbnVtYmVyKSA9PiB7XG4gICAgICAgICAgICBjb25zdCBmb250ID0gZ2V0Rm9udCh0ZXh0LCB7IGZvbnRGYW1pbHk6IG9wdGlvbnMuZm9udEZhbWlseSwgZm9udFNpemU6IG9wdGlvbnMuZm9udFNpemUgfSk7XG4gICAgICAgICAgICBjdHguZm9udCA9IGZvbnQ7XG4gICAgICAgICAgICBcbiAgICAgICAgICAgIC8vIFdpbmRvd3Mg5bmz5Y+w5LiL55qE54m55q6K5aSE55CGXG4gICAgICAgICAgICBpZiAoSVNfV0lORE9XUykge1xuICAgICAgICAgICAgICAgIGxldCBhZGp1c3RlZFdpZHRoID0gMDtcbiAgICAgICAgICAgICAgICAvLyDpgJDlrZfnrKblpITnkIZcbiAgICAgICAgICAgICAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRleHQudGV4dC5sZW5ndGg7IGkrKykge1xuICAgICAgICAgICAgICAgICAgICBjb25zdCBjaGFyID0gdGV4dC50ZXh0W2ldO1xuICAgICAgICAgICAgICAgICAgICBjb25zdCBjaGFyTWV0cmljcyA9IGN0eC5tZWFzdXJlVGV4dChjaGFyKTtcbiAgICAgICAgICAgICAgICAgICAgLy8g5Yik5pat5piv5ZCm5Li65rGJ5a2X77yI6YCa6L+HIFVuaWNvZGUg6IyD5Zu077yJXG4gICAgICAgICAgICAgICAgICAgIGlmICgvW1xcdTRlMDAtXFx1OWZhNV0vLnRlc3QoY2hhcikpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGFkanVzdGVkV2lkdGggKz0gY2hhck1ldHJpY3Mud2lkdGg7XG4gICAgICAgICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAvLyDpnZ7msYnlrZflrZfnrKbnmoTlrr3luqbosIPmlbRcbiAgICAgICAgICAgICAgICAgICAgICAgIGlmICgvW2EtekEtWl0vLnRlc3QoY2hhcikpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBhZGp1c3RlZFdpZHRoICs9IGNoYXJNZXRyaWNzLndpZHRoICsgMS41OyAvLyDlrZfmr41cbiAgICAgICAgICAgICAgICAgICAgICAgIH0gZWxzZSBpZiAoL1swLTldLy50ZXN0KGNoYXIpKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYWRqdXN0ZWRXaWR0aCArPSBjaGFyTWV0cmljcy53aWR0aCArIDEuNTsgLy8g5pWw5a2XXG4gICAgICAgICAgICAgICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGFkanVzdGVkV2lkdGggKz0gY2hhck1ldHJpY3Mud2lkdGggKyAwLjg7IC8vIOWFtuS7luespuWPt1xuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGxpbmVXaWR0aCArPSBhZGp1c3RlZFdpZHRoO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICBsaW5lV2lkdGggKz0gY3R4Lm1lYXN1cmVUZXh0KHRleHQudGV4dCkud2lkdGg7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIGNvbnN0IGlzTGFzdCA9IGluZGV4ID09PSBsaW5lVGV4dHMubGVuZ3RoIC0gMTtcbiAgICAgICAgICAgIC8vIHNraXAgd2hlbiB0ZXh0IGlzIGVtcHR5IGFuZCBpcyBub3QgbGFzdCB0ZXh0IG9mIGxpbmVcbiAgICAgICAgICAgIGlmICh0ZXh0Wydmb250LXNpemUnXSAmJiAoaXNMYXN0IHx8IHRleHQudGV4dCAhPT0gJycpKSB7XG4gICAgICAgICAgICAgICAgY29uc3QgbGluZUhlaWdodCA9IGdldExpbmVIZWlnaHRCeUZvbnRTaXplKHBhcnNlRmxvYXQodGV4dFsnZm9udC1zaXplJ10pKTtcbiAgICAgICAgICAgICAgICBpZiAobGluZUhlaWdodCA+IG1heExpbmVIZWlnaHQpIHtcbiAgICAgICAgICAgICAgICAgICAgbWF4TGluZUhlaWdodCA9IGxpbmVIZWlnaHQ7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgICAgaWYgKGxpbmVXaWR0aCA8PSBjb250YWluZXJNYXhXaWR0aCkge1xuICAgICAgICAgICAgaWYgKGxpbmVXaWR0aCA+IHdpZHRoKSB7XG4gICAgICAgICAgICAgICAgd2lkdGggPSBsaW5lV2lkdGg7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBoZWlnaHQgKz0gbWF4TGluZUhlaWdodDtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHdpZHRoID0gY29udGFpbmVyTWF4V2lkdGg7XG4gICAgICAgICAgICBjb25zdCBsaW5lV3JhcE51bWJlciA9IE1hdGguY2VpbChsaW5lV2lkdGggLyBjb250YWluZXJNYXhXaWR0aCk7XG4gICAgICAgICAgICBoZWlnaHQgKz0gbWF4TGluZUhlaWdodCAqIGxpbmVXcmFwTnVtYmVyO1xuICAgICAgICB9XG4gICAgfSk7XG4gICAgcmV0dXJuIHsgd2lkdGgsIGhlaWdodCB9O1xufVxuXG5jb25zdCBnZXRGb250ID0gKFxuICAgIHRleHQ6IEN1c3RvbVRleHQsXG4gICAgb3B0aW9uczoge1xuICAgICAgICBmb250U2l6ZTogbnVtYmVyO1xuICAgICAgICBmb250RmFtaWx5OiBzdHJpbmc7XG4gICAgfVxuKSA9PiB7XG4gICAgcmV0dXJuIGAke3RleHQuaXRhbGljID8gJ2l0YWxpYyAnIDogJyd9ICR7dGV4dC5ib2xkID8gJ2JvbGQgJyA6ICcnfSAke3RleHRbJ2ZvbnQtc2l6ZSddIHx8IG9wdGlvbnMuZm9udFNpemV9cHggJHtvcHRpb25zLmZvbnRGYW1pbHl9IGA7XG59O1xuIl19

package/fesm2022/plait-common.mjs

@@ -1,4 +1,4 @@
-import { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, RESIZE_HANDLE_CLASS_NAME, DEFAULT_COLOR, createG, setStrokeLinecap, drawRectangle, SELECTION_RECTANGLE_CLASS_NAME, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, isSelectionMoving, getSelectedElements, distanceBetweenPointAndPoint, Point, Direction, hotkeys, PlaitElement, createDebugGenerator, idCreator, Transforms, createForeignObject, ACTIVE_STROKE_WIDTH, updateForeignObject, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, getRectangleByGroup, ElementFlavour, isSelectedElementOrGroup, Selection, isMovingElements, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement, updateForeignObjectWidth, IS_TEXT_EDITABLE } from '@plait/core';
+import { RectangleClient, toActiveRectangleFromViewBoxRectangle, PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, drawCircle, PlaitBoard, RESIZE_HANDLE_CLASS_NAME, DEFAULT_COLOR, createG, setStrokeLinecap, drawRectangle, ACTIVE_STROKE_WIDTH, SELECTION_RECTANGLE_CLASS_NAME, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, isSelectionMoving, getSelectedElements, distanceBetweenPointAndPoint, Point, Direction, hotkeys, PlaitElement, createDebugGenerator, idCreator, Transforms, createForeignObject, updateForeignObject, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, getRectangleByGroup, ElementFlavour, isSelectedElementOrGroup, Selection, isMovingElements, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement, IS_WINDOWS, updateForeignObjectWidth, IS_TEXT_EDITABLE } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import { Node, Operation, Transforms as Transforms$1, Range, Editor } from 'slate';
 import { fromEvent, timer } from 'rxjs';
@@ -65,18 +65,24 @@ class Generator {
                     }
                 }
                 this.g = g;
-                const rect = this.board.getRectangle(element);
-                if (rect) {
-                    let angle;
-                    if (PlaitGroupElement.isGroup(element)) {
-                        angle = getSelectionAngle(getElementsInGroup(this.board, element, true));
-                    }
-                    else {
-                        angle = element.angle;
-                    }
-                    if (angle) {
-                        setAngleForG(g, RectangleClient.getCenterPoint(rect), angle);
-                    }
+                const rectangle = this.board.getRectangle(element);
+                if (!rectangle) {
+                    return;
+                }
+                let centerPoint = RectangleClient.getCenterPoint(rectangle);
+                if (this.options?.active) {
+                    const activeRectangle = toActiveRectangleFromViewBoxRectangle(this.board, rectangle);
+                    centerPoint = RectangleClient.getCenterPoint(activeRectangle);
+                }
+                let angle;
+                if (PlaitGroupElement.isGroup(element)) {
+                    angle = getSelectionAngle(getElementsInGroup(this.board, element, true));
+                }
+                else {
+                    angle = element.angle;
+                }
+                if (angle) {
+                    setAngleForG(g, centerPoint, angle);
                 }
             }
             else {
@@ -147,10 +153,13 @@ const drawRotateHandle = (board, rectangle) => {
     return handleG;
 };
 
+const createActiveGenerator = (board, options) => {
+    return new ActiveGenerator(board, { ...options, active: true });
+};
 class ActiveGenerator extends Generator {
     static { this.key = 'active-generator'; }
     constructor(board, options) {
-        super(board, options);
+        super(board, { ...options, active: true });
         this.board = board;
         this.options = options;
         this.hasResizeHandle = false;
@@ -165,12 +174,12 @@ class ActiveGenerator extends Generator {
     }
     draw(element, data) {
         const activeG = createG();
-        const rectangle = this.options.getRectangle(element);
-        const delta = this.options.getStrokeWidth();
-        const activeRectangle = RectangleClient.inflate(rectangle, delta);
-        const strokeG = drawRectangle(this.board, activeRectangle, {
+        const activeRectangle = toActiveRectangleFromViewBoxRectangle(this.board, this.options.getRectangle(element));
+        const delta = this.options.getStrokeWidth() * this.board.viewport.zoom;
+        const activeRectangleWithDelta = RectangleClient.inflate(activeRectangle, delta);
+        const strokeG = drawRectangle(this.board, activeRectangleWithDelta, {
             stroke: PRIMARY_COLOR,
-            strokeWidth: delta
+            strokeWidth: ACTIVE_STROKE_WIDTH
         });
         activeG.append(strokeG);
         strokeG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
@@ -178,7 +187,7 @@ class ActiveGenerator extends Generator {
         if (this.options.hasResizeHandle()) {
             this.hasResizeHandle = true;
             // draw resize handle
-            RectangleClient.getCornerPoints(activeRectangle).forEach(corner => {
+            RectangleClient.getCornerPoints(activeRectangleWithDelta).forEach((corner) => {
                 const cornerHandleG = drawHandle(this.board, corner);
                 activeG.append(cornerHandleG);
             });
@@ -1362,7 +1371,7 @@ class ImageGenerator extends Generator {
             }
         };
         this.imageComponentRef = this.board.renderImage(this.foreignObject, props);
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getStrokeWidth: () => {
                 const selectedElements = getSelectedElements(this.board);
                 if (!(selectedElements.length === 1 && !isSelectionMoving(this.board))) {
@@ -1409,12 +1418,12 @@ class ImageGenerator extends Generator {
         if (currentForeignObject && current.angle) {
             setAngleForG(this.g, RectangleClient.getCenterPoint(currentForeignObject), current.angle);
         }
-        const activeG = PlaitBoard.getElementActiveHost(this.board);
+        const activeG = PlaitBoard.getActiveHost(this.board);
         this.activeGenerator.processDrawing(current, activeG, { selected: this.isFocus });
     }
     setFocus(element, isFocus) {
         this.isFocus = isFocus;
-        const activeG = PlaitBoard.getElementActiveHost(this.board);
+        const activeG = PlaitBoard.getActiveHost(this.board);
         this.activeGenerator.processDrawing(element, activeG, { selected: isFocus });
         const props = {
             isFocus
@@ -1727,6 +1736,7 @@ class PlaitCommonElementRef {
     constructor() {
         this.textManages = [];
         this.generatorMap = new Map();
+        this.updateActiveSection = () => { };
     }
     addGenerator(key, generator) {
         this.generatorMap.set(key, generator);
@@ -1747,7 +1757,7 @@ class PlaitCommonElementRef {
         return this.textManages;
     }
     destroyTextManage() {
-        this.textManages.forEach(textManage => {
+        this.textManages.forEach((textManage) => {
             textManage.destroy();
         });
         this.textManages = [];
@@ -1765,7 +1775,7 @@ class GroupComponent extends CommonElementFlavour {
         super();
     }
     initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getRectangle: (element) => {
                 return getRectangleByGroup(this.board, element);
             },
@@ -1818,7 +1828,7 @@ function withGroup(board) {
                 const hitElements = getHitElementsBySelection(board, selection);
                 if (hitElements.length) {
                     groupRectangleG = createGroupRectangleG(board, hitElements);
-                    groupRectangleG && PlaitBoard.getElementActiveHost(board).append(groupRectangleG);
+                    groupRectangleG && PlaitBoard.getElementTopHost(board).append(groupRectangleG);
                 }
             }
         });
@@ -1839,13 +1849,13 @@ function withGroup(board) {
             elements = new Array(clipboardData?.elements?.length);
             const groups = getHighestSelectedGroups(board, clipboardData?.elements);
             const selectedIsolatedElements = getSelectedIsolatedElements(board, clipboardData?.elements);
-            selectedIsolatedElements.forEach(item => {
-                const index = clipboardData.elements.map(element => element.id).indexOf(item.id);
+            selectedIsolatedElements.forEach((item) => {
+                const index = clipboardData.elements.map((element) => element.id).indexOf(item.id);
                 elements.splice(index, 1, !item.groupId ? item : updateGroupId(item, undefined));
             });
             if (groups.length) {
-                groups.forEach(item => {
-                    const index = clipboardData.elements.map(element => element.id).indexOf(item.id);
+                groups.forEach((item) => {
+                    const index = clipboardData.elements.map((element) => element.id).indexOf(item.id);
                     const newGroup = { ...updateGroupId(item, undefined), id: idCreator() };
                     elements.splice(index, 1, newGroup);
                     updateElementsGroupId(item, clipboardData.elements, newGroup.id, elements);
@@ -1854,8 +1864,8 @@ function withGroup(board) {
             clipboardData.elements = elements;
         }
         insertFragment(clipboardData, targetPoint, operationType);
-        const groupElements = elements?.filter(value => PlaitGroupElement.isGroup(value));
-        groupElements.forEach(element => {
+        const groupElements = elements?.filter((value) => PlaitGroupElement.isGroup(value));
+        groupElements.forEach((element) => {
             Transforms.insertNode(board, element, [board.children.length]);
         });
     };
@@ -1903,10 +1913,10 @@ const updateGroupId = (element, groupId) => {
     };
 };
 const updateElementsGroupId = (group, clipboardDataElements, newGroupId, elements) => {
-    const elementsInGroup = clipboardDataElements.filter(item => item.groupId === group.id);
+    const elementsInGroup = clipboardDataElements.filter((item) => item.groupId === group.id);
     if (elementsInGroup.length) {
-        elementsInGroup.forEach(item => {
-            const index = clipboardDataElements.map(item => item.id).indexOf(item.id);
+        elementsInGroup.forEach((item) => {
+            const index = clipboardDataElements.map((item) => item.id).indexOf(item.id);
             if (PlaitGroupElement.isGroup(item)) {
                 const newGroup = { ...updateGroupId(item, newGroupId), id: idCreator() };
                 elements.splice(index, 1, newGroup);
@@ -1925,11 +1935,11 @@ const getRemoveGroups = (board) => {
     const highestSelectedGroups = getHighestSelectedGroups(board);
     const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
     const removeNodes = [...highestSelectedGroups, ...selectedIsolatedElements];
-    removeNodes.forEach(item => {
+    removeNodes.forEach((item) => {
         const hitElementGroups = getGroupByElement(board, item, true);
         if (hitElementGroups.length) {
             const elementsInGroup = getElementsInGroup(board, hitElementGroups[0], false, true);
-            const siblingElements = elementsInGroup.filter(element => ![...removeNodes, ...removeGroups].map(item => item.id).includes(element.id));
+            const siblingElements = elementsInGroup.filter((element) => ![...removeNodes, ...removeGroups].map((item) => item.id).includes(element.id));
             if (siblingElements.length === 1 || siblingElements.length === 0) {
                 if (!removeGroups.includes(hitElementGroups[0])) {
                     removeGroups.push(hitElementGroups[0]);
@@ -1942,9 +1952,9 @@ const getRemoveGroups = (board) => {
                         ]);
                         let index = hitElementGroups.length;
                         if (aboveGroup) {
-                            index = hitElementGroups.findIndex(item => item.id === aboveGroup.id);
+                            index = hitElementGroups.findIndex((item) => item.id === aboveGroup.id);
                         }
-                        [...hitElementGroups.slice(1, index)].forEach(item => {
+                        [...hitElementGroups.slice(1, index)].forEach((item) => {
                             if (!removeGroups.includes(item)) {
                                 removeGroups.push(item);
                             }
@@ -1960,7 +1970,7 @@ const findAboveGroupWithAnotherElement = (board, groups, excludeNodes) => {
     let group = null;
     for (let i = 0; i < groups.length; i++) {
         const elementsInGroup = getElementsInGroup(board, groups[i], false, true);
-        const siblingElements = elementsInGroup.filter(element => !excludeNodes.map(item => item.id).includes(element.id));
+        const siblingElements = elementsInGroup.filter((element) => !excludeNodes.map((item) => item.id).includes(element.id));
         if (siblingElements.length > 0) {
             group = groups[i];
             break;
@@ -1971,16 +1981,16 @@ const findAboveGroupWithAnotherElement = (board, groups, excludeNodes) => {
 const updateSiblingElementGroupId = (board, removeGroups) => {
     const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
     const highestSelectedGroups = getHighestSelectedGroups(board);
-    const isolatedElementsInGroup = selectedIsolatedElements.filter(item => item.groupId);
-    [...highestSelectedGroups, ...isolatedElementsInGroup].forEach(item => {
+    const isolatedElementsInGroup = selectedIsolatedElements.filter((item) => item.groupId);
+    [...highestSelectedGroups, ...isolatedElementsInGroup].forEach((item) => {
         const hitElementGroups = getGroupByElement(board, item, true);
         if (hitElementGroups.length) {
             const elementsInGroup = getElementsInGroup(board, hitElementGroups[0], false, true);
-            const siblingElements = elementsInGroup.filter(element => element.id !== item.id);
+            const siblingElements = elementsInGroup.filter((element) => element.id !== item.id);
             if (siblingElements.length === 1) {
-                const removeGroupIds = removeGroups.map(item => item.id);
-                if (hitElementGroups.some(group => removeGroupIds.includes(group.id))) {
-                    const group = hitElementGroups.find(group => !removeGroupIds.includes(group.id));
+                const removeGroupIds = removeGroups.map((item) => item.id);
+                if (hitElementGroups.some((group) => removeGroupIds.includes(group.id))) {
+                    const group = hitElementGroups.find((group) => !removeGroupIds.includes(group.id));
                     const path = PlaitBoard.findPath(board, siblingElements[0]);
                     Transforms.setNode(board, { groupId: group?.id || undefined }, path);
                 }
@@ -2028,8 +2038,35 @@ function measureElement(element, options, containerMaxWidth = 10000) {
         lineTexts.forEach((text, index) => {
             const font = getFont(text, { fontFamily: options.fontFamily, fontSize: options.fontSize });
             ctx.font = font;
-            const textMetrics = ctx.measureText(text.text);
-            lineWidth += textMetrics.width;
+            // Windows 平台下的特殊处理
+            if (IS_WINDOWS) {
+                let adjustedWidth = 0;
+                // 逐字符处理
+                for (let i = 0; i < text.text.length; i++) {
+                    const char = text.text[i];
+                    const charMetrics = ctx.measureText(char);
+                    // 判断是否为汉字（通过 Unicode 范围）
+                    if (/[\u4e00-\u9fa5]/.test(char)) {
+                        adjustedWidth += charMetrics.width;
+                    }
+                    else {
+                        // 非汉字字符的宽度调整
+                        if (/[a-zA-Z]/.test(char)) {
+                            adjustedWidth += charMetrics.width + 1.5; // 字母
+                        }
+                        else if (/[0-9]/.test(char)) {
+                            adjustedWidth += charMetrics.width + 1.5; // 数字
+                        }
+                        else {
+                            adjustedWidth += charMetrics.width + 0.8; // 其他符号
+                        }
+                    }
+                }
+                lineWidth += adjustedWidth;
+            }
+            else {
+                lineWidth += ctx.measureText(text.text).width;
+            }
             const isLast = index === lineTexts.length - 1;
             // skip when text is empty and is not last text of line
             if (text['font-size'] && (isLast || text.text !== '')) {
@@ -2231,5 +2268,5 @@ const withImage = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AStar, ActiveGenerator, AlignTransform, Alignment, BASE, BoardCreationMode, CommonElementFlavour, DEFAULT_FILL, DEFAULT_FONT_FAMILY, DEFAULT_ROUTE_MARGIN, FOREIGN_OBJECT_IMAGE_CLASS_NAME, Generator, GroupComponent, IS_RESIZING, IS_ROTATING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PlaitCommonElementRef, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, ResizeHandle, StrokeStyle, TRANSPARENT, TextManage, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, addRotating, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, animate, buildClipboardData, buildCompositionData, buildImage, buildText, calculatePolylineLength, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, drawRotateHandle, findFirstTextEditor, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getEditingTextEditor, getElementArea, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getLineHeightByFontSize, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getStrokeLineDash, getSymmetricHandleIndex, getTextEditors, getTextEditorsByElement, getTextManages, getTimestamp, getUnitVectorByPointAndPoint, hasAfterDraw, hasMoreThanOnePoint, hasResizeHandle, insertClipboardData, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isFilled, isPointOnSegment, isResizing, isResizingByCondition, isRotating, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, linear, measureElement, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, removeRotating, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, sortElementsByArea, withGroup, withImage, withResize, withText };
+export { AStar, ActiveGenerator, AlignTransform, Alignment, BASE, BoardCreationMode, CommonElementFlavour, DEFAULT_FILL, DEFAULT_FONT_FAMILY, DEFAULT_ROUTE_MARGIN, FOREIGN_OBJECT_IMAGE_CLASS_NAME, Generator, GroupComponent, IS_RESIZING, IS_ROTATING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PlaitCommonElementRef, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, ResizeHandle, StrokeStyle, TRANSPARENT, TextManage, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, addRotating, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, animate, buildClipboardData, buildCompositionData, buildImage, buildText, calculatePolylineLength, createActiveGenerator, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, drawRotateHandle, findFirstTextEditor, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getEditingTextEditor, getElementArea, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getLineHeightByFontSize, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getStrokeLineDash, getSymmetricHandleIndex, getTextEditors, getTextEditorsByElement, getTextManages, getTimestamp, getUnitVectorByPointAndPoint, hasAfterDraw, hasMoreThanOnePoint, hasResizeHandle, insertClipboardData, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isFilled, isPointOnSegment, isResizing, isResizingByCondition, isRotating, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, linear, measureElement, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, removeRotating, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, sortElementsByArea, withGroup, withImage, withResize, withText };
 //# sourceMappingURL=plait-common.mjs.map