refactor(model): extract Rgba & Tool to lib model (#24)

* refactor(model): extract `Rgba` & `Tool` to lib `model`

* refactor(model): remove mapping path to non-existing `@talus/math`

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "@nrwl/nx"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "prettier/@typescript-eslint"
+  ],
+  "rules": {
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-parameter-properties": "off",
+    "@nrwl/nx/enforce-module-boundaries": [
+      "error",
+      {
+        "allow": [],
+        "depConstraints": [{ "sourceTag": "*", "onlyDependOnLibsWithTags": ["*"] }]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
+}

README.md

@@ -45,6 +45,8 @@ This project was generated using [Nx](https://nx.dev) with the following command
 
 8. `ng generate @nrwl/angular:component sidenav-shell --project=ui --module=sidenav-shell --export`
 
+9. `ng generate @nrwl/workspace:library model --linter=eslint`
+
 ## Installations
 
 ### Node
@@ -164,6 +166,8 @@ See scripts on [nx.dev](https://nx.dev/angular/api/workspace/npmscripts)
 
 - `yarn nx --help`
 
+- `yarn run affected:dep-graph`
+
 ## Ng
 
 ### Update

angular.json

@@ -265,6 +265,30 @@
           }
         }
       }
+    },
+    "model": {
+      "root": "libs/model",
+      "sourceRoot": "libs/model/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "config": "libs/model/.eslintrc",
+            "tsConfig": ["libs/model/tsconfig.lib.json", "libs/model/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**", "!libs/model/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/model/jest.config.js",
+            "tsConfig": "libs/model/tsconfig.spec.json"
+          }
+        }
+      }
     }
   },
   "cli": {

apps/frontend/src/app/options-panel/options-panel.component.spec.ts

@@ -3,9 +3,9 @@ import { MatIconModule } from '@angular/material';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Action, MemoizedSelector, Store } from '@ngrx/store';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { Rgba } from '@talus/model';
 import { Observable, of } from 'rxjs';
 import * as fromApp from '../app.reducer';
-import { Rgba } from '../model/rgba.value';
 import { initialMockState } from '../testing';
 import { OptionsPanelComponent } from './options-panel.component';
 

apps/frontend/src/app/options-panel/options-panel.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
+import { Rgba } from '@talus/model';
 import { UiColorDialogColor } from '@talus/ui';
 import { combineLatest, Observable } from 'rxjs';
 import * as fromApp from '../app.reducer';
-import { Rgba } from '../model/rgba.value';
 import { openColorDialog } from './options-panel.actions';
 
 @Component({

apps/frontend/src/app/options-panel/options-panel.reducer.ts

@@ -1,6 +1,6 @@
 import { createReducer, on } from '@ngrx/store';
+import { Rgba } from '@talus/model';
 import { UiColorDialogColor } from '@talus/ui';
-import { Rgba } from '../model/rgba.value';
 import { selectColor } from './options-panel.actions';
 
 export const featureKey = 'optionsPanel';

apps/frontend/src/app/scene-viewer-container/grid.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
+import { intToRgba } from '@talus/model';
 import { Coord, Grid, MeshData, nodeToMesh } from '@talus/vdb';
-import { intToRgba } from '../model/rgba.value';
 
 /**
  * Keeps the mutable state of the single grid. This state is not part of the store, due to

apps/frontend/src/app/scene-viewer-container/scene-viewer-container.component.spec.ts

@@ -3,12 +3,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MemoizedSelector, Store } from '@ngrx/store';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { rgbaToInt, Tool } from '@talus/model';
 import { UiPointerButton, UiPointerPickInfo } from '@talus/ui';
 import { Coord } from '@talus/vdb';
 import { Subject } from 'rxjs';
 import * as fromApp from '../app.reducer';
-import { rgbaToInt } from '../model/rgba.value';
-import { Tool } from '../model/tool.value';
 import { initialMockState } from '../testing';
 import { removeVoxel, setVoxel } from './scene-viewer-container.actions';
 import { SceneViewerContainerComponent } from './scene-viewer-container.component';

apps/frontend/src/app/scene-viewer-container/scene-viewer-container.component.ts

@@ -2,12 +2,11 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ViewChild } from '@a
 // import '@babylonjs/core/Rendering/edgesRenderer';
 // import '@babylonjs/core/Rendering/outlineRenderer';
 import { select, Store } from '@ngrx/store';
+import { Rgba, rgbaToInt, Tool } from '@talus/model';
 import { UiPointerButton, UiPointerPickInfo, UiSceneViewerComponent } from '@talus/ui';
 import { Coord } from '@talus/vdb';
 import { combineLatest, Observable } from 'rxjs';
 import * as fromApp from '../app.reducer';
-import { Rgba, rgbaToInt } from '../model/rgba.value';
-import { Tool } from '../model/tool.value';
 import { paintVoxel, removeVoxel, setVoxel } from './scene-viewer-container.actions';
 
 @Component({

apps/frontend/src/app/tools-panel/tools-panel.actions.ts

@@ -1,4 +1,4 @@
 import { createAction, props } from '@ngrx/store';
-import { Tool } from '../model/tool.value';
+import { Tool } from '@talus/model';
 
 export const selectTool = createAction('[toolsPanel] Select tool', props<{ id: Tool }>());

apps/frontend/src/app/tools-panel/tools-panel.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
+import { Tool } from '@talus/model';
 import { UiToolbarToolChange, UiToolbarToolConfig } from '@talus/ui';
 import { Observable } from 'rxjs';
 import * as fromApp from '../app.reducer';
-import { Tool } from '../model/tool.value';
 import { selectTool } from './tools-panel.actions';
 
 @Component({

apps/frontend/src/app/tools-panel/tools-panel.reducer.spec.ts

@@ -1,4 +1,4 @@
-import { Tool } from '../model/tool.value';
+import { Tool } from '@talus/model';
 import { selectTool } from './tools-panel.actions';
 import { reducer } from './tools-panel.reducer';
 

apps/frontend/src/app/tools-panel/tools-panel.reducer.ts

@@ -1,5 +1,5 @@
 import { createReducer, on } from '@ngrx/store';
-import { Tool } from '../model/tool.value';
+import { Tool } from '@talus/model';
 import { selectTool } from './tools-panel.actions';
 
 export const featureKey = 'toolsPanel';

libs/model/.eslintrc

@@ -0,0 +1 @@
+{ "extends": "../../.eslintrc", "rules": {} }

libs/model/README.md

@@ -0,0 +1,8 @@
+# model
+
+This library was generated with `ng generate @nrwl/workspace:library model --linter=eslint` of
+[Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `ng test model` to execute the unit tests via [Jest](https://jestjs.io).

libs/model/jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  name: 'model',
+  preset: '../../jest.config.js',
+  // https://github.com/nrwl/nx/issues/837#issuecomment-501188633
+  reporters: [
+    'default',
+    [
+      'jest-junit',
+      {
+        outputDirectory: './test-results/jest',
+        outputName: 'libs-model.junit.xml',
+        classNameTemplate: '{classname}',
+        titleTemplate: '{title}',
+      },
+    ],
+  ],
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../coverage/libs/model',
+};

libs/model/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/rgba.value';
+export * from './lib/tool.value';

libs/model/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

libs/model/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "exclude": ["**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

libs/model/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js", "**/*.spec.jsx", "**/*.d.ts"]
+}

nx.json

@@ -26,11 +26,14 @@
     },
     "ui-e2e": {
       "tags": ["scope:frontend"],
-      "implicitDependencies": []
+      "implicitDependencies": ["ui"]
     },
     "vdb": {
       "tags": ["scope:libs"],
       "implicitDependencies": []
+    },
+    "model": {
+      "tags": ["scope:libs"]
     }
   }
 }

package.json

@@ -62,6 +62,7 @@
     "@babel/core": "7.8.3",
     "@babylonjs/inspector": "4.1.0-beta.21",
     "@nrwl/cypress": "8.11.2",
+    "@nrwl/eslint-plugin-nx": "8.11.2",
     "@nrwl/jest": "8.11.2",
     "@nrwl/node": "8.11.2",
     "@nrwl/storybook": "8.11.2",
@@ -71,12 +72,16 @@
     "@types/benchmark": "1.0.31",
     "@types/jest": "24.9.0",
     "@types/node": "13.1.8",
+    "@typescript-eslint/eslint-plugin": "2.3.2",
+    "@typescript-eslint/parser": "2.3.2",
     "babel-loader": "8.0.6",
     "babylonjs": "4.1.0-beta.21",
     "benchmark": "2.1.4",
     "codelyzer": "5.2.1",
     "cypress": "3.8.2",
     "dotenv": "8.2.0",
+    "eslint": "6.1.0",
+    "eslint-config-prettier": "6.0.0",
     "gh-pages": "2.2.0",
     "handlebars": "4.7.2",
     "jasmine-marbles": "0.6.0",

tsconfig.json

@@ -11,8 +11,8 @@
     "module": "esnext",
     "moduleResolution": "node",
     "paths": {
+      "@talus/model": ["libs/model/src/index.ts"],
       "@talus/ui": ["libs/ui/src/index.ts"],
-      "@talus/math": ["libs/math/src/index.ts"],
       "@talus/vdb": ["libs/vdb/src/index.ts"]
     },
     "rootDir": ".",