Optimisation (bof bof) du packaging. Optimisation des imports.

package-lock.json

@@ -46,6 +46,7 @@
         "sass-loader": "^13.1.0",
         "style-loader": "^2.0.0",
         "svg-inline-loader": "^0.8.2",
+        "terser-webpack-plugin": "^5.3.6",
         "ts-loader": "^9.2.6",
         "ts-node": "^10.7.0",
         "typescript": "^4.8.2",

package.json

 {
   "name": "@verdi8/blob-analysis-lab-demo",
   "version": "1.0.0",
-  "description": "Un projet temporaire qick'n'dirty de démo d'analyse de photos de blobs",
+  "description": "Un projet éphémère d'analyse de photos de blobs",
   "private": true,
   "scripts": {
     "serve": "webpack serve --open --config webpack.staging.js",
@@ -48,6 +48,7 @@
     "sass-loader": "^13.1.0",
     "style-loader": "^2.0.0",
     "svg-inline-loader": "^0.8.2",
+    "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.2.6",
     "ts-node": "^10.7.0",
     "typescript": "^4.8.2",

src/assets/images/here.svg

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131.05070243472312 88.27716039866368">
-    <!-- svg-source:excalidraw -->
+    <!-- arrow by excalidraw -->
 
-    <defs>
-        <style>
-            @font-face {
-            font-family: "Virgil";
-            src: url("https://excalidraw.com/Virgil.woff2");
-            }
-            @font-face {
-            font-family: "Cascadia";
-            src: url("https://excalidraw.com/Cascadia.woff2");
-            }
-        </style>
-    </defs>
     <rect x="0" y="0" width="131.05070243472312" height="88.27716039866368" fill="none"></rect>
     <g stroke-linecap="round">
         <g transform="translate(44.48445506720407 42.18917581060259) rotate(0 36.96977789509731 -15.50219226513667)">
@@ -29,7 +17,7 @@
         </g>
     </g>
     <g transform="translate(10 52.27716039866368) rotate(0 34.5 13)">
-        <text x="34.5" y="19" font-family="Virgil, Segoe UI Emoji" font-size="20px" text-anchor="middle" fill="black"
+        <text x="34.5" y="19" font-family="Indie Flower" font-size="20px" text-anchor="middle" fill="black"
               style="white-space: pre;" direction="ltr">départ
         </text>
     </g>

src/bootstrap.scss

+// Optimisation de bootstrap : voir https://getbootstrap.com/docs/5.2/customize/optimize/
+
+@import "~bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+// scss-docs-start import-stack
+// Configuration
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+
+// Layout & components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+//@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+//@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+//@import "~bootstrap/scss/breadcrumb";
+//@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+//@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+//@import "~bootstrap/scss/close";
+//@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+//@import "~bootstrap/scss/tooltip";
+//@import "~bootstrap/scss/popover";
+//@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+//@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
+// scss-docs-end import-stack

src/data/coords/coords.tsx

 import * as paper from "paper";
-import {PathCoords} from "./pathCoords";
 
 
 /**

src/data/coords/transform/toEllipseFitter.ts

@@ -5,10 +5,10 @@ import {EllipseCoords} from "../ellipseCoords";
 import {Coords} from "../coords";
 import * as paper from "paper";
 import {types} from "sass";
-import Color = types.Color;
 import {Transformation} from "./transformation";
 import {PathCoords} from "../pathCoords";
 import {ImageDataWrapper} from "../../../render/ImageDataWrapper";
+
 const  HALFPI  : number= 1.5707963267949;
 
 /**

src/data/coords/transform/transformation.ts

-
 import {Coords} from "../coords";
 
 /**

src/data/coords/vectorCoords.ts

-
 import * as paper from "paper";
 import {Coords} from "./coords";
 

src/index.tsx

-
 import "./lab.scss"
 
 // Init de font-awesome
@@ -6,20 +5,19 @@ import "./lab.scss"
 import {dom, library} from '@fortawesome/fontawesome-svg-core';
 import {fas} from '@fortawesome/free-solid-svg-icons';
 import {far} from '@fortawesome/free-regular-svg-icons';
+// Init de paper.js
+import * as paper from "paper";
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {Lab} from './lab';
+
 library.add(fas, far);
 dom.i2svg();
 dom.watch();
 
-// Init de paper.js
-import * as paper from "paper";
-
 // Create an empty project and a view for the canvas:
 paper.install(window);
 
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { Lab } from './lab';
-
 ReactDOM.render(
     <React.StrictMode>
         <Lab />

src/instruments/blobMask.ts

@@ -119,6 +119,9 @@ export class BlobMask extends AbstractInstrument<PathCoords> implements Instrume
      * Déplacement de la souris
      */
     private onMouseDrag(event : paper.MouseEvent) : boolean {
+        if(event.modifiers) {
+
+        }
         if(!this.active) {
             return true;
         }

src/instruments/instrument.ts

 import * as paper from "paper";
-import {DEBUG_MODE, Lab} from "../lab";
+import {Lab} from "../lab";
 import {Coords} from "../data/coords/coords";
 import {PaperUtils} from "../utils/paperUtils";
-import {ToEllipseFitter} from "../data/coords/transform/toEllipseFitter";
 
 /**
  * Un instrument d'analyse

src/lab.scss

@@ -4,5 +4,7 @@
 //$font-size-base: 0.9rem;
 
 @import "~bootswatch/dist/flatly/variables";
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap";
 @import "~bootswatch/dist/flatly/bootswatch";
+
+@import url("https://fonts.googleapis.com/css2?family=Indie+Flower");

src/lab.tsx

@@ -14,7 +14,6 @@ import {PathCoords} from "./data/coords/pathCoords";
 import {DownloadStep} from "./ui/steps/downloadStep";
 import {PaperUtils} from "./utils/paperUtils";
 import {EllipseCoords} from "./data/coords/ellipseCoords";
-import Here from "./assets/images/here.svg";
 import {Welcome} from "./ui/welcome";
 
 /**

src/ui/steps/stepManager.tsx

@@ -3,7 +3,7 @@
  */
 import {Step, StepState} from "./step";
 import * as React from "react";
-import {ReactElement, RefObject} from "react";
+import {ReactElement} from "react";
 import {ArrayUtils} from "../../utils/arrayUtils";
 import {Accordion} from "react-bootstrap";
 

webpack.common.js

@@ -12,14 +12,14 @@ module.exports = {
                 use: 'ts-loader',
                 exclude: /node_modules/,
             },
-            // {
-            //     test: /\.svg$/,
-            //     use: 'svg-inline-loader?classPrefix=true'
-            // },
             {
                 test: /\.svg$/,
                 use: ['@svgr/webpack'],
             },
+            {
+                test: /\.woff(2)?$/,
+                type: 'asset/inline',
+            },
             {
                 test: /\.(css|scss)$/,
                 use: [
@@ -40,7 +40,7 @@ module.exports = {
         ]
     },
     resolve: {
-        extensions: ['.css', '.js', '.ts', '.tsx']
+        extensions: ['.js', '.ts', '.tsx']
     },
     plugins: [
         new webpackCommonJs.DefinePlugin({

webpack.production.js

@@ -2,6 +2,7 @@
 const { merge } = require('webpack-merge');
 const webpack = require('webpack');
 const common = require('./webpack.common');
+const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = merge(common, {
     mode: 'production',
@@ -10,6 +11,10 @@ module.exports = merge(common, {
 
         })
     ],
+    optimization: {
+        minimize: true,
+        minimizer: [new TerserPlugin()],
+    },
     performance: {
         maxAssetSize: 3000000, // ~3Mo
         maxEntrypointSize: 3000000, // ~3Mo