@idraw/util 0.4.2 → 1.0.0-alpha.1

package/dist/esm/view/position.d.ts

@@ -1,15 +1,15 @@
-import type { ElementPosition } from '@idraw/types';
+import type { MaterialPosition } from '@idraw/types';
 export declare function calcResultMovePosition(opts: {
-    from: ElementPosition;
-    to: ElementPosition;
+    from: MaterialPosition;
+    to: MaterialPosition;
 }): {
-    from: ElementPosition;
-    to: ElementPosition;
+    from: MaterialPosition;
+    to: MaterialPosition;
 } | null;
 export declare function calcRevertMovePosition(opts: {
-    from: ElementPosition;
-    to: ElementPosition;
+    from: MaterialPosition;
+    to: MaterialPosition;
 }): {
-    from: ElementPosition;
-    to: ElementPosition;
+    from: MaterialPosition;
+    to: MaterialPosition;
 } | null;

package/dist/esm/view/position.js

@@ -74,6 +74,6 @@ export function calcRevertMovePosition(opts) {
     }
     return {
         from: [...result.to],
-        to: [...result.from]
+        to: [...result.from],
     };
 }

package/dist/esm/view/rect.d.ts

@@ -1,2 +1,2 @@
-import type { ElementSize } from '@idraw/types';
-export declare function checkRectIntersect(rect1: ElementSize, rect2: ElementSize): boolean;
+import type { MaterialSize } from '@idraw/types';
+export declare function checkRectIntersect(rect1: MaterialSize, rect2: MaterialSize): boolean;

package/dist/esm/view/rect.js

@@ -1,11 +1,11 @@
 export function checkRectIntersect(rect1, rect2) {
     const rect1MinX = rect1.x;
     const rect1MinY = rect1.y;
-    const rect1MaxX = rect1.x + rect1.w;
-    const rect1MaxY = rect1.y + rect1.h;
+    const rect1MaxX = rect1.x + rect1.width;
+    const rect1MaxY = rect1.y + rect1.height;
     const rect2MinX = rect2.x;
     const rect2MinY = rect2.y;
-    const rect2MaxX = rect2.x + rect2.w;
-    const rect2MaxY = rect2.y + rect2.h;
+    const rect2MaxX = rect2.x + rect2.width;
+    const rect2MaxY = rect2.y + rect2.height;
     return rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY;
 }

package/dist/esm/view/resize-material.d.ts

@@ -0,0 +1,4 @@
+import type { StrictMaterial, MaterialSize, MaterialOperations, ModifyRecord } from '@idraw/types';
+export declare function resizeEffectGroupMaterial(mtrl: StrictMaterial<'group'>, size: Partial<MaterialSize>, opts?: {
+    resizeEffect?: MaterialOperations['resizeEffect'];
+}): ModifyRecord<'resizeMaterials'> | null;

package/dist/esm/view/resize-material.js

@@ -0,0 +1,266 @@
+import { istype } from '../tool/istype';
+import { formatNumber } from '../tool/number';
+import { toFlattenMaterial } from './modify-record';
+const doNum = (n) => {
+    return formatNumber(n, { decimalPlaces: 4 });
+};
+function resizeMaterialBaseAttributesByRatio(mtrl, opts) {
+    const beforeMtrl = {};
+    const afterMtrl = {};
+    const record = {
+        type: 'modifyMaterial',
+        time: Date.now(),
+        content: {
+            method: 'modifyMaterial',
+            id: mtrl.id,
+            before: null,
+            after: null,
+        },
+    };
+    const { xRatio, yRatio, maxRatio } = opts;
+    const middleRatio = (xRatio + yRatio) / 2;
+    const { strokeWidth, cornerRadius, strokeDasharray, shadowOffsetX, shadowOffsetY, shadowBlur } = mtrl;
+    if (typeof strokeWidth === 'number') {
+        mtrl.strokeWidth = doNum(strokeWidth * middleRatio);
+        beforeMtrl.strokeWidth = strokeWidth;
+        afterMtrl.strokeWidth = mtrl.strokeWidth;
+    }
+    else if (Array.isArray(mtrl.strokeWidth)) {
+        const bw = strokeWidth;
+        mtrl.strokeWidth = [doNum(bw[0] * yRatio), doNum(bw[1] * xRatio), doNum(bw[2] * yRatio), doNum(bw[3] * xRatio)];
+        beforeMtrl.strokeWidth = [...bw];
+        afterMtrl.strokeWidth = [...strokeWidth];
+    }
+    if (typeof cornerRadius === 'number') {
+        mtrl.cornerRadius = doNum(cornerRadius * middleRatio);
+        beforeMtrl.cornerRadius = cornerRadius;
+        afterMtrl.cornerRadius = mtrl.cornerRadius;
+    }
+    else if (Array.isArray(mtrl.cornerRadius)) {
+        const br = cornerRadius;
+        mtrl.cornerRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+        beforeMtrl.cornerRadius = [...br];
+        afterMtrl.cornerRadius = [...cornerRadius];
+    }
+    if (Array.isArray(strokeDasharray)) {
+        strokeDasharray.forEach((dash, i) => {
+            mtrl.strokeDasharray[i] = doNum(dash * maxRatio);
+        });
+        beforeMtrl.strokeDasharray = [...strokeDasharray];
+        afterMtrl.strokeDasharray = [...mtrl.strokeDasharray];
+    }
+    if (typeof shadowOffsetX === 'number') {
+        mtrl.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+        beforeMtrl.shadowOffsetX = shadowOffsetX;
+        afterMtrl.shadowOffsetX = mtrl.shadowOffsetX;
+    }
+    if (typeof shadowOffsetY === 'number') {
+        mtrl.shadowOffsetY = doNum(shadowOffsetY * maxRatio);
+        beforeMtrl.shadowOffsetY = shadowOffsetY;
+        afterMtrl.shadowOffsetY = mtrl.shadowOffsetY;
+    }
+    if (typeof shadowBlur === 'number') {
+        mtrl.shadowBlur = doNum(shadowBlur * maxRatio);
+        beforeMtrl.shadowBlur = shadowBlur;
+        afterMtrl.shadowBlur = mtrl.shadowBlur;
+    }
+    record.content.before = toFlattenMaterial(beforeMtrl);
+    record.content.after = toFlattenMaterial(afterMtrl);
+    return record;
+}
+function resizeMaterialBaseByRatio(mtrl, opts) {
+    const { xRatio, yRatio } = opts;
+    const { id, x, y, width, height } = mtrl;
+    mtrl.x = doNum(x * xRatio);
+    mtrl.y = doNum(y * yRatio);
+    mtrl.width = doNum(width * xRatio);
+    mtrl.height = doNum(height * yRatio);
+    const record = {
+        type: 'modifyMaterial',
+        time: Date.now(),
+        content: {
+            method: 'modifyMaterial',
+            id: id,
+            before: { x, y, width, height },
+            after: { x: mtrl.x, y: mtrl.y, width: mtrl.width, height: mtrl.height },
+        },
+    };
+    const attributesRecord = resizeMaterialBaseAttributesByRatio(mtrl, opts);
+    record.content.before = Object.assign(Object.assign({}, record.content.before), attributesRecord.content.before);
+    record.content.after = Object.assign(Object.assign({}, record.content.after), attributesRecord.content.after);
+    return record;
+}
+function resizeTextMaterialAttributesByRatio(mtrl, opts) {
+    const { minRatio, maxRatio } = opts;
+    const { fontSize, lineHeight } = mtrl;
+    const ratio = (minRatio + maxRatio) / 2;
+    const beforeFlattenMtrl = {};
+    const afterFlattenMtrl = {};
+    if (fontSize && fontSize > 0) {
+        mtrl.fontSize = doNum(fontSize * ratio);
+        beforeFlattenMtrl['fontSize'] = fontSize;
+        afterFlattenMtrl['fontSize'] = mtrl.fontSize;
+    }
+    if (lineHeight && lineHeight > 0) {
+        mtrl.lineHeight = doNum(lineHeight * ratio);
+        beforeFlattenMtrl['lineHeight'] = lineHeight;
+        afterFlattenMtrl['lineHeight'] = mtrl.lineHeight;
+    }
+    const record = {
+        type: 'modifyMaterial',
+        time: Date.now(),
+        content: {
+            method: 'modifyMaterial',
+            id: mtrl.id,
+            before: beforeFlattenMtrl,
+            after: afterFlattenMtrl,
+        },
+    };
+    return record;
+}
+function deepResizeMaterialByRatio(mtrl, opts, record) {
+    const { type, id } = mtrl;
+    const rootRecord = resizeMaterialBaseByRatio(mtrl, opts);
+    const rootRecordBefore = Object.assign(Object.assign({}, rootRecord.content.before), { id });
+    const rootRecordAfter = Object.assign(Object.assign({}, rootRecord.content.after), { id });
+    record === null || record === void 0 ? void 0 : record.content.before.push(rootRecordBefore);
+    record === null || record === void 0 ? void 0 : record.content.after.push(rootRecordAfter);
+    if (type === 'circle') {
+    }
+    else if (type === 'text') {
+        const textRecord = resizeTextMaterialAttributesByRatio(mtrl, opts);
+        Object.keys(textRecord.content.before || {}).forEach((key) => {
+            var _a;
+            rootRecordBefore[key] = (_a = textRecord.content.before) === null || _a === void 0 ? void 0 : _a[key];
+        });
+        Object.keys(textRecord.content.after || {}).forEach((key) => {
+            var _a;
+            rootRecordAfter[key] = (_a = textRecord.content.after) === null || _a === void 0 ? void 0 : _a[key];
+        });
+    }
+    else if (type === 'image') {
+    }
+    else if (type === 'svgCode') {
+    }
+    else if (type === 'foreignObject') {
+    }
+    else if (type === 'path') {
+    }
+    else if (type === 'group' && Array.isArray(mtrl.children)) {
+        mtrl.children.forEach((child) => {
+            deepResizeMaterialByRatio(child, opts, record);
+        });
+    }
+}
+function fixedResizeGroupMaterialChildren(mtrl, opts, record) {
+    if (!(mtrl.type === 'group' && Array.isArray(mtrl.children))) {
+        return;
+    }
+    const { moveX, moveY, moveH, moveW } = opts;
+    let childChangedX = 0;
+    let childChangedY = 0;
+    let needReszieChildren = false;
+    if ((moveX !== 0 || moveY !== 0) && (moveH !== 0 || moveW !== 0)) {
+        needReszieChildren = true;
+        childChangedX = -moveX;
+        childChangedY = -moveY;
+    }
+    if (needReszieChildren !== true) {
+        return;
+    }
+    mtrl.children.forEach((child) => {
+        const { id, x, y } = child;
+        const afterX = x + childChangedX;
+        const afterY = y + childChangedY;
+        const before = { id, x, y };
+        const after = { id, x: afterX, y: afterY };
+        child.x = afterX;
+        child.y = afterY;
+        record === null || record === void 0 ? void 0 : record.content.before.push(before);
+        record === null || record === void 0 ? void 0 : record.content.after.push(after);
+    });
+}
+export function resizeEffectGroupMaterial(mtrl, size, opts) {
+    const record = {
+        type: 'resizeMaterials',
+        time: Date.now(),
+        content: {
+            method: 'modifyMaterials',
+            before: [],
+            after: [],
+        },
+    };
+    const id = mtrl.id;
+    const originalX = mtrl.x;
+    const originalY = mtrl.y;
+    const originalW = mtrl.width;
+    const originalH = mtrl.height;
+    const resizeX = (istype.number(size.x) ? size.x : mtrl.x);
+    const resizeY = (istype.number(size.y) ? size.y : mtrl.y);
+    const resizeW = (size.width && size.width > 0 ? size.width : mtrl.width) || 0;
+    const resizeH = (size.height && size.height > 0 ? size.height : mtrl.height) || 0;
+    const beforeGroupMtrl = {
+        id,
+        x: originalX,
+        y: originalY,
+        width: originalW,
+        height: originalH,
+    };
+    const afterGroupMtrl = {
+        id,
+        x: resizeX,
+        y: resizeY,
+        width: resizeW,
+        height: resizeH,
+    };
+    if ((opts === null || opts === void 0 ? void 0 : opts.resizeEffect) === 'deepResize') {
+        record.content.before.push(beforeGroupMtrl);
+        record.content.after.push(afterGroupMtrl);
+        const xRatio = resizeW / mtrl.width;
+        const yRatio = resizeH / mtrl.height;
+        if (xRatio === yRatio && xRatio === 1) {
+            return record;
+        }
+        const minRatio = Math.min(xRatio, yRatio);
+        const maxRatio = Math.max(xRatio, yRatio);
+        mtrl.width = resizeW;
+        mtrl.height = resizeH;
+        const resizeRadioOpts = { xRatio, yRatio, minRatio, maxRatio };
+        if (mtrl.type === 'group' && Array.isArray(mtrl.children)) {
+            mtrl.children.forEach((child) => {
+                deepResizeMaterialByRatio(child, resizeRadioOpts, record);
+            });
+        }
+        const groupAttributesRecord = resizeMaterialBaseAttributesByRatio(mtrl, resizeRadioOpts);
+        Object.keys(groupAttributesRecord.content.before || {}).forEach((key) => {
+            var _a;
+            beforeGroupMtrl[key] = (_a = groupAttributesRecord.content.before) === null || _a === void 0 ? void 0 : _a[key];
+        });
+        Object.keys(groupAttributesRecord.content.after || {}).forEach((key) => {
+            var _a;
+            afterGroupMtrl[key] = (_a = groupAttributesRecord.content.after) === null || _a === void 0 ? void 0 : _a[key];
+        });
+        return record;
+    }
+    if ((opts === null || opts === void 0 ? void 0 : opts.resizeEffect) === 'fixed') {
+        record.content.before.push(beforeGroupMtrl);
+        record.content.after.push(afterGroupMtrl);
+        const moveX = resizeX - mtrl.x;
+        const moveY = resizeY - mtrl.y;
+        const moveW = resizeW - mtrl.width;
+        const moveH = resizeH - mtrl.height;
+        fixedResizeGroupMaterialChildren(mtrl, { moveX, moveY, moveH, moveW }, record);
+        mtrl.width = resizeW;
+        mtrl.height = resizeH;
+        mtrl.x = resizeX;
+        mtrl.y = resizeY;
+        return record;
+    }
+    mtrl.width = resizeW;
+    mtrl.height = resizeH;
+    mtrl.x = resizeX;
+    mtrl.y = resizeY;
+    record.content.before.push(beforeGroupMtrl);
+    record.content.after.push(afterGroupMtrl);
+    return record;
+}

package/dist/esm/view/rotate.d.ts

@@ -1,14 +1,14 @@
-import type { ViewContext2D, PointSize, ElementSize, ViewRectVertexes, Element } from '@idraw/types';
+import type { ViewContext2D, Point, MaterialSize, ViewRectVertexes, StrictMaterial } from '@idraw/types';
 export declare function parseRadianToAngle(radian: number): number;
 export declare function parseAngleToRadian(angle: number): number;
-export declare function rotateByCenter(ctx: ViewContext2D | CanvasRenderingContext2D | ViewContext2D, angle: number, center: PointSize, callback: (ctx: ViewContext2D | CanvasRenderingContext2D) => void): void;
-export declare function rotateElement(ctx: ViewContext2D | CanvasRenderingContext2D | ViewContext2D, elemSize: ElementSize, callback: (ctx: ViewContext2D | CanvasRenderingContext2D) => void): void;
-export declare function calcElementCenter(elem: ElementSize): PointSize;
-export declare function calcElementCenterFromVertexes(ves: ViewRectVertexes): PointSize;
-export declare function calcRadian(center: PointSize, start: PointSize, end: PointSize): number;
-export declare function rotatePoint(center: PointSize, start: PointSize, radian: number): PointSize;
-export declare function rotatePointInGroup(point: PointSize, groupQueue: Element<'group'>[]): PointSize;
-export declare function getElementRotateVertexes(elemSize: ElementSize, center: PointSize, angle: number): ViewRectVertexes;
-export declare function rotateElementVertexes(elemSize: ElementSize): ViewRectVertexes;
-export declare function rotateVertexes(center: PointSize, ves: ViewRectVertexes, radian: number): ViewRectVertexes;
+export declare function rotateByCenter(ctx: ViewContext2D | CanvasRenderingContext2D | ViewContext2D, angle: number, center: Point, callback: (ctx: ViewContext2D | CanvasRenderingContext2D) => void): void;
+export declare function rotateMaterial(ctx: ViewContext2D | CanvasRenderingContext2D | ViewContext2D, mtrlSize: MaterialSize, callback: (ctx: ViewContext2D | CanvasRenderingContext2D) => void): void;
+export declare function calcMaterialCenter(mtrl: MaterialSize): Point;
+export declare function calcMaterialCenterFromVertexes(ves: ViewRectVertexes): Point;
+export declare function calcRadian(center: Point, start: Point, end: Point): number;
+export declare function rotatePoint(center: Point, start: Point, radian: number): Point;
+export declare function rotatePointInGroup(point: Point, groupQueue: StrictMaterial<'group'>[]): Point;
+export declare function getMaterialRotateVertexes(mtrlSize: MaterialSize, center: Point, angle: number): ViewRectVertexes;
+export declare function rotateMaterialVertexes(mtrlSize: MaterialSize): ViewRectVertexes;
+export declare function rotateVertexes(center: Point, ves: ViewRectVertexes, radian: number): ViewRectVertexes;
 export declare function limitAngle(angle: number): number;

package/dist/esm/view/rotate.js

@@ -19,31 +19,31 @@ export function rotateByCenter(ctx, angle, center, callback) {
         ctx.translate(-center.x, -center.y);
     }
 }
-export function rotateElement(ctx, elemSize, callback) {
-    const center = calcElementCenter(elemSize);
-    rotateByCenter(ctx, elemSize.angle || 0, center, () => {
+export function rotateMaterial(ctx, mtrlSize, callback) {
+    const center = calcMaterialCenter(mtrlSize);
+    rotateByCenter(ctx, mtrlSize.angle || 0, center, () => {
         callback(ctx);
     });
 }
-export function calcElementCenter(elem) {
+export function calcMaterialCenter(mtrl) {
     const p = {
-        x: elem.x + elem.w / 2,
-        y: elem.y + elem.h / 2
+        x: mtrl.x + mtrl.width / 2,
+        y: mtrl.y + mtrl.height / 2,
     };
     return p;
 }
-export function calcElementCenterFromVertexes(ves) {
+export function calcMaterialCenterFromVertexes(ves) {
     const startX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
     const startY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
     const endX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
     const endY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
-    const elemSize = {
+    const mtrlSize = {
         x: startX,
         y: startY,
-        w: endX - startX,
-        h: endY - startY
+        width: endX - startX,
+        height: endY - startY,
     };
-    return calcElementCenter(elemSize);
+    return calcMaterialCenter(mtrlSize);
 }
 export function calcRadian(center, start, end) {
     const startRadian = calcLineRadian(center, start);
@@ -149,25 +149,25 @@ export function rotatePointInGroup(point, groupQueue) {
         let resultX = point.x;
         let resultY = point.y;
         groupQueue.forEach((group) => {
-            const { x, y, w, h, angle = 0 } = group;
-            const center = calcElementCenter({ x, y, w, h, angle });
+            const { x, y, width, height, angle = 0 } = group;
+            const center = calcMaterialCenter({ x, y, width, height, angle });
             const temp = rotatePoint(center, { x: resultX, y: resultY }, parseAngleToRadian(angle));
             resultX = temp.x;
             resultY = temp.y;
         });
         return {
             x: resultX,
-            y: resultY
+            y: resultY,
         };
     }
     return point;
 }
-export function getElementRotateVertexes(elemSize, center, angle) {
-    const { x, y, w, h } = elemSize;
+export function getMaterialRotateVertexes(mtrlSize, center, angle) {
+    const { x, y, width, height } = mtrlSize;
     let p1 = { x, y };
-    let p2 = { x: x + w, y };
-    let p3 = { x: x + w, y: y + h };
-    let p4 = { x, y: y + h };
+    let p2 = { x: x + width, y };
+    let p3 = { x: x + width, y: y + height };
+    let p4 = { x, y: y + height };
     if (angle && (angle > 0 || angle < 0)) {
         const radian = parseAngleToRadian(limitAngle(angle));
         p1 = rotatePoint(center, p1, radian);
@@ -177,17 +177,17 @@ export function getElementRotateVertexes(elemSize, center, angle) {
     }
     return [p1, p2, p3, p4];
 }
-export function rotateElementVertexes(elemSize) {
-    const { angle = 0 } = elemSize;
-    const center = calcElementCenter(elemSize);
-    return getElementRotateVertexes(elemSize, center, angle);
+export function rotateMaterialVertexes(mtrlSize) {
+    const { angle = 0 } = mtrlSize;
+    const center = calcMaterialCenter(mtrlSize);
+    return getMaterialRotateVertexes(mtrlSize, center, angle);
 }
 export function rotateVertexes(center, ves, radian) {
     return [
         rotatePoint(center, { x: ves[0].x, y: ves[0].y }, radian),
         rotatePoint(center, { x: ves[1].x, y: ves[1].y }, radian),
         rotatePoint(center, { x: ves[2].x, y: ves[2].y }, radian),
-        rotatePoint(center, { x: ves[3].x, y: ves[3].y }, radian)
+        rotatePoint(center, { x: ves[3].x, y: ves[3].y }, radian),
     ];
 }
 export function limitAngle(angle) {

package/dist/esm/view/static.d.ts

@@ -0,0 +1,13 @@
+import type { DefaultMaterialAttributes, MaterialSize, MaterialRectAttributes, MaterialCircleAttributes, MaterialTextAttributes, MaterialSVGCodeAttributes, MaterialImageAttributes, MaterialGroupAttributes } from '@idraw/types';
+export declare const defaultText = "Text";
+export declare const defaultFill = "#787878";
+export declare const defaultStroke = "#525252";
+export declare const defaultImageSlotSVG = "<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"200\" fill=\"#787878\"><path d=\"M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64z m513.9 437.1c-1.4 1.2-3.3 1.9-5.2 1.9H177.2c-4.4 0-8-3.6-8-8 0-1.9 0.7-3.7 1.9-5.2l170.3-202c2.8-3.4 7.9-3.8 11.3-1 0.3 0.3 0.7 0.6 1 1l99.4 118 158.1-187.5c2.8-3.4 7.9-3.8 11.3-1 0.3 0.3 0.7 0.6 1 1l229.6 271.6c2.6 3.3 2.2 8.4-1.2 11.2z\" ></path></svg>";
+export declare const defaultImageHref: string;
+export declare function getDefaultMaterialAttributes(): DefaultMaterialAttributes;
+export declare function getDefaultMaterialRectAttributes(): MaterialRectAttributes;
+export declare function getDefaultMaterialCircleAttributes(): MaterialCircleAttributes;
+export declare function getDefaultMaterialTextAttributes(materialSize: MaterialSize): MaterialTextAttributes;
+export declare function getDefaultMaterialSVGAttributes(): MaterialSVGCodeAttributes;
+export declare function getDefaultMaterialImageAttributes(): MaterialImageAttributes;
+export declare function getDefaultMaterialGroupAttributes(): MaterialGroupAttributes;

package/dist/esm/view/static.js

@@ -0,0 +1,89 @@
+export const defaultText = 'Text';
+export const defaultFill = '#787878';
+export const defaultStroke = '#525252';
+export const defaultImageSlotSVG = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="${defaultFill}"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64z m513.9 437.1c-1.4 1.2-3.3 1.9-5.2 1.9H177.2c-4.4 0-8-3.6-8-8 0-1.9 0.7-3.7 1.9-5.2l170.3-202c2.8-3.4 7.9-3.8 11.3-1 0.3 0.3 0.7 0.6 1 1l99.4 118 158.1-187.5c2.8-3.4 7.9-3.8 11.3-1 0.3 0.3 0.7 0.6 1 1l229.6 271.6c2.6 3.3 2.2 8.4-1.2 11.2z" ></path></svg>`;
+export const defaultImageHref = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(defaultImageSlotSVG)}`;
+export function getDefaultMaterialAttributes() {
+    const config = {
+        opacity: 1,
+        display: 'inline',
+        visibility: 'visible',
+        overflow: 'visible',
+        fill: defaultFill,
+        fillOpacity: 1,
+        fillRule: 'nonzero',
+        stroke: defaultStroke,
+        strokeWidth: 0,
+        strokeOpacity: 1,
+        strokeLinecap: 'butt',
+        strokeLinejoin: 'miter',
+        strokeDasharray: [],
+        strokeDashoffset: 0,
+        strokeMiterlimit: 0,
+        text: defaultText,
+        fontSize: 12,
+        fontFamily: 'system-ui',
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        textAnchor: 'start',
+        textDecoration: 'none',
+        letterSpacing: 'normal',
+        wordSpacing: 'normal',
+        writingMode: 'horizontal-tb',
+        textAlign: 'left',
+        verticalAlign: 'top',
+        href: defaultImageHref,
+    };
+    return config;
+}
+export function getDefaultMaterialRectAttributes() {
+    const attributesConfig = getDefaultMaterialAttributes();
+    const attributes = {
+        fill: attributesConfig.fill,
+    };
+    return attributes;
+}
+export function getDefaultMaterialCircleAttributes() {
+    const attributesConfig = getDefaultMaterialAttributes();
+    const attributes = {
+        fill: attributesConfig.fill,
+        cx: 200,
+        cy: 200,
+        r: 100,
+    };
+    return attributes;
+}
+export function getDefaultMaterialTextAttributes(materialSize) {
+    const attributesConfig = getDefaultMaterialAttributes();
+    const attributes = {
+        text: defaultText,
+        fill: attributesConfig.fill,
+        fontFamily: attributesConfig.fontFamily,
+        fontWeight: attributesConfig.fontWeight,
+        fontSize: materialSize.width / defaultText.length,
+        textAlign: 'center',
+        verticalAlign: 'middle',
+    };
+    return attributes;
+}
+export function getDefaultMaterialSVGAttributes() {
+    const attributes = {
+        code: `<svg t="1701004189871" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"   width="200" height="200"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"   fill="${defaultFill}"></path></svg>`,
+    };
+    return attributes;
+}
+export function getDefaultMaterialImageAttributes() {
+    const attributes = {
+        href: defaultImageHref,
+    };
+    return attributes;
+}
+export function getDefaultMaterialGroupAttributes() {
+    const attributesConfig = getDefaultMaterialAttributes();
+    const attributes = {
+        children: [],
+        fill: attributesConfig.fill,
+        overflow: 'hidden',
+    };
+    return attributes;
+}

package/dist/esm/view/styles.d.ts

@@ -0,0 +1,11 @@
+import type { StylesProps } from '@idraw/types';
+export declare function parseStyles(styles: StylesProps, selector: string): string;
+export declare function injectStyles(opts: {
+    styles: StylesProps;
+    rootClassName: string;
+    type?: 'default' | 'element';
+}): void;
+export declare function removeStyles(opts: {
+    rootClassName: string;
+    type: 'default' | 'element';
+}): void;

package/dist/esm/view/styles.js

@@ -0,0 +1,78 @@
+const defaultPixelKeys = [
+    'width',
+    'height',
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'margin',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'marginBottom',
+    'padding',
+    'paddingLeft',
+    'paddingRight',
+    'paddingTop',
+    'paddingBottom',
+];
+const parseCSSNumValue = (key, value) => {
+    const str = defaultPixelKeys.includes(key) ? `${value}px` : value;
+    return str;
+};
+function toKebabCase(str) {
+    return str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+}
+export function parseStyles(styles, selector) {
+    const baseStyles = [];
+    const nestedStyles = [];
+    for (const key in styles) {
+        let value = styles[key];
+        if (typeof value === 'number') {
+            value = parseCSSNumValue(key, value);
+        }
+        if (key.startsWith('@')) {
+            nestedStyles.push(`${key} { ${parseStyles(value, selector)} }`);
+        }
+        else if (key.startsWith('&') || key.startsWith('.') || key.startsWith('#')) {
+            const nestedSelector = key.startsWith('&') ? key.replace('&', selector) : `${selector} ${key}`;
+            nestedStyles.push(parseStyles(value, nestedSelector));
+        }
+        else {
+            baseStyles.push(`${toKebabCase(key)}: ${value};`);
+        }
+    }
+    const cssString = baseStyles.length ? `${selector} { ${baseStyles.join(' ')} }` : '';
+    return [cssString, ...nestedStyles].filter(Boolean).join('\n');
+}
+const ATTR_STYLE_KEY = 'data-idraw-style-id';
+const styleSheetMap = {};
+export function injectStyles(opts) {
+    const { styles, rootClassName, type } = opts;
+    const cssString = parseStyles(styles, `.${rootClassName}`);
+    if (type === 'element') {
+        const style = document.createElement('style');
+        style.setAttribute(ATTR_STYLE_KEY, rootClassName);
+        style.textContent = cssString;
+        const container = document.head || document.body;
+        container.appendChild(style);
+    }
+    else {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(cssString);
+        styleSheetMap[rootClassName] = sheet;
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    }
+}
+export function removeStyles(opts) {
+    const { rootClassName, type } = opts;
+    if (type === 'element') {
+        const style = document.querySelector(`[${ATTR_STYLE_KEY}="${rootClassName}"]`);
+        style === null || style === void 0 ? void 0 : style.remove();
+    }
+    else if (styleSheetMap[rootClassName]) {
+        const sheet = styleSheetMap[rootClassName];
+        const newSheets = document.adoptedStyleSheets.filter((s) => s !== sheet);
+        document.adoptedStyleSheets = newSheets;
+    }
+}