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.
source-academy · Sep 12, 2023 · 87dcf69 · 87dcf69
1 parent c9ce9df
commit 87dcf69
Show file tree

Hide file tree

Showing 49 changed files with 2,661 additions and 2,239 deletions.
diff --git a/package.json b/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"
  ]
  }
-}
+}
diff --git a/scripts/bin/build/buildUtils.js b/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)],

diff --git a/scripts/bin/build/dev.js b/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',

diff --git a/scripts/bin/build/modules/index.js b/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);

diff --git a/scripts/src/build/__tests__/buildUtils.test.ts b/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 () => {

diff --git a/scripts/src/build/buildUtils.ts b/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)],

diff --git a/scripts/src/build/dev.ts b/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',

diff --git a/scripts/src/build/modules/index.ts b/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),
  ]);
 

diff --git a/src/bundles/csg/constants.ts b/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;