@abyss-project/main 1.0.63 → 1.0.65

package/dist/utils/shape.utils.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sceneToSVG = exports.arrowToSvg = exports.commentToSvg = exports.imageToSvg = exports.iconToSvg = exports.textToSvg = exports.ellipseToSvg = exports.diamondToSvg = exports.rectangleToSvg = void 0;
+const __1 = require("..");
+const draw_type_1 = require("../types/draw.type");
+const rectangleToSvg = (position, size, style) => {
+    const x = position.x - size.width / 2;
+    const y = position.y - size.height / 2;
+    const width = size.width;
+    const height = size.height;
+    const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+    const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+    const centerX = position.x;
+    const centerY = position.y;
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" opacity="${style.opacity}" rx="${style.cornerRadius}" ry="${style.cornerRadius}" stroke-dasharray="${style.lineDash || 'none'}" transform="rotate(${style.rotation} ${centerX} ${centerY})" />`;
+};
+exports.rectangleToSvg = rectangleToSvg;
+const diamondToSvg = (position, size, style) => {
+    const cx = position.x;
+    const cy = position.y;
+    const halfWidth = size.width / 2;
+    const halfHeight = size.height / 2;
+    const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+    const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+    const points = [
+        `${cx},${cy - halfHeight}`,
+        `${cx + halfWidth},${cy}`,
+        `${cx},${cy + halfHeight}`,
+        `${cx - halfWidth},${cy}`,
+    ].join(' ');
+    return `<polygon points="${points}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" stroke-dasharray="${style.lineDash || 'none'}" opacity="${style.opacity}" transform="rotate(${style.rotation} ${cx} ${cy})" />`;
+};
+exports.diamondToSvg = diamondToSvg;
+const ellipseToSvg = (position, size, style) => {
+    const cx = position.x;
+    const cy = position.y;
+    const radiusX = size.width / 2;
+    const radiusY = size.height / 2;
+    const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+    const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+    return `<ellipse cx="${cx}" cy="${cy}" rx="${radiusX}" ry="${radiusY}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" opacity="${style.opacity}" stroke-dasharray="${style.lineDash || 'none'}" transform="rotate(${style.rotation} ${cx} ${cy})" />`;
+};
+exports.ellipseToSvg = ellipseToSvg;
+const textToSvg = (position, style, text) => {
+    const x = position.x;
+    const y = position.y;
+    const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+    const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+    return `<text x="${x}" y="${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" opacity="${style.opacity}" font-size="${style.fontSize}" font-family="${style.fontFamily}"
+  stroke-dasharray="${style.lineDash || 'none'}" text-anchor="middle" dominant-baseline="middle" transform="rotate(${style.rotation} ${x} ${y})">${text}</text>`;
+};
+exports.textToSvg = textToSvg;
+const iconToSvg = (position, size, style, iconSymbol) => {
+    const x = position.x;
+    const y = position.y;
+    const fillColor = style.fillColor === 'none' ? 'none' : style.fillColor;
+    const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+    const fontSize = Math.min(size.width, size.height) * 0.8;
+    return `<text x="${x}" y="${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" opacity="${style.opacity}" font-size="${fontSize}" font-family="Arial" text-anchor="middle" dominant-baseline="middle" transform="rotate(${style.rotation} ${x} ${y})">${iconSymbol}</text>`;
+};
+exports.iconToSvg = iconToSvg;
+const imageToSvg = (position, size, style, src) => {
+    const x = position.x - size.width / 2;
+    const y = position.y - size.height / 2;
+    const width = size.width;
+    const height = size.height;
+    const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+    const centerX = position.x;
+    const centerY = position.y;
+    return `<image x="${x}" y="${y}" width="${width}" height="${height}" href="${src}" opacity="${style.opacity}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" rx="${style.cornerRadius}" ry="${style.cornerRadius}" transform="rotate(${style.rotation} ${centerX} ${centerY})" />`;
+};
+exports.imageToSvg = imageToSvg;
+const commentToSvg = (position, size, style, id) => {
+    const cx = position.x;
+    const cy = position.y;
+    const radius = size.width / 2;
+    const fillColor = style.fillColor === 'none' ? 'transparent' : style.fillColor;
+    const strokeColor = style.strokeColor === 'none' ? 'none' : style.strokeColor;
+    const fontSize = size.width * 0.6;
+    const textX = cx;
+    const textY = cy + fontSize * 0.35;
+    return `
+    <g opacity="${style.opacity}" transform="rotate(${style.rotation} ${cx} ${cy})">
+      <defs>
+        <filter id="comment-shadow-${id}" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="2" dy="2" stdDeviation="5" flood-color="black" flood-opacity="0.3"/>
+        </filter>
+      </defs>
+      <circle cx="${cx}" cy="${cy}" r="${radius}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${style.strokeWidth}" filter="url(#comment-shadow-${id})" />
+      <text x="${textX}" y="${textY}" fill="white" font-size="${fontSize}" font-family="Arial" text-anchor="middle" dominant-baseline="middle" font-weight="bold">!</text>
+    </g>`;
+};
+exports.commentToSvg = commentToSvg;
+const renderEndpointStyleSvg = (x, y, style, angle, strokeColor, fillColor, strokeWidth) => {
+    switch (style) {
+        case 'circle':
+            return `<circle cx="${x}" cy="${y}" r="6" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+        case 'square':
+            const squareX = x - 6;
+            const squareY = y - 6;
+            return `<rect x="${squareX}" y="${squareY}" width="12" height="12" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" transform="rotate(${angle * (180 / Math.PI)} ${x} ${y})" />`;
+        case 'diamond':
+            return `<polygon points="${x},${y - 6} ${x + 6},${y} ${x},${y + 6} ${x - 6},${y}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" transform="rotate(${angle * (180 / Math.PI)} ${x} ${y})" />`;
+        case 'arrow':
+            const arrowSize = 8;
+            const x1 = x - arrowSize * Math.cos(angle - Math.PI / 6);
+            const y1 = y - arrowSize * Math.sin(angle - Math.PI / 6);
+            const x2 = x - arrowSize * Math.cos(angle + Math.PI / 6);
+            const y2 = y - arrowSize * Math.sin(angle + Math.PI / 6);
+            return `<polygon points="${x},${y} ${x1},${y1} ${x2},${y2}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+        case 'none':
+        default:
+            return '';
+    }
+};
+const arrowToSvg = (style, startEndpoint, endEndpoint, fromPos, toPos) => {
+    const angle = Math.atan2(toPos.y - fromPos.y, toPos.x - fromPos.x);
+    let svg = `<g opacity="${style.opacity}">`;
+    svg += `<line x1="${fromPos.x}" y1="${fromPos.y}" x2="${toPos.x}" y2="${toPos.y}" stroke="${style.strokeColor}" stroke-width="${style.strokeWidth}" />`;
+    svg += renderEndpointStyleSvg(fromPos.x, fromPos.y, startEndpoint.style, angle + Math.PI, style.strokeColor, style.fillColor, style.strokeWidth);
+    svg += renderEndpointStyleSvg(toPos.x, toPos.y, endEndpoint.style, angle, style.strokeColor, style.fillColor, style.strokeWidth);
+    svg += '</g>';
+    return svg;
+};
+exports.arrowToSvg = arrowToSvg;
+const sceneToSVG = (shapes, width, height) => {
+    const shapeEls = shapes
+        .sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0))
+        .map((s) => {
+        var _a, _b;
+        switch (s.type) {
+            case draw_type_1.DrawShapeType.RECTANGLE:
+                return (0, exports.rectangleToSvg)(s.position, s.size, s.style);
+            case draw_type_1.DrawShapeType.DIAMOND:
+                return (0, exports.diamondToSvg)(s.position, s.size, s.style);
+            case draw_type_1.DrawShapeType.ELLIPSE:
+                return (0, exports.ellipseToSvg)(s.position, s.size, s.style);
+            case draw_type_1.DrawShapeType.TEXT:
+                return (0, exports.textToSvg)(s.position, s.style, s.text || '');
+            case draw_type_1.DrawShapeType.ICON:
+                const iconSymbol = __1.ICON_LIBRARY[s.iconType] || '';
+                return (0, exports.iconToSvg)(s.position, s.size, s.style, iconSymbol);
+            case draw_type_1.DrawShapeType.IMAGE:
+                return (0, exports.imageToSvg)(s.position, s.size, s.style, s.src);
+            case draw_type_1.DrawShapeType.COMMENT:
+                return (0, exports.commentToSvg)(s.position, s.size, s.style, s.id);
+            case draw_type_1.DrawShapeType.ARROW:
+                if (s.startEndpoint && s.endEndpoint) {
+                    const fromPos = s.startEndpoint.kind === 'port'
+                        ? (_a = shapes.find((shape) => { var _a; return shape.id === ((_a = s.startEndpoint) === null || _a === void 0 ? void 0 : _a.shapeId); })) === null || _a === void 0 ? void 0 : _a.position
+                        : {
+                            x: s.startEndpoint.x,
+                            y: s.startEndpoint.y,
+                        };
+                    const toPos = s.endEndpoint.kind === 'port'
+                        ? (_b = shapes.find((shape) => { var _a; return shape.id === ((_a = s.endEndpoint) === null || _a === void 0 ? void 0 : _a.shapeId); })) === null || _b === void 0 ? void 0 : _b.position
+                        : {
+                            x: s.endEndpoint.x,
+                            y: s.endEndpoint.y,
+                        };
+                    if (!fromPos || !toPos)
+                        return '';
+                    return (0, exports.arrowToSvg)(s.style, s.startEndpoint, s.endEndpoint, fromPos, toPos);
+                }
+                return '';
+            default:
+                return '';
+        }
+    });
+    const defs = `
+<defs>
+  <marker id="arrow" markerWidth="10" markerHeight="10" refX="10" refY="5" orient="auto-start-reverse">
+    <path d="M0,0 L10,5 L0,10 z" fill="currentColor"/>
+  </marker>
+</defs>`;
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+  ${defs}
+  ${shapeEls.join('\n')}
+</svg>`;
+};
+exports.sceneToSVG = sceneToSVG;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abyss-project/main",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "Core package to interact with Abyss-Project",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,6 +23,7 @@
     "dayjs": "^1.10.7",
     "discord.js": "^14.7.1",
     "lodash": "^4.17.21",
+    "lz-string": "^1.5.0",
     "reflect-metadata": "^0.1.13",
     "uuid": "^9.0.0"
   },