Start animation screen

.github/workflows/deploy-app.yml

@@ -26,7 +26,7 @@ jobs:
           cache: "yarn"
 
       - name: Install Dependencies
-        run: yarn install --prefer-offline --frozen-lockfile --immutable
+        run: yarn install --immutable
 
       - name: Build application
         run: yarn build

.github/workflows/deploy-storybook.yml

@@ -27,7 +27,7 @@ jobs:
           cache: "yarn"
 
       - name: Install Dependencies
-        run: yarn install --prefer-offline --frozen-lockfile --immutable
+        run: yarn install --immutable
 
       - name: Build storybook
         run: yarn build-storybook

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -26,7 +26,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: "yarn"
       - name: Install Dependencies
-        run: yarn install --prefer-offline --frozen-lockfile --immutable
+        run: yarn install --immutable
 
       - name: Check linting rules
         run: yarn lint
@@ -48,7 +48,7 @@ jobs:
           cache: "yarn"
 
       - name: Install Dependencies
-        run: yarn install --prefer-offline --frozen-lockfile --immutable
+        run: yarn install --immutable
 
       - name: Run unit tests
         run: yarn test --coverage

.gitignore

@@ -28,4 +28,12 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-coverage-summary.json
+coverage-summary.json
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.tool-versions

@@ -1 +1 @@
-nodejs 16.5.0
+nodejs 16.15.0

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-3.3.1.cjs
+nodeLinker: node-modules

package.json

@@ -16,13 +16,13 @@
     "geppetto-player": "1.3.3",
     "immer": "^9.0.12",
     "react": "^18.0.0",
-    "react-complex-tree": "1.1.8",
+    "react-complex-tree": "2.0.2",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5",
     "react-scripts": "5.0.1",
     "sass": "^1.51.0",
     "styled-components": "^5.3.3",
-    "typescript": "^4.6.3",
+    "typescript": "~4.7.0",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",
     "workbox-broadcast-update": "^5.1.4",
@@ -49,7 +49,7 @@
     "test:coverage": "react-scripts test --coverage --watchAll=false",
     "test-storybook:coverage": "test-storybook --coverage",
     "coverage-report": "cp coverage/storybook/coverage-storybook.json coverage/coverage-storybook.json && nyc report --reporter=lcovonly --reporter=html -t coverage --report-dir coverage/complete",
-    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2 --coverage\""
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"NODE_ENV=test yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2 --coverage\""
   },
   "eslintConfig": {
     "extends": [
@@ -73,18 +73,18 @@
     "@babel/core": "^7.13.0",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@craco/craco": "^6.4.3",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-coverage": "^0.0.2",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-coverage": "^0.0.7",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/node-logger": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/node-logger": "^6.5.15",
     "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.9",
-    "@storybook/test-runner": "^0.3.0",
+    "@storybook/react": "^6.5.15",
+    "@storybook/test-runner": "^0.9.2",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -98,6 +98,8 @@
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "concurrently": "^7.2.2",
+    "eslint": "^8.32.0",
+    "jest-environment-jsdom": "28.1.3",
     "raw.macro": "^0.4.2",
     "wait-on": "^6.0.1"
   },
@@ -117,10 +119,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "statements": 16,
+        "statements": 10,
         "branches": 8,
-        "lines": 16,
-        "functions": 11
+        "lines": 10,
+        "functions": 10
       },
       "./src/animation/": {
         "statements": 92,
@@ -130,10 +132,12 @@
       }
     },
     "moduleNameMapper": {
-      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
+      "\\.svg$": "<rootDir>/__mocks__/styleMock.js"
     }
   },
   "eslintIgnore": [
     "/src/old/**"
-  ]
+  ],
+  "packageManager": "[email protected]"
 }

src/animation/file2/animations.spec.ts

@@ -0,0 +1,26 @@
+import { isFrameControlAction } from "./animations";
+import { FrameAction } from "./types";
+
+describe("isFrameControlAction", () => {
+  it("returns true for a FrameControlAction", () => {
+    const action: FrameAction = {
+      controlId: "3",
+      controlValue: 1,
+      start: 4500,
+      duration: 500,
+      easingFunction: "linear",
+    };
+
+    expect(isFrameControlAction(action)).toBe(true);
+  });
+
+  it("returns false when not a FrameControlAction", () => {
+    const action: FrameAction = {
+      layerId: "3",
+      start: 4500,
+      visible: false,
+    };
+
+    expect(isFrameControlAction(action)).toBe(false);
+  });
+});

src/animation/file2/animations.ts

@@ -0,0 +1,5 @@
+import { FrameAction, FrameControlAction } from "./types";
+
+export const isFrameControlAction = (
+  action: FrameAction
+): action is FrameControlAction => "controlId" in action;

src/animation/file2/shapes.spec.ts

@@ -1,9 +1,13 @@
+import { Vec2 } from "geppetto-player";
 import { newFile } from "./new";
 import {
   addFolder,
   AddFolderDetails,
+  addPoint,
   addShape,
   AddShapeDetails,
+  deletePoint,
+  movePoint,
   removeShape,
   rename,
   toggleVisibility,
@@ -14,6 +18,7 @@ import {
   getShapeFolderIdByName,
   getShapeIdByName,
 } from "./testFileBuilder";
+import { GeppettoImage } from "./types";
 
 describe("shapes", () => {
   describe("addShape", () => {
@@ -270,6 +275,71 @@ describe("rename", () => {
   });
 });
 
+describe("addPoint", () => {
+  const fileBuild = fileBuilder();
+
+  it("adds a point to a layer", () => {
+    const file = fileBuild.addShape("My Layer").build();
+    const layerId = getShapeIdByName(file, "My Layer");
+
+    const result = addPoint(file, layerId, [50, 10]);
+    expect(result.layers[layerId].points).toEqual([[50, 10]]);
+  });
+});
+
+const addPoints = (
+  file: GeppettoImage,
+  layerId: string,
+  points: Vec2[]
+): GeppettoImage =>
+  points.reduce<GeppettoImage>(
+    (image, current) => addPoint(image, layerId, current),
+    file
+  );
+
+describe("deletePoint", () => {
+  const fileBuild = fileBuilder();
+
+  it("adds a point to a layer", () => {
+    const file = fileBuild.addShape("My Layer").build();
+    const layerId = getShapeIdByName(file, "My Layer");
+    const startFile = addPoints(file, layerId, [
+      [50, 10],
+      [40, 10],
+      [30, 10],
+    ]);
+
+    const result = deletePoint(startFile, layerId, [40, 10]);
+
+    expect(result.layers[layerId].points).toEqual([
+      [50, 10],
+      [30, 10],
+    ]);
+  });
+});
+
+describe("movePoint", () => {
+  const fileBuild = fileBuilder();
+
+  it("updates location of a point", () => {
+    const file = fileBuild.addShape("My Layer").build();
+    const layerId = getShapeIdByName(file, "My Layer");
+    const startFile = addPoints(file, layerId, [
+      [50, 10],
+      [40, 10],
+      [30, 10],
+    ]);
+
+    const result = movePoint(startFile, layerId, [40, 10], [45, 6]);
+
+    expect(result.layers[layerId].points).toEqual([
+      [50, 10],
+      [45, 6],
+      [30, 10],
+    ]);
+  });
+});
+
 describe("removeMutation", () => {
   describe("default remove behavior", () => {
     const fileWithMutation = fileBuilder();

src/application/App.tsx

@@ -5,6 +5,7 @@ import { defaultTheme } from "./theme/default";
 import { ApplicationMenu } from "./applicationMenu/ApplicationMenu";
 import { AppSection } from "./types";
 import { Composition } from "./composition/Composition";
+import { Animation } from "./animation/Animation";
 import { AppContext } from "./contexts/ApplicationContext";
 import { FileContext } from "./contexts/FileContext";
 import { ScreenTranslationContext } from "./contexts/ScreenTranslationContext";
@@ -69,6 +70,13 @@ const App: React.FC = () => {
                   onSectionChange={setAppSection}
                 />
               )}
+              {appSection === "animation" && (
+                <Animation
+                  menu={applicationMenu}
+                  textureState={textureFileState}
+                  onSectionChange={setAppSection}
+                />
+              )}
             </ScreenTranslationContext>
           </AppContext>
         </ImageControlContext>