feat: initial commit

.github/workflows/build.yml

@@ -0,0 +1,27 @@
+name: Build
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x, 15.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm ci
+      - name: Validate with svelte-check
+        run: npm run validate
+      - name: Build application
+        run: npm run build
+      - name: Run tests
+        run: npm run test

.github/workflows/deploy.yml

@@ -0,0 +1,25 @@
+name: Deploy
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 15.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 15.x
+      - name: Install dependencies
+        run: npm ci
+      - name: Build application
+        run: npm run build
+      - uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: public # The folder the action should deploy.
+          CLEAN: true # Automatically remove deleted files from the deploy branch

.gitignore

@@ -0,0 +1,6 @@
+/node_modules/
+/public/build/
+
+.DS_Store
+/.idea/
+/.vscode/

README.md

@@ -0,0 +1,3 @@
+# Flextangler
+
+_Create flextangles with your own images._

TODO.md

@@ -0,0 +1,6 @@
+# To-Do
+
+- [ ] remove unused code
+- [ ] rotate the underlying hexagon, so the result has a flat side on the bottom
+- [ ] improve typing
+- [ ] use strict TypeScript mode

__tests__/drawing/mock.ts

@@ -0,0 +1,18 @@
+export class MockContext {
+  _x = 0;
+  _y = 0;
+  _rotation = 0;
+  moveTo(x: number, y: number) {
+    this._x = x;
+    this._y = y;
+  }
+  translate(x: number, y: number) {
+    this._x += x;
+    this._y += y;
+  }
+  rotate(rotation: number) {
+    this._rotation = rotation;
+  }
+}
+
+export declare interface MockContext extends CanvasRenderingContext2D {}

__tests__/drawing/util.test.ts

@@ -0,0 +1,84 @@
+import { movePointlike, rotateAround } from '../../src/drawing/utils';
+import { p } from '../../src/factories';
+import { MockContext } from './mock';
+
+describe('rotateAround', () => {
+  let mockCtx: MockContext;
+
+  beforeEach(() => {
+    mockCtx = new MockContext();
+  });
+
+  describe('squares', () => {
+    it('should rotate around the center', () => {
+      rotateAround(
+        mockCtx,
+        { x: 50, y: 0, width: 50, height: 50 },
+        rotateAround.CENTER_CENTER,
+        180
+      );
+      expect(mockCtx._x).toBe(75);
+      expect(mockCtx._y).toBe(25);
+      expect(mockCtx._rotation).toBe(Math.PI);
+    });
+
+    it('should rotate around the top right', () => {
+      rotateAround(
+        mockCtx,
+        { x: 50, y: 0, width: 50, height: 50 },
+        rotateAround.RIGHT_TOP,
+        180
+      );
+      expect(mockCtx._x).toBe(100);
+      expect(mockCtx._y).toBe(0);
+      expect(mockCtx._rotation).toBe(Math.PI);
+    });
+
+    it('should rotate around the bottom right', () => {
+      rotateAround(
+        mockCtx,
+        { x: 50, y: 0, width: 50, height: 50 },
+        rotateAround.RIGHT_BOTTOM,
+        180
+      );
+      expect(mockCtx._x).toBe(100);
+      expect(mockCtx._y).toBe(50);
+      expect(mockCtx._rotation).toBe(Math.PI);
+    });
+  });
+});
+
+describe('movePointlike', () => {
+  it('should update x and y and preserve other properties', () => {
+    expect(
+      movePointlike(
+        {
+          x: 50,
+          y: 50,
+          width: 10,
+          height: 10,
+        },
+        p(20, 20)
+      )
+    ).toEqual({
+      x: 70,
+      y: 70,
+      width: 10,
+      height: 10,
+    });
+    expect(
+      movePointlike(
+        {
+          x: 50,
+          y: 50,
+          points: [{ x: 10, y: 0 }],
+        },
+        p(30, 80)
+      )
+    ).toEqual({
+      x: 80,
+      y: 130,
+      points: [{ x: 10, y: 0 }],
+    });
+  });
+});

__tests__/formulas/math.test.ts

@@ -0,0 +1,33 @@
+import {
+  degreeToRadian,
+  legOfIsoscelesTriangle,
+  pythagorean,
+} from '../../src/formulas/math';
+
+describe('pythagorean', () => {
+  it('should compute correctly', () => {
+    expect(pythagorean(3, 4)).toBe(5);
+  });
+});
+
+describe('legOfIsoscelesTriangle', () => {
+  it('should compute correctly', () => {
+    expect(
+      legOfIsoscelesTriangle({
+        base: 6,
+        height: 4,
+      })
+    ).toBe(5);
+  });
+});
+
+describe('degreeToRadian', () => {
+  it('should compute correctly', () => {
+    expect(degreeToRadian(0)).toBe(0);
+    expect(degreeToRadian(90)).toBe(0.5 * Math.PI);
+    expect(degreeToRadian(180)).toBe(Math.PI);
+    expect(degreeToRadian(270)).toBe(1.5 * Math.PI);
+    expect(degreeToRadian(360)).toBe(2 * Math.PI);
+    expect(degreeToRadian(-90)).toBe(-0.5 * Math.PI);
+  });
+});

__tests__/formulas/processing.test.ts

@@ -0,0 +1,83 @@
+import {
+  centerCropLargestSquare,
+  isLandscape,
+  isPortrait,
+  isSquared,
+  shortestSide,
+} from '../../src/formulas/processing';
+
+describe('shortestSide', () => {
+  it('should return the correct value', () => {
+    expect(shortestSide({ naturalWidth: 100, naturalHeight: 200 })).toBe(100);
+    expect(shortestSide({ naturalWidth: 200, naturalHeight: 200 })).toBe(200);
+  });
+
+  it('should throw for dimensions <= 0', () => {
+    expect(() =>
+      shortestSide({ naturalWidth: 100, naturalHeight: -200 })
+    ).toThrow();
+  });
+});
+
+describe('isLandscape', () => {
+  it('should return the correct value', () => {
+    expect(isLandscape({ naturalWidth: 200, naturalHeight: 100 })).toBe(true);
+    expect(isLandscape({ naturalWidth: 100, naturalHeight: 100 })).toBe(true);
+    expect(isLandscape({ naturalWidth: 100, naturalHeight: 200 })).toBe(false);
+  });
+});
+
+describe('isPortrait', () => {
+  it('should return the correct value', () => {
+    expect(isPortrait({ naturalWidth: 200, naturalHeight: 100 })).toBe(false);
+    expect(isPortrait({ naturalWidth: 100, naturalHeight: 100 })).toBe(true);
+    expect(isPortrait({ naturalWidth: 100, naturalHeight: 200 })).toBe(true);
+  });
+});
+
+describe('isSquared', () => {
+  it('should return the correct value', () => {
+    expect(isSquared({ naturalWidth: 200, naturalHeight: 100 })).toBe(false);
+    expect(isSquared({ naturalWidth: 100, naturalHeight: 100 })).toBe(true);
+    expect(isSquared({ naturalWidth: 100, naturalHeight: 200 })).toBe(false);
+  });
+});
+
+describe('centerCropLargestSquare', () => {
+  it('should return the correct values for squared images', () => {
+    const actual = centerCropLargestSquare({
+      naturalWidth: 100,
+      naturalHeight: 100,
+    });
+    expect(actual).toEqual({
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+    });
+  });
+  it('should return the correct values for landscape images', () => {
+    const actual = centerCropLargestSquare({
+      naturalWidth: 1000,
+      naturalHeight: 100,
+    });
+    expect(actual).toEqual({
+      width: 100,
+      height: 100,
+      x: 450,
+      y: 0,
+    });
+  });
+  it('should return the correct values for portrait images', () => {
+    const actual = centerCropLargestSquare({
+      naturalWidth: 100,
+      naturalHeight: 1000,
+    });
+    expect(actual).toEqual({
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 450,
+    });
+  });
+});

__tests__/formulas/util.test.ts

@@ -0,0 +1,35 @@
+import { p } from '../../src/factories';
+import { scale, scaleTriangle } from '../../src/formulas/util';
+import { InputValues } from '../../src/types';
+
+describe('scale', () => {
+  const values: InputValues = { triangleBase: 2, triangleHeight: 2 };
+  it('should move the point correctly', () => {
+    expect(scale(p(0, 0))(values)).toEqual(p(0, 0));
+    expect(scale(p(1, 1))(values)).toEqual(p(2, 2));
+    expect(scale(p(1, 1))({ triangleBase: 2, triangleHeight: 0 })).toEqual(
+      p(0, 2)
+    );
+  });
+});
+
+describe('scaleTriangle', () => {
+  const values: InputValues = {
+    triangleBase: 2,
+    triangleHeight: 2,
+  };
+  it('should move the point correctly', () => {
+    expect(scaleTriangle([p(0, 0), p(0, 1), p(1, 1)])(values)).toEqual([
+      p(0, 0),
+      p(0, 2),
+      p(2, 2),
+    ]);
+
+    expect(
+      scaleTriangle([p(0, 0), p(0, 1), p(1, 1)])({
+        triangleBase: 2,
+        triangleHeight: 1,
+      })
+    ).toEqual([p(0, 0), p(0, 2), p(1, 2)]);
+  });
+});

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};