svg to bezier conversion

1 files changed, 116 insertions, 0 deletions

diff --git a/src/client/util/bezierFit.ts b/src/client/util/bezierFit.ts
index fbc2bb7cd..f5696afaf 100644
--- a/src/client/util/bezierFit.ts
+++ b/src/client/util/bezierFit.ts
@@ -2,8 +2,18 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-param-reassign */
 /* eslint-disable camelcase */
+import e from 'cors';
 import { Point } from '../../pen-gestures/ndollar';
 
+export enum SVGType {
+    Rect = 'rect',
+    Path = 'path',
+    Circle = 'circle',
+    Ellipse = 'ellipse',
+    Line = 'line',
+    Polygon = 'polygon',
+}
+
 class SmartRect {
     minx: number = 0;
     miny: number = 0;
@@ -616,6 +626,112 @@ export function GenerateControlPoints(coordinates: Point[], alpha = 0.1) {
     return [...firstEnd, ...points, ...lastEnd];
 }
 
+export function SVGToBezier(name: SVGType, attributes: any): Point[] {
+    console.log('in svg to bezier', name, attributes);
+    switch (name) {
+        case 'line':
+            const x1 = parseInt(attributes.x1);
+            const x2 = parseInt(attributes.x2);
+            const y1 = parseInt(attributes.y1);
+            const y2 = parseInt(attributes.y2);
+            return [
+                { X: x1, Y: y1 },
+                { X: x1, Y: y1 },
+                { X: x2, Y: y2 },
+                { X: x2, Y: y2 },
+            ];
+        case 'circle':
+        case 'ellipse':
+            const c = 0.551915024494;
+            const centerX = parseInt(attributes.cx);
+            const centerY = parseInt(attributes.cy);
+            const radiusX = parseInt(attributes.rx) || parseInt(attributes.r);
+            const radiusY = parseInt(attributes.ry) || parseInt(attributes.r);
+            return [
+                { X: centerX, Y: centerY + radiusY },
+                { X: centerX + c * radiusX, Y: centerY + radiusY },
+                { X: centerX + radiusX, Y: centerY + c * radiusY },
+                { X: centerX + radiusX, Y: centerY },
+                { X: centerX + radiusX, Y: centerY },
+                { X: centerX + radiusX, Y: centerY - c * radiusY },
+                { X: centerX + c * radiusX, Y: centerY - radiusY },
+                { X: centerX, Y: centerY - radiusY },
+                { X: centerX, Y: centerY - radiusY },
+                { X: centerX - c * radiusX, Y: centerY - radiusY },
+                { X: centerX - radiusX, Y: centerY - c * radiusY },
+                { X: centerX - radiusX, Y: centerY },
+                { X: centerX - radiusX, Y: centerY },
+                { X: centerX - radiusX, Y: centerY + c * radiusY },
+                { X: centerX - c * radiusX, Y: centerY + radiusY },
+                { X: centerX, Y: centerY + radiusY },
+            ];
+        case 'rect':
+            const x = parseInt(attributes.x);
+            const y = parseInt(attributes.y);
+            const width = parseInt(attributes.width);
+            const height = parseInt(attributes.height);
+            return [
+                { X: x, Y: y },
+                { X: x, Y: y },
+                { X: x + width, Y: y },
+                { X: x + width, Y: y },
+                { X: x + width, Y: y },
+                { X: x + width, Y: y },
+                { X: x + width, Y: y + height },
+                { X: x + width, Y: y + height },
+                { X: x + width, Y: y + height },
+                { X: x + width, Y: y + height },
+                { X: x, Y: y + height },
+                { X: x, Y: y + height },
+                { X: x, Y: y + height },
+                { X: x, Y: y + height },
+                { X: x, Y: y },
+                { X: x, Y: y },
+            ];
+        case 'path':
+            const coordList: Point[] = [];
+            const startPt = attributes.d.match(/M(-?\d+\.?\d*),(-?\d+\.?\d*)/);
+            coordList.push({ X: parseInt(startPt[1]), Y: parseInt(startPt[2]) });
+            const matches: RegExpMatchArray[] = Array.from(
+                attributes.d.matchAll(/Q(-?\d+\.?\d*),(-?\d+\.?\d*) (-?\d+\.?\d*),(-?\d+\.?\d*)|C(-?\d+\.?\d*),(-?\d+\.?\d*) (-?\d+\.?\d*),(-?\d+\.?\d*) (-?\d+\.?\d*),(-?\d+\.?\d*)|L(-?\d+\.?\d*),(-?\d+\.?\d*)/g)
+            );
+            let lastPt: Point;
+            matches.forEach(match => {
+                if (match[0].startsWith('Q')) {
+                    coordList.push({ X: parseInt(match[1]), Y: parseInt(match[2]) });
+                    coordList.push({ X: parseInt(match[1]), Y: parseInt(match[2]) });
+                    coordList.push({ X: parseInt(match[3]), Y: parseInt(match[4]) });
+                    coordList.push({ X: parseInt(match[3]), Y: parseInt(match[4]) });
+                    lastPt = { X: parseInt(match[3]), Y: parseInt(match[4]) };
+                } else if (match[0].startsWith('C')) {
+                    coordList.push({ X: parseInt(match[5]), Y: parseInt(match[6]) });
+                    coordList.push({ X: parseInt(match[7]), Y: parseInt(match[8]) });
+                    coordList.push({ X: parseInt(match[9]), Y: parseInt(match[10]) });
+                    coordList.push({ X: parseInt(match[9]), Y: parseInt(match[10]) });
+                    lastPt = { X: parseInt(match[9]), Y: parseInt(match[10]) };
+                } else {
+                    coordList.push(lastPt || { X: parseInt(startPt[1]), Y: parseInt(startPt[2]) });
+                    coordList.push({ X: parseInt(match[11]), Y: parseInt(match[12]) });
+                    coordList.push({ X: parseInt(match[11]), Y: parseInt(match[12]) });
+                    coordList.push({ X: parseInt(match[11]), Y: parseInt(match[12]) });
+                    lastPt = { X: parseInt(match[11]), Y: parseInt(match[12]) };
+                }
+            });
+            const hasZ = attributes.d.match(/Z/);
+            if (hasZ) {
+                coordList.push(lastPt);
+                coordList.push({ X: parseInt(startPt[1]), Y: parseInt(startPt[2]) });
+                coordList.push({ X: parseInt(startPt[1]), Y: parseInt(startPt[2]) });
+            } else {
+                coordList.pop();
+            }
+            return coordList;
+        case 'polygon':
+        default:
+            return [];
+    }
+}
+
 /*
 static double                GetTValueFromSValue  (const BezierRep &parent, double t, double endT, bool left, double influenceDistance, double &excess) {
 double dist = 0;