Merge pull request #96 from armano2/feat/remove_colinear_transformer

feat: add removeCollinear to optimize SVG path data

Author: nfroidure

src/SVGPathData.ts

@@ -57,6 +57,11 @@ export class SVGPathData extends TransformableSVG {
     return this;
   }
 
+  removeCollinear() {
+    this.commands = SVGPathDataTransformer.REMOVE_COLLINEAR(this.commands);
+    return this;
+  }
+
   static encode(commands: SVGCommand[]) {
     return encodeSVGPath(commands);
   }

src/SVGPathDataTransformer.ts

@@ -15,6 +15,7 @@ import {
   type Point,
 } from './mathUtils.js';
 import { SVGPathData } from './SVGPathData.js';
+import { REMOVE_COLLINEAR } from './transformers/remove_collinear.js';
 import { REVERSE_PATH } from './transformers/reverse_path.js';
 import type { SVGCommand, TransformFunction } from './types.js';
 
@@ -816,4 +817,5 @@ export const SVGPathDataTransformer = {
   CLONE,
   CALCULATE_BOUNDS,
   REVERSE_PATH,
+  REMOVE_COLLINEAR,
 };

src/tests/remove_collinear.test.ts

@@ -0,0 +1,75 @@
+import { describe, test, expect } from '@jest/globals';
+
+import { SVGPathData } from '../SVGPathData.js';
+
+function testRemoveCollinear(path: string): string {
+  const pathData = new SVGPathData(path).removeCollinear();
+  return pathData.encode();
+}
+
+describe('Remove collinear points', () => {
+  test('Horizontal line with collinear point', () => {
+    expect(testRemoveCollinear('M10,10 L20,10 L30,10')).toEqual('M10 10L30 10');
+  });
+
+  test('Diagonal line with collinear point', () => {
+    expect(testRemoveCollinear('M10,10 L20,20 L30,30')).toEqual('M10 10L30 30');
+  });
+
+  test('Vertical line with collinear point', () => {
+    expect(testRemoveCollinear('M10,10 L10,20 L10,30')).toEqual('M10 10L10 30');
+  });
+
+  test('Multiple collinear sections', () => {
+    expect(
+      testRemoveCollinear(
+        'M10,10 L20,10 L30,10 L40,20 L50,30 L60,40 L60,50 L60,60',
+      ),
+    ).toEqual('M10 10L30 10L60 40L60 60');
+  });
+
+  test('Preserves curves', () => {
+    expect(
+      testRemoveCollinear('M10,10 C20,20 30,20 40,10 L50,10 L60,10'),
+    ).toEqual('M10 10C20 20 30 20 40 10L60 10');
+  });
+
+  test('Preserves closed paths', () => {
+    expect(testRemoveCollinear('M10,10 L20,10 L30,10 L30,20 L10,20 Z')).toEqual(
+      'M10 10L30 10L30 20L10 20z',
+    );
+  });
+
+  test('Handles multiple subpaths', () => {
+    expect(
+      testRemoveCollinear('M10,10 L20,10 L30,10 M40,40 L50,40 L60,40'),
+    ).toEqual('M10 10L30 10M40 40L60 40');
+  });
+
+  // Tests for relative paths
+  test('Relative horizontal line with collinear point', () => {
+    expect(testRemoveCollinear('m10,10 l10,0 l10,0')).toEqual('m10 10l20 0');
+  });
+
+  test('Relative diagonal line with collinear point', () => {
+    expect(testRemoveCollinear('m10,10 l10,10 l10,10')).toEqual('m10 10l20 20');
+  });
+
+  test('Relative vertical line with collinear point', () => {
+    expect(testRemoveCollinear('m10,10 l0,10 l0,10')).toEqual('m10 10l0 20');
+  });
+
+  test('Mixed relative and absolute commands', () => {
+    expect(testRemoveCollinear('M10,10 L20,10 l10,0 l10,0')).toEqual(
+      'M10 10l30 0',
+    );
+  });
+
+  test('Relative multiple collinear sections', () => {
+    expect(
+      testRemoveCollinear(
+        'm10,10 l10,0 l10,0 l10,10 l10,10 l10,10 l0,10 l0,10',
+      ),
+    ).toEqual('m10 10l20 0l30 30l0 20');
+  });
+});

src/transformers/remove_collinear.ts

@@ -0,0 +1,55 @@
+import { SVGPathData } from '../SVGPathData.js';
+import { SVGPathDataTransformer } from '../index.js';
+import { arePointsCollinear, type Point } from '../mathUtils.js';
+import type { SVGCommand } from '../types.js';
+
+/**
+ * Process a path and remove collinear points
+ * @param commands Array of SVG path commands to process (must be absolute)
+ * @returns New array with collinear points removed
+ */
+export function REMOVE_COLLINEAR(commands: SVGCommand[]): SVGCommand[] {
+  if (commands.length <= 2) return commands; // exit early if there are less than 3 points
+
+  const results: SVGCommand[] = [];
+
+  const points: Point[] = commands.map(
+    SVGPathDataTransformer.INFO((cmd, pXAbs, pYAbs) => {
+      // Calculate absolute coordinates and normlise HV
+      const isRelatve = 'relative' in cmd && cmd.relative;
+      return [
+        'x' in cmd ? cmd.x + (isRelatve ? pXAbs : 0) : pXAbs,
+        'y' in cmd ? cmd.y + (isRelatve ? pYAbs : 0) : pYAbs,
+      ];
+    }),
+  );
+
+  let prevPoint = points[0];
+  results.push(commands[0]); // always keep the first point
+
+  for (let i = 1; i < commands.length; i++) {
+    const cmd = commands[i];
+    const nextCmd = commands[i + 1];
+
+    if (
+      i < commands.length - 1 &&
+      nextCmd &&
+      cmd.type & SVGPathData.LINE_COMMANDS &&
+      nextCmd.type & SVGPathData.LINE_COMMANDS
+    ) {
+      const nextPoint = points[i + 1];
+      // Check triplets of points for collinearity
+      if (arePointsCollinear(prevPoint, points[i], nextPoint)) {
+        // update next point if its relative
+        if ('relative' in nextCmd && nextCmd.relative) {
+          if ('x' in nextCmd) nextCmd.x = nextPoint[0] - prevPoint[0];
+          if ('y' in nextCmd) nextCmd.y = nextPoint[1] - prevPoint[1];
+        }
+        continue;
+      }
+    }
+    results.push(cmd);
+    prevPoint = points[i];
+  }
+  return results;
+}