[CSG]: Renderer overhaul & fixes (#146)

* Added @jscad/modeling and @jscad/regl-renderer

* Incomplete implementation of CSG

* Commit Partial Edition

* Partial Commit
Some testing for regl-renderer but no use. Render hooks on but no image is shown

* chore(eslintrc): Lower some problem levels from error to warning

* chore(package): Add npm script for dev work. Full tslib dependency

* chore(tsconfig): Automatic @types

* feat(csg): Updates to initial functions & design, make Shape class, fix shiftKey build error, fix regl ts types, add dev comments

* ref(csg utilities): Parameter property shorthand for shapeName

* fix(csg renderer): Regl types now found by TS (after tsconfig change?) and change in error encountered, issue with module tab lies elsewhere

* feat(csg): Changes & fixes to tab, debug logging (WIP)

* feat(csg): Loose instanceof check for deciding tab spawn

* feat(csg tabs): Unique tab icon

* style(csg utilities): Fix Prettier && style

* feat(csg): Reduce renderer to smaller "working" example (WIP), fix undefined potentialShape from destructuring, misc refactoring

* (Fix): CSG renderer working as intended.

* (Major Update): Added other primitives, coloring options and basic functionality to CSG

* (Major Update): Added most functionality for CSG

* (Update): Added squarePyramid primitive

* (Update): Fixed shapeStack and removed dependency on functions not exported by @jscad/modelling

* chore(lib): Remove deprecated older versions of modules

* chore(package): Uninstall @jscad/array-utils

* chore(package): Install regl for types

* feat(bundles csg): Cleaned/understood/typed renderer, WIP (see 2 TODOs)

* ref(csg utilities): Don't destructure copy of drawCommands

* (Update): Added most documentation for functions and constants. Updated renderer to show grid correctly.

* (Update): Colour documentation has been corrected to work

* (Chore): Changed yarn build to conduct lint:fix instead of just lint

* (Chore): Added type to the colour primitives

* (Update): Removed and changed tab file to match format of other tabs

* (Update): Fixed wrong grid size

* (Update): Fixed renderer camera position off target

* (Update): Integrated typing by Joel in wip branch into main

Added additional typing and fixed some errors

* Merge branch 'master' into wip

* chore(eslintrc): Turn off 2 rules w/ comments, change some default errors to warns

* feat(csg): Dynamic canvas resolution resizing

* chore(eslintrc): Change default rule from error to warn

* feat(bundles csg): Create & add custom axis, grid entities as needed. Other edits

* chore(csg types): Remove some commented test properties

* (Update): Reduce number of segments for sphere and cylinder to reduce compuational resources

* (Update): Changed implementation of generating new shape to be done on the spot instead to increase efficiency

* (Update): Added typing for newShape

* feat(csg): Refine & update CSG tab, docs, split types

* chore(eslintrc): Update rule for React destructuring assignment

* ref(csg renderer): Tidy renderer structure prior to reintroducing more parts

* chore(eslintrc): Rule updates to account for renderer

* (Fix): Allow for axis to have depth

* fix(csg types): Accompanying fix with #4

* fix(csg utilities): Fix REPL string being raw object string

* ref(bundles csg): Shuffle utilities & types, switch to modeling lib RGBA

* feat(bundles csg): Zoom to fit WIP

* chore(eslintrc): Update to account for warning comments

* (Update): Changed functions that return array to return a lambda function

Added function to obtain bounding box
Changed eslint to disable nested ternary operations

* (Update): Updated functions

Removed unused exports inside functions.ts
Updated documentation of flip function

* (Update): Updated bounding_box lambda function

Second Parameter accepts 'min' and 'max' instead of 0 or 1.

* (Update): Changed stack function to beside functions for x, y and z

* (Updated): Added helper tooltips

* (Update): Update helper text css

* fix(csg utilities): Always visible to false, to enable depth

* feat(csg): Precise zoom to fit, typed, zoomToFit no shadow

* feat(csg renderer): Symmetric starting zoomed angle, but see concern in issue #7

* feat(csg renderer): Bring back first of canvas events

* ref(csg renderer): Adjust camera angle within zoom to fit

* feat(csg): Custom zoom handling, frame tracker hiding, remove logs. Merge zoom to fit into controls

* chore(eslint): Allow param reassign

* chore(bundles csg): Remove commented ControlsZoom

* ref(csg renderer): Add missed type

* feat(csg): Rotate & pan with types. Reduce Y rotate sensitivity. Initial right-click pan

* feat(csg): Smarter held pointer tracking, working right/middle-click pan. Make Y drag react direction follow reaction of X drag (so that's why it felt so weird)

* chore(bundles csg): Fix unused import

* devfeat(pkg): Make lint:fix version of build its own script to not interfere with Husky commit hook & gh deploy

* (Fix): Fix typing of Numbers3 in function

* (Fix): Fix flex direction for tooltip

* (Fix): Fix scrollwheel not locked to within canvas and panning up down inverted

* (Fix): Fixes spelling of grey to gray

Fixes #8

* (Update): Added in cone as a primitive shape

* (Fix): Shifting primitive coords

fix #16

* devfeat(pkg): Separate out module docs building into its own convenient script

* devfeat(eslint): Config overhaul for raw JS

* (Update): Added in remaining primitive predefined in JSCAD

Fixes #18

* (Fix): Union error

* chore(pkg): Update eslint, move chalk to dev dependency

* chore(pkg): Update JSCAD packages

* chore(pkg): Move types package to dev dependency

* chore(pkg): Update typescript-eslint

* chore(pkg): Update types

* chore(pkg): Update supporting eslint packages

* devfeat(eslint): Minimal, updated ts support, no specific rules yet

* devfeat(eslint): Prettier support

* devfeat(eslint): Custom & documented rules for TS

* devfeat(eslint): Autofix sort-imports

* fix(eslint): Manually add jsx-a11y plugin

* devfeat(all): Ran autofix, some manual ordering makes more sense, disabling

* ref(all): Bulk style updates & relevant rule tweaks

* devfix(pkg): Downgrade chalk 5 from dependency transfer, waiting on TS 4.6 upgrade
https://github.com/chalk/chalk/releases/tag/v5.0.0

* style(csg functions): Reported whitespace fixes

* (Update): Removed right click panning

* (Fix): Solved renderer having lost context

Fixes #9

* (Update): Fix linting

* (Fix): Removed passive listener for preventdefault events

* (Fix): Complete removal of right click for rotating

* ref(src): Move more detailed DebuggerContext type into typings folder

* (Update): Reintroduction of dynamic grid and axis size

Fixes #12

* fix(csg renderer): Temp comment to avoid canvas starting off blank (#25). Likely reintroduces #9

* feat(csg): New hint layout, split into Components, update look/CSS/types. Fixes mobile 50vw canvas issue. Tooltip CSS is temporary, awaiting #22

* docs(tabs Csg): Fix old values in maxWidth docs, style fix

* fix(bundles csg): Refactor new pointer handling. Also fixes #17

* ref(tabs Csg): Rename control hint Props & State

* ref(bundles csg): No destructure workaround after eslint updates

* (Update): Enables dynamic resizing of canvas

Fixes #25
Fixes #20

* (Update): Complete fix for fatal error by stopping animation request when context is loss

Works so far

Fixes #9

* (Update): Reduce icon size and spaced them evenly

* chore(eslint): Tweak base config's sort-imports

* feat(bundles csg): Default colour changes, as Color

* feat(csg core): Module core for storing Shapes, more to come

* devfeat(all): Types for module params & contexts, update bundle template & fix tsconfig, remove __Params & update relevant code

* devfeat(bundles): More updates for new types passed to module bundles

* devfeat(csg core): Change to initial idea for RenderGroup

* chore(eslint): Extension rule config

* devfeat(bundles csg): Shapes, render groups, render group manager & CSG module state

* ref(csg functions): Move primitive shape values above colour values given eslint update

* feat(bundles csg): Implement CSG module state, prepare, pass to core. Update colours

* FEAT(src csg): Render on canvas from render groups with multiple solids, no Z for XY size, new entity classes, render group rendering toggle & filter, scrap looseInstanceOf, depend on module context instead of evaluation result, more utilities/refactoring

* feat(tabs Csg): Get module state from core, don't pass debugger context to canvas holder

* feat(csg utilities): Checkpoint of axis/grid tracked by render group manager

* chore(eslint): Extension rule for no-shadow

* feat(bundles csg): New colouring & rendering functions

* feat(bundles csg): Relevant updates to match new code

* ref(src): Fix no-shadow globals

* fix(csg utilities): Fix render check being inverted

* fix(src csg): Get module state on tab end separately, remove spaced hints, add todo

* docs(csg functions): Fix render function names in each variation

* fix(csg renderer): Manually map, as spread arguments with one solid returns bounding box directly

* feat(csg functions): Remove optional render shape due to source-academy/js-slang#1238

* feat(csg renderer): Optimise multi grid to avoid misaligned thicker lines

* ref(csg functions): Explicit error catch as unknown

* docs(csg samples): Add samples markdown document

* devfix(csg renderer): Remove console log

* feat(hover_control_hint): CSS tweaks using more extracted values. Tooltip CSS is still very much jank until switching to BlueprintJS

* feat(bundles csg): Merge store_as_hex() into store_as_color(), change default colours' format

* ref(csg utilities): Multi grid entity no default size

* ref(bundles csg): Core into bundle core

* ref(bundles csg): Implement tab core

* ref(bundles csg): Merge back into single core with two inits & comment

* feat(bundles csg): REPL text for render functions. Some private access

* ref(csg): Some renaming for boolean methods

* fix(bundles csg): Prevent middle click activating auto scrolling. Investigated todo

* devfeat(eslint): Add snake case naming convention for variables, fix warning level

* fix(bundles csg): Naming convention for primitive shapes

* feat(src csg): Canvas styling

* docs(csg samples): Source Academy ship at home

* ref(canvas_holder): Specify width before height

* docs(templates bundle): Update comment based on review

* devfeat(pkg): Update & streamline scripts after merge, update & fix script info

* ref(pixnflix index): Fix no-shadow warning under updated eslint config

* ref(all): Move rollup configs into scripts folder, update pkg paths

* feat(rollup): Add constants & utilities

* feat(rollup): Don't duplicate default config, fix utility patterns, move into constants. Scrap modules.local.json & gitignore conditional config selection

* FEAT(rollup): Recombine into single small config, dynamic using cli args, split into utilities, add quick option (TODO)

* devfeat(pkg): Make build vs rebuild scripts for faster development, update script info

* devfeat(rollup): Snapshot of lowdb as pure ESM package prior to downgrade

* feat(all): Store & reference build timestamp, add remaining TODOs

* ref(all): Change rollup database name

* feat(rollup): Implement timestamp checks, add logging, add TODO

* feat(rollup): Proceed when nothing to build (eg serve), copy modules once

* chore(pkg): Shorten --config option

* FEAT(rollup): Finish implementing manually-triggered selective rebuild based on timestamps. Copy plugin & database update runs once

* feat(all): Scrap skipping bundles/tabs, rather than implement separate timestamp tracking & logic. Still achieves goal of greatly speeding up rebuilds

* devfeat(rollup): Use relative paths for isFolderModified(), log cleaner relative paths

* feat(bundles csg): Default to module's silver instead of JSCAD renderer's unspecified default blue, update docs accordingly

* docs(bundles rune): Add categories for docs generation, similar to CSG

* feat(src): Combine values into constants file & resolve some TODOs, tidy/tweak CSS/events, hexToRgba(), remove TODOs that have open issues

* feat(tabs csg): Improve hint list styling

* feat(bundles csg): Tweak grid entity ticks & calculations, boost performance, minor refactoring

* (Fix): Changed small to Number.MIN_VALUE

(cherry picked from commit efc925f)

* (Update): Changed dropping webgl context to when tab unmounts

Fixes #34

(cherry picked from commit 225131d)

* ref(tabs csg): Refactor cancelling of animation frame prior to unmount, retain same logic

* feat(csg): Handle context loss/restoration whilst mounted, add debug logging, add warning comments, add function types

* feat(csg): Improved logging that has counter, comments, refactoring

* fix(csg): Fix simultaneous hidden renders

* ref(tabs csg): Remove redundant canvas null check, add/edit warning comments

* feat(bundles rune): Fix category tags after merge, add tags for 2 new animate functions, edit various show docs & some consistency edits, no repeated optional default for magnitude

* ref(): Fix linter warnings

* docs(bundles csg): Remove ts-ignore comments

* REF(): Clean up linter comments under new config

* ref(src): Explicitly implement new ReplResult

* ref(bundles csg): Private component counter in module state

* chore(eslint): Turn off import/extensions rule

* ref(bundles csg): Add missing explicit types

* FEAT(csg): New WIP stateful renderer as a class with start/stop, split old renderer & abstract jscad functions, tidy & trim down typings

* feat(bundles csg): WebGL listener storage & handling, differentiate first start / last stop, refactoring

* docs(tabs csg): Fix header comment

* feat(bundles csg): Input listeners with typing, split InputTracker into own file

* FEAT(bundles csg): Input tracker initial listeners, new listener tracker, frame performance savings, code improvements, misc fixes

* feat(bundles csg): Bring back zooming response

* feat(bundles csg): Bring back full input response

* ref(bundles csg): Default silver colour via solidsToGeometryEntities()

* feat(bundles csg): InputTracker#flushMidInput()

* chore(): Update jscad libs

* chore(): Update BlueprintJS minor versions

* FEAT(rollup): Add manual named exports to make BlueprintJS work

* feat(csg): Inform user while WebGL context is lost

* style(csg): Fix linter warnings

* ref(csg): Minor refactoring & comment updates

* ref(bundles csg): Delay some work from pause to resume

Co-authored-by: LiuMC-SG <[email protected]>

Author: Cloud7050

.eslintrc.js

@@ -118,6 +118,8 @@ module.exports = {
         'prettier/prettier': 1,
 
         // [Other]
+        'import/extensions': 0,
+
         '@typescript-eslint/naming-convention': [
           1,
           {

package.json

@@ -77,11 +77,11 @@
     "yarnhook": "^0.5.1"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.47.0",
-    "@blueprintjs/icons": "^3.27.0",
-    "@blueprintjs/popover2": "^0.4.0",
-    "@jscad/modeling": "^2.9.2",
-    "@jscad/regl-renderer": "^2.5.8",
+    "@blueprintjs/core": "^3.54.0",
+    "@blueprintjs/icons": "^3.33.0",
+    "@blueprintjs/popover2": "^0.14.0",
+    "@jscad/modeling": "^2.9.5",
+    "@jscad/regl-renderer": "^2.6.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.4",
     "gl-matrix": "^3.3.0",

scripts/rollup/utilities.js

@@ -101,6 +101,34 @@ function makeDefaultConfig() {
       }),
       commonJS({
         include: NODE_MODULES_PATTERN,
+
+        // https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports
+        namedExports: {
+          react: [
+            'Children',
+            'cloneElement',
+            'Component',
+            'createContext',
+            'createElement',
+            'createRef',
+            'isValidElement',
+            'PureComponent',
+            'useCallback',
+            'useContext',
+            'useEffect',
+            'useMemo',
+            'useReducer',
+            'useRef',
+            'useState',
+          ],
+          'react-dom': [
+            'createPortal',
+            'findDOMNode',
+            'render',
+            'unmountComponentAtNode',
+            'unstable_renderSubtreeIntoContainer',
+          ],
+        },
       }),
       injectProcessEnv({
         NODE_ENV: process.env.NODE_ENV,

scripts/templates/print.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 const chalk = require('chalk');
 const readline = require('readline');
 

src/bundles/binary_tree/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 import { make_empty_tree, make_tree } from './functions';
 
 /**

src/bundles/csg/constants.ts

@@ -1,16 +1,21 @@
+/* [Imports] */
+import { IconSize } from '@blueprintjs/core';
+
 /* [Exports] */
+
 // Silver is in here to avoid circular dependencies
 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 = 20;
+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';
@@ -20,7 +25,17 @@ export const ACE_GUTTER_BACKGROUND_COLOR: string = '#34495E';
 export const BP_TOOLTIP_TEXT_COLOR: string = '#394B59';
 
 // Renderer grid constants
-export const MAIN_TICKS = 1;
-export const SUB_TICKS = MAIN_TICKS / 4;
-export const GRID_PADDING = MAIN_TICKS;
-export const ROUND_UP_INTERVAL = MAIN_TICKS;
+export const MAIN_TICKS: number = 1;
+export const SUB_TICKS: number = MAIN_TICKS / 4;
+export const GRID_PADDING: number = MAIN_TICKS;
+export const ROUND_UP_INTERVAL: number = MAIN_TICKS;
+
+// Controls zoom constants
+export const ZOOM_TICK_SCALE: number = 0.1;
+
+// Controls rotation constants
+export const ROTATION_SPEED: number = 0.0015;
+
+// Controls pan constants
+export const X_FACTOR: number = 1;
+export const Y_FACTOR: number = 0.75;

src/bundles/csg/core.ts

@@ -8,12 +8,13 @@ import { CsgModuleState, RenderGroupManager } from './utilities.js';
 export class Core {
   private static moduleState: CsgModuleState | null = null;
 
-  static initialize(csgModuleState: CsgModuleState): void {
+  static initialize(csgModuleState: CsgModuleState) {
     Core.moduleState = csgModuleState;
   }
 
   static getRenderGroupManager(): RenderGroupManager {
     let moduleState: CsgModuleState = Core.moduleState as CsgModuleState;
+
     return moduleState.renderGroupManager;
   }
 }

src/bundles/csg/functions.ts

@@ -31,9 +31,9 @@ import {
   scale as _scale,
   translate as _translate,
 } from '@jscad/modeling/src/operations/transforms';
-import { DEFAULT_COLOR, SILVER } from './constants.js';
+import { SILVER } from './constants.js';
 import { Core } from './core.js';
-import { Color, CoordinatesXYZ, Solid } from './types';
+import { Color, Coordinates, Solid } from './jscad/types.js';
 import { clamp, hexToColor, RenderGroup, Shape } from './utilities';
 
 /* [Exports] */
@@ -85,9 +85,6 @@ export const star: Shape = shapeSetOrigin(
   new Shape(extrudeLinear({ height: 1 }, primitives.star({ outerRadius: 0.5 })))
 );
 
-//TODO
-let small = 10 ** -30;
-
 /**
  * Primitive Shape of a square pyramid.
  *
@@ -98,7 +95,7 @@ export const pyramid: Shape = shapeSetOrigin(
     primitives.cylinderElliptic({
       height: 1,
       startRadius: [0.5, 0.5],
-      endRadius: [small, small],
+      endRadius: [Number.MIN_VALUE, Number.MIN_VALUE],
       segments: 4,
     })
   )
@@ -114,7 +111,7 @@ export const cone: Shape = shapeSetOrigin(
     primitives.cylinderElliptic({
       height: 1,
       startRadius: [0.5, 0.5],
-      endRadius: [small, small],
+      endRadius: [Number.MIN_VALUE, Number.MIN_VALUE],
     })
   )
 );
@@ -384,7 +381,7 @@ export function scale_z(shape: Shape, z: number): Shape {
  */
 export function shape_center(shape: Shape): (axis: String) => number {
   let bounds: BoundingBox = measureBoundingBox(shape.solid);
-  let centerCoords: CoordinatesXYZ = [
+  let centerCoords: Coordinates = [
     bounds[0][0] + (bounds[1][0] - bounds[0][0]) / 2,
     bounds[0][1] + (bounds[1][1] - bounds[0][1]) / 2,
     bounds[0][2] + (bounds[1][2] - bounds[0][2]) / 2,
@@ -554,7 +551,7 @@ export function beside_x(a: Shape, b: Shape): Shape {
   let newY: number = aBounds[0][1] + (aBounds[1][1] - aBounds[0][1]) / 2;
   let newZ: number = aBounds[0][2] + (aBounds[1][2] - aBounds[0][2]) / 2;
   let newSolid: Solid = _union(
-    a.solid, // @ts-ignore
+    a.solid,
     align(
       {
         modes: ['min', 'center', 'center'],
@@ -580,7 +577,7 @@ export function beside_y(a: Shape, b: Shape): Shape {
   let newY: number = aBounds[1][1];
   let newZ: number = aBounds[0][2] + (aBounds[1][2] - aBounds[0][2]) / 2;
   let newSolid: Solid = _union(
-    a.solid, // @ts-ignore
+    a.solid,
     align(
       {
         modes: ['center', 'min', 'center'],
@@ -606,7 +603,7 @@ export function beside_z(a: Shape, b: Shape): Shape {
   let newY: number = aBounds[0][1] + (aBounds[1][1] - aBounds[0][1]) / 2;
   let newZ: number = aBounds[1][2];
   let newSolid: Solid = _union(
-    a.solid, // @ts-ignore
+    a.solid,
     align(
       {
         modes: ['center', 'center', 'min'],
@@ -741,8 +738,8 @@ export function clone(shape: Shape): Shape {
  *
  * @param {Shape} shape - The Shape to be stored.
  */
-export function store(shape: Shape): void {
-  store_as_color(shape, DEFAULT_COLOR);
+export function store(shape: Shape) {
+  Core.getRenderGroupManager().storeShape(shape.clone());
 }
 
 /**
@@ -757,7 +754,7 @@ export function store(shape: Shape): void {
  * @param {Shape} shape - The Shape to be coloured and stored.
  * @param {string} hex - The colour code to use.
  */
-export function store_as_color(shape: Shape, hex: string): void {
+export function store_as_color(shape: Shape, hex: string) {
   let color: Color = hexToColor(hex);
   let coloredSolid: Solid = colorize(color, shape.solid);
   Core.getRenderGroupManager().storeShape(new Shape(coloredSolid));
@@ -779,7 +776,7 @@ export function store_as_rgb(
   redComponent: number,
   greenComponent: number,
   blueComponent: number
-): void {
+) {
   redComponent = clamp(redComponent, 0, 1);
   greenComponent = clamp(greenComponent, 0, 1);
   blueComponent = clamp(blueComponent, 0, 1);