Revamp CSG functions, make curve canvases consistent & more (#234)

* feat(src): Extract & update CSG's CSS constants

* chore(csg): Remove V1 comments referencing fork issues

* feat(csg): Migrate to BlueprintJS Tooltips

* devfeat(csg): Update samples

* devfeat(curve): Add samples

* docs(curve): Update animation function docs

* ref(csg): Remove default colour

The addition of operation colour preservation and removal of the store/render pattern means that all Shapes now require an explicit colour. Changing the default colour of the wrapped renderer no longer has a visible effect.

* fix(build): Fix `build modules` building no tabs

Revise/clarify the logic of retrieveBundlesAndTabs() and update tests/comment.

* feat(): Enhance & make curve canvases consistent

* feat(csg): Replace hint dots with colons

* ref(csg): Use real js-slang lists

* devfeat(csg): Update colours sample

* devfeat(csg): Add primitives sample

* chore(pkg): Lock modeling version for patch file

* ref(build): Reorder config to match

Left over from tests with explicit tsconfig path when troubleshooting
build errors

* ref(csg): Rename to Operable, no List, move/del funcs

* fix(csg): Fix primitive sample trailing comma

* devfeat(csg): Add Prof's Sierpinski fractal

* FEAT(csg): Overhaul functions, documentation

* devfeat(csg): Update sample import names

* ref(csg): Reorder sample functions

* devfeat(csg): Add rotation sample

* devfeat(csg): Add summary snowglobe example as sample

* docs(csg): Plural categories, bulleted list, tweaks

* ref(csg): Refactor operables

Rename params, non-deep children copy for new Group

* feat(csg): Improve error feedback for pitfalls

* fix(csg): Implement proper ungroup

* feat(csg): Improve error feedback for pitfalls

* feat(csg): Update sample utility funcs

* feat(csg): Update sierpinski sample for new primitive

* fix(rune): Fix low resolution heart

* docs(csg): Link to GitHub samples in summary

* feat(csg): Update sierpinski sample

* feat(csg): Readd custom default colour due to bug #227

* ref(build): Remove leftover from troubleshooting

* docs(csg): Tweak pyramid dimensions description

* feat(sound): Throw error on invalid sound durations

Closes #110

* chore(pkg): Remove unused lodash

* feat(curve): Add Source version to canvases sample

* feat(tabs): Remove enforced spacing of MultiItemDisplay

* ref(csg): Default colour back in constants

* fix(csg): Disallow negative scaling, update docs instead

Based on #206 (comment).

* ref(csg): Rename RGB components to values

They were called components when the params were clamped between 0-1.
Now more fitting to call them values when 0-255.

Author: Cloud7050

package.json

@@ -46,7 +46,6 @@
     "@types/eslint": "^8.4.10",
     "@types/estree": "^1.0.0",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.191",
     "@types/node": "^17.0.23",
     "@types/plotly.js-dist": "npm:@types/plotly.js",
     "@types/react": "^17.0.43",
@@ -87,15 +86,14 @@
     "@blueprintjs/popover2": "^1.4.3",
     "@box2d/core": "^0.10.0",
     "@box2d/debug-draw": "^0.10.0",
-    "@jscad/modeling": "^2.9.5",
+    "@jscad/modeling": "2.9.6",
     "@jscad/regl-renderer": "^2.6.1",
     "@jscad/stl-serializer": "^2.1.13",
     "ace-builds": "^1.4.14",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.4",
     "gl-matrix": "^3.3.0",
     "js-slang": "^1.0.20",
-    "lodash": "^4.17.21",
     "patch-package": "^6.5.1",
     "phaser": "^3.54.0",
     "plotly.js-dist": "^2.17.1",
@@ -115,4 +113,4 @@
       "scripts/src/jest.config.js"
     ]
   }
-}
+}

scripts/bin/build/buildUtils.js

@@ -165,60 +165,70 @@ export const retrieveBundles = async (manifestFile, modules) => {
     return knownBundles;
 };
 /**
- * Function to determine which bundles and tabs to build based on the user's input.
+ * Determines which bundles and tabs to build based on the user's input.
  *
- * @param modules
- * - Pass `null` to indicate that the user did not specify any modules. This
- *   will add all bundles currently registered in the manifest
- * - Pass `[]` to indicate not to add any modules
- * - Pass an array of strings to manually specify modules to process
- * @param tabOpts
- * - Pass `null` to indicate that the user did not specify any tabs. This
- *   will add all tabs currently registered in the manifest
- * - Pass `[]` to indicate not to add any tabs
- * - Pass an array of strings to manually specify tabs to process
- * @param addTabs If `true`, then all tabs of selected bundles will be added to
- * the list of tabs to build.
+ * If no modules and no tabs are specified, it is assumed the user wants to
+ * build everything.
+ *
+ * If modules but no tabs are specified, it is assumed the user only wants to
+ * build those bundles (and possibly those modules' tabs based on
+ * shouldAddModuleTabs).
+ *
+ * If tabs but no modules are specified, it is assumed the user only wants to
+ * build those tabs.
+ *
+ * If both modules and tabs are specified, both of the above apply and are
+ * combined.
+ *
+ * @param modules module names specified by the user
+ * @param tabOptions tab names specified by the user
+ * @param shouldAddModuleTabs whether to also automatically include the tabs of
+ * specified modules
  */
-export const retrieveBundlesAndTabs = async (manifestFile, modules, tabOpts, addTabs = true) => {
+export const retrieveBundlesAndTabs = async (manifestFile, modules, tabOptions, shouldAddModuleTabs = true) => {
     const manifest = await retrieveManifest(manifestFile);
     const knownBundles = Object.keys(manifest);
-    const knownTabs = Object.values(manifest)
+    const knownTabs = Object
+        .values(manifest)
         .flatMap((x) => x.tabs);
-    let bundles;
-    let tabs;
-    if (modules !== null) {
-        // Some modules were specified
+    let bundles = [];
+    let tabs = [];
+    function addSpecificModules() {
+        // If unknown modules were specified, error
         const unknownModules = modules.filter((m) => !knownBundles.includes(m));
         if (unknownModules.length > 0) {
             throw new Error(`Unknown modules: ${unknownModules.join(', ')}`);
         }
-        bundles = modules;
-        if (addTabs) {
-            // If a bundle is being rebuilt, add its tabs
-            tabs = modules.flatMap((bundle) => manifest[bundle].tabs);
-        }
-        else {
-            tabs = [];
+        bundles = bundles.concat(modules);
+        if (shouldAddModuleTabs) {
+            // Add the modules' tabs too
+            tabs = [...tabs, ...modules.flatMap((bundle) => manifest[bundle].tabs)];
         }
     }
-    else {
-        // No modules were specified
-        bundles = knownBundles;
-        tabs = [];
-    }
-    if (tabOpts !== null) {
-        // Tabs were specified
-        const unknownTabs = tabOpts.filter((t) => !knownTabs.includes(t));
+    function addSpecificTabs() {
+        // If unknown tabs were specified, error
+        const unknownTabs = tabOptions.filter((t) => !knownTabs.includes(t));
         if (unknownTabs.length > 0) {
             throw new Error(`Unknown tabs: ${unknownTabs.join(', ')}`);
         }
-        tabs = tabs.concat(tabOpts);
+        tabs = tabs.concat(tabOptions);
     }
-    else {
-        // No tabs were specified
+    function addAllBundles() {
+        bundles = bundles.concat(knownBundles);
+    }
+    function addAllTabs() {
         tabs = tabs.concat(knownTabs);
     }
+    if (modules === null && tabOptions === null) {
+        addAllBundles();
+        addAllTabs();
+    }
+    else {
+        if (modules !== null)
+            addSpecificModules();
+        if (tabOptions !== null)
+            addSpecificTabs();
+    }
     return {
         bundles: [...new Set(bundles)],
         tabs: [...new Set(tabs)],

scripts/bin/build/dev.js

@@ -21,9 +21,9 @@ const waitForQuit = () => new Promise((resolve, reject) => {
 });
 const getBundleContext = ({ srcDir, outDir }, bundles, app) => esbuild({
     ...bundleOptions,
+    entryPoints: bundles.map(bundleNameExpander(srcDir)),
     outbase: outDir,
     outdir: outDir,
-    entryPoints: bundles.map(bundleNameExpander(srcDir)),
     plugins: [{
             name: 'Bundle Compiler',
             async setup(pluginBuild) {
@@ -55,9 +55,9 @@ const getBundleContext = ({ srcDir, outDir }, bundles, app) => esbuild({
 });
 const getTabContext = ({ srcDir, outDir }, tabs) => esbuild({
     ...tabOptions,
+    entryPoints: tabs.map(tabNameExpander(srcDir)),
     outbase: outDir,
     outdir: outDir,
-    entryPoints: tabs.map(tabNameExpander(srcDir)),
     external: ['react*', 'react-dom'],
     plugins: [{
             name: 'Tab Compiler',

scripts/bin/build/modules/index.js

@@ -28,7 +28,7 @@ const getBuildModulesCommand = () => createBuildCommand('modules', true)
     .description('Build modules and their tabs')
     .action(async (modules, { manifest, ...opts }) => {
     const [assets] = await Promise.all([
-        retrieveBundlesAndTabs(manifest, modules, []),
+        retrieveBundlesAndTabs(manifest, modules, null),
         createOutDir(opts.outDir),
     ]);
     await prebuild(opts, assets);

scripts/src/build/__tests__/buildUtils.test.ts

@@ -23,15 +23,15 @@ describe('Test retrieveBundlesAndTabs', () => {
       .toEqual(expect.arrayContaining(['tab0']));
   });
 
-  it('should return only tabs when an empty array is passed for modules', async () => {
+  it('should return nothing when an empty array is passed for modules', async () => {
     const result = await retrieveBundlesAndTabs('', [], null);
 
     expect(result.bundles)
       .toEqual([]);
     expect(result.modulesSpecified)
       .toBe(true);
     expect(result.tabs)
-      .toEqual(expect.arrayContaining(['tab0', 'tab1']));
+      .toEqual([]);
   });
 
   it('should return tabs from the specified modules, and concatenate specified tabs', async () => {

scripts/src/build/buildUtils.ts

@@ -190,69 +190,79 @@ export const retrieveBundles = async (manifestFile: string, modules: string[] |
 };
 
 /**
- * Function to determine which bundles and tabs to build based on the user's input.
+ * Determines which bundles and tabs to build based on the user's input.
  *
- * @param modules
- * - Pass `null` to indicate that the user did not specify any modules. This
- *   will add all bundles currently registered in the manifest
- * - Pass `[]` to indicate not to add any modules
- * - Pass an array of strings to manually specify modules to process
- * @param tabOpts
- * - Pass `null` to indicate that the user did not specify any tabs. This
- *   will add all tabs currently registered in the manifest
- * - Pass `[]` to indicate not to add any tabs
- * - Pass an array of strings to manually specify tabs to process
- * @param addTabs If `true`, then all tabs of selected bundles will be added to
- * the list of tabs to build.
+ * If no modules and no tabs are specified, it is assumed the user wants to
+ * build everything.
+ *
+ * If modules but no tabs are specified, it is assumed the user only wants to
+ * build those bundles (and possibly those modules' tabs based on
+ * shouldAddModuleTabs).
+ *
+ * If tabs but no modules are specified, it is assumed the user only wants to
+ * build those tabs.
+ *
+ * If both modules and tabs are specified, both of the above apply and are
+ * combined.
+ *
+ * @param modules module names specified by the user
+ * @param tabOptions tab names specified by the user
+ * @param shouldAddModuleTabs whether to also automatically include the tabs of
+ * specified modules
  */
 export const retrieveBundlesAndTabs = async (
   manifestFile: string,
   modules: string[] | null,
-  tabOpts: string[] | null,
-  addTabs: boolean = true,
+  tabOptions: string[] | null,
+  shouldAddModuleTabs: boolean = true,
 ) => {
   const manifest = await retrieveManifest(manifestFile);
   const knownBundles = Object.keys(manifest);
-  const knownTabs = Object.values(manifest)
+  const knownTabs = Object
+    .values(manifest)
     .flatMap((x) => x.tabs);
 
-  let bundles: string[];
-  let tabs: string[];
+  let bundles: string[] = [];
+  let tabs: string[] = [];
 
-  if (modules !== null) {
-    // Some modules were specified
+  function addSpecificModules() {
+    // If unknown modules were specified, error
     const unknownModules = modules.filter((m) => !knownBundles.includes(m));
-
     if (unknownModules.length > 0) {
       throw new Error(`Unknown modules: ${unknownModules.join(', ')}`);
     }
-    bundles = modules;
 
-    if (addTabs) {
-    // If a bundle is being rebuilt, add its tabs
-      tabs = modules.flatMap((bundle) => manifest[bundle].tabs);
-    } else {
-      tabs = [];
+    bundles = bundles.concat(modules);
+
+    if (shouldAddModuleTabs) {
+      // Add the modules' tabs too
+      tabs = [...tabs, ...modules.flatMap((bundle) => manifest[bundle].tabs)];
     }
-  } else {
-    // No modules were specified
-    bundles = knownBundles;
-    tabs = [];
   }
-
-  if (tabOpts !== null) {
-    // Tabs were specified
-    const unknownTabs = tabOpts.filter((t) => !knownTabs.includes(t));
-
+  function addSpecificTabs() {
+    // If unknown tabs were specified, error
+    const unknownTabs = tabOptions.filter((t) => !knownTabs.includes(t));
     if (unknownTabs.length > 0) {
       throw new Error(`Unknown tabs: ${unknownTabs.join(', ')}`);
     }
-    tabs = tabs.concat(tabOpts);
-  } else {
-    // No tabs were specified
+
+    tabs = tabs.concat(tabOptions);
+  }
+  function addAllBundles() {
+    bundles = bundles.concat(knownBundles);
+  }
+  function addAllTabs() {
     tabs = tabs.concat(knownTabs);
   }
 
+  if (modules === null && tabOptions === null) {
+    addAllBundles();
+    addAllTabs();
+  } else {
+    if (modules !== null) addSpecificModules();
+    if (tabOptions !== null) addSpecificTabs();
+  }
+
   return {
     bundles: [...new Set(bundles)],
     tabs: [...new Set(tabs)],

scripts/src/build/dev.ts

@@ -36,9 +36,9 @@ const waitForQuit = () => new Promise<void>((resolve, reject) => {
 type ContextOptions = Record<'srcDir' | 'outDir', string>;
 const getBundleContext = ({ srcDir, outDir }: ContextOptions, bundles: string[], app?: Application) => esbuild({
   ...bundleOptions,
+  entryPoints: bundles.map(bundleNameExpander(srcDir)),
   outbase: outDir,
   outdir: outDir,
-  entryPoints: bundles.map(bundleNameExpander(srcDir)),
   plugins: [{
     name: 'Bundle Compiler',
     async setup(pluginBuild) {
@@ -74,9 +74,9 @@ const getBundleContext = ({ srcDir, outDir }: ContextOptions, bundles: string[],
 
 const getTabContext = ({ srcDir, outDir }: ContextOptions, tabs: string[]) => esbuild({
   ...tabOptions,
+  entryPoints: tabs.map(tabNameExpander(srcDir)),
   outbase: outDir,
   outdir: outDir,
-  entryPoints: tabs.map(tabNameExpander(srcDir)),
   external: ['react*', 'react-dom'],
   plugins: [{
     name: 'Tab Compiler',

scripts/src/build/modules/index.ts

@@ -44,7 +44,7 @@ const getBuildModulesCommand = () => createBuildCommand('modules', true)
   .description('Build modules and their tabs')
   .action(async (modules: string[] | null, { manifest, ...opts }: BuildCommandInputs & LintCommandInputs) => {
     const [assets] = await Promise.all([
-      retrieveBundlesAndTabs(manifest, modules, []),
+      retrieveBundlesAndTabs(manifest, modules, null),
       createOutDir(opts.outDir),
     ]);
 

src/bundles/csg/constants.ts

@@ -1,29 +1,7 @@
-/* [Imports] */
-import { IconSize } from '@blueprintjs/core';
-
 /* [Exports] */
 
-//NOTE Silver is in here to avoid circular dependencies, instead of in
-// functions.ts with the other colour strings
-export const SILVER: string = '#AAAAAA';
-export const DEFAULT_COLOR: string = SILVER;
-
-// Values extracted from the styling of the frontend
-export const SA_TAB_BUTTON_WIDTH: string = '40px';
-export const SA_TAB_ICON_SIZE: number = IconSize.LARGE;
-
-export const BP_TOOLTIP_PADDING: string = '10px 12px';
-export const BP_TAB_BUTTON_MARGIN: string = '20px';
-export const BP_TAB_PANEL_MARGIN: string = '20px';
-export const BP_BORDER_RADIUS: string = '3px';
-export const STANDARD_MARGIN: string = '10px';
-
-export const BP_TEXT_COLOR: string = '#F5F8FA';
-export const BP_TOOLTIP_BACKGROUND_COLOR: string = '#E1E8ED';
-export const BP_ICON_COLOR: string = '#A7B6C2';
-export const ACE_GUTTER_TEXT_COLOR: string = '#8091A0';
-export const ACE_GUTTER_BACKGROUND_COLOR: string = '#34495E';
-export const BP_TOOLTIP_TEXT_COLOR: string = '#394B59';
+// Renderer default colour. Bright aquamarine makes bugs easier to spot
+export const DEFAULT_COLOR = '#55ffaa';
 
 // Renderer grid constants
 export const MAIN_TICKS: number = 1;