Added ColorModes

workspaces/tilings/src-rust/renderer/src/draw/layers/draw_shapes.rs

@@ -8,7 +8,7 @@ use tiling::Tiling;
 
 use super::Layer;
 use crate::canvas::{Canvas, Polygon};
-use crate::draw::options::ColorPalette;
+use crate::draw::options::{ColorMode, ColorPalette};
 use crate::draw::Options;
 use crate::Error;
 
@@ -18,11 +18,16 @@ pub const VAPOR_WAVE_COLOR_PALETTE: [&str; 12] = [
 ];
 
 pub fn draw_shapes(canvas: &mut Canvas, options: &Options, tiling: &Tiling) -> Result<(), Error> {
-  let path_shape_count = tiling.notation.path.get_shape_count() as f32;
+  let color_mode = options.color_mode.clone().unwrap_or_default();
   let color_palette = options.color_palette.clone().unwrap_or_default();
   let shape_style = options.styles.shape.clone().unwrap_or_default();
 
-  if path_shape_count == 0.0 {
+  let color_domain = match color_mode {
+    ColorMode::Placement => tiling.notation.path.get_shape_count() as f32,
+    ColorMode::Stage => tiling.plane.stages.len() as f32,
+  };
+
+  if color_domain == 0.0 {
     return Ok(());
   }
 
@@ -32,14 +37,14 @@ pub fn draw_shapes(canvas: &mut Canvas, options: &Options, tiling: &Tiling) -> R
       ColorPalette::BlackAndWhite => Some(
         GradientBuilder::new()
           .html_colors(&["#000000", "#ffffff"])
-          .domain(&[0.0, path_shape_count])
+          .domain(&[0.0, color_domain])
           .mode(colorgrad::BlendMode::Rgb)
           .build()?,
       ),
       ColorPalette::VaporWave => Some(
         GradientBuilder::new()
           .html_colors(&VAPOR_WAVE_COLOR_PALETTE)
-          .domain(&[0.0, path_shape_count])
+          .domain(&[0.0, color_domain])
           .mode(colorgrad::BlendMode::Rgb)
           .build()?,
       ),
@@ -51,7 +56,7 @@ pub fn draw_shapes(canvas: &mut Canvas, options: &Options, tiling: &Tiling) -> R
         Some(
           GradientBuilder::new()
             .html_colors(&colors)
-            .domain(&[0.0, path_shape_count])
+            .domain(&[0.0, color_domain])
             .mode(colorgrad::BlendMode::Rgb)
             .build()?,
         )
@@ -91,6 +96,16 @@ pub fn draw_shapes(canvas: &mut Canvas, options: &Options, tiling: &Tiling) -> R
       }
     }
 
+    let color_index = match color_mode {
+      ColorMode::Placement => *shape_types_by_index.get(&shape.index).unwrap_or(&0) as f32,
+      ColorMode::Stage => shape.stage_index as f32,
+    };
+
+    let fill = gradient
+      .as_ref()
+      .map(|gradient| gradient.at(color_index).to_hex_string())
+      .or_else(|| Some(shape_style.get_fill()));
+
     canvas.add_component(
       Layer::ShapeFill,
       Polygon::default()
@@ -103,12 +118,7 @@ pub fn draw_shapes(canvas: &mut Canvas, options: &Options, tiling: &Tiling) -> R
             .clone()
             .unwrap_or_default()
             .set_stroke_width(&canvas.scale, None)
-            .set_fill(match (&gradient, shape_types_by_index.get(&shape.index)) {
-              (Some(gradient), Some(shape_type)) => {
-                Some(gradient.at(*shape_type as f32).to_hex_string())
-              }
-              _ => Some(shape_style.get_fill()),
-            }),
+            .set_fill(fill),
         )
         .into(),
     )?;

workspaces/tilings/src-rust/renderer/src/draw/options.rs

@@ -12,6 +12,7 @@ use super::layers::Layer;
 #[typeshare]
 pub struct Options {
   pub auto_rotate: Option<bool>,
+  pub color_mode: Option<ColorMode>,
   pub color_palette: Option<ColorPalette>,
   pub is_valid: Option<bool>,
   pub max_stage: Option<u16>,
@@ -36,6 +37,19 @@ pub struct Styles {
   pub transform_points: Option<Style>,
 }
 
+#[derive(Clone, Deserialize, Serialize)]
+#[typeshare]
+pub enum ColorMode {
+  Placement,
+  Stage,
+}
+
+impl Default for ColorMode {
+  fn default() -> Self {
+    Self::Placement
+  }
+}
+
 #[derive(Clone, Deserialize, Serialize)]
 #[typeshare]
 pub enum ColorPalette {

workspaces/tilings/src/Presentation/Renderer/defaultOptions.ts

@@ -1,4 +1,4 @@
-import { Options, ColorPalette, ScaleMode, Layer } from '@hogg/wasm';
+import { Options, ColorPalette, ScaleMode, Layer, ColorMode } from '@hogg/wasm';
 import { ThemeColorMap, colorNegativeShade4 } from 'preshape';
 
 type NoUndefinedField<T> = {
@@ -9,9 +9,10 @@ export const defaultExpansionPhases = 10;
 
 export const defaultOptions: Pick<
   NoUndefinedField<Options>,
-  'autoRotate' | 'colorPalette' | 'scaleMode' | 'showLayers'
+  'autoRotate' | 'colorMode' | 'colorPalette' | 'scaleMode' | 'showLayers'
 > = {
   autoRotate: true,
+  colorMode: ColorMode.Stage,
   colorPalette: ColorPalette.VaporWave,
   scaleMode: ScaleMode.Cover,
   showLayers: {

workspaces/tilings/src/Presentation/Settings/Settings.tsx

@@ -1,7 +1,8 @@
-import { ColorPalette, Layer, ScaleMode } from '@hogg/wasm';
+import { ColorMode, ColorPalette, Layer, ScaleMode } from '@hogg/wasm';
 import {
   GaugeIcon,
   LayersIcon,
+  PaintBucketIcon,
   PaletteIcon,
   Repeat1Icon,
   RotateCwIcon,
@@ -24,12 +25,14 @@ const layersOptions = Object.values(Layer).sort((a, b) => a.localeCompare(b));
 export default function Settings() {
   const {
     autoRotate,
+    colorMode,
     colorPalette,
     expansionPhases,
     scaleMode,
     showLayers,
     showSettings,
     setAutoRotate,
+    setColorMode,
     setColorPalette,
     setExpansionPhases,
     setScaleMode,
@@ -70,6 +73,15 @@ export default function Settings() {
     onChange: setSpeed,
   };
 
+  const colorModeConfig: MenuConfigEntryOneOf<ColorMode> = {
+    label: 'Color mode',
+    icon: PaintBucketIcon,
+    type: 'oneOf',
+    value: colorMode,
+    options: Object.values(ColorMode),
+    onChange: setColorMode,
+  };
+
   const colorPaletteConfig: MenuConfigEntryOneOf<ColorPalette> = {
     label: 'Color palette',
     icon: PaletteIcon,
@@ -120,6 +132,7 @@ export default function Settings() {
       <ConfigMenu
         config={[
           autoRotateConfig,
+          colorModeConfig,
           colorPaletteConfig,
           expansionPhasesConfig,
           showLayersConfig,

workspaces/tilings/src/Presentation/Settings/SettingsProvider.tsx

@@ -20,6 +20,7 @@ export default function SettingsProvider({
   };
 
   const [autoRotate, setAutoRotate] = useState(initialState.autoRotate);
+  const [colorMode, setColorMode] = useState(initialState.colorMode);
   const [colorPalette, setColorPalette] = useState<ColorPalette>(
     initialState.colorPalette
   );
@@ -34,11 +35,13 @@ export default function SettingsProvider({
 
   const value = {
     autoRotate,
+    colorMode,
     colorPalette,
     expansionPhases,
     scaleMode,
     showLayers,
     setAutoRotate,
+    setColorMode,
     setColorPalette,
     setExpansionPhases,
     setScaleMode,

workspaces/tilings/src/Presentation/Settings/useSettingsContext.ts

@@ -1,4 +1,4 @@
-import { ColorPalette, ScaleMode, Layer } from '@hogg/wasm';
+import { ColorPalette, ScaleMode, Layer, ColorMode } from '@hogg/wasm';
 import { createContext, useContext } from 'react';
 import {
   defaultExpansionPhases,
@@ -7,6 +7,7 @@ import {
 
 export type Settings = {
   autoRotate: boolean;
+  colorMode: ColorMode;
   colorPalette: ColorPalette;
   expansionPhases: number;
   scaleMode: ScaleMode;
@@ -15,6 +16,7 @@ export type Settings = {
 
 type SettingsContextValue = Settings & {
   setAutoRotate: (autoRotate: boolean) => void;
+  setColorMode: (colorMode: ColorMode) => void;
   setColorPalette: (colorPalette: ColorPalette) => void;
   setExpansionPhases: (count: number) => void;
   setScaleMode: (scaleMode: ScaleMode) => void;
@@ -38,6 +40,7 @@ export const SettingsContext = createContext<SettingsContextValue>({
   ...defaultSettings,
   showSettings: false,
   setAutoRotate: noop,
+  setColorMode: noop,
   setColorPalette: noop,
   setExpansionPhases: noop,
   setScaleMode: noop,

workspaces/tilings/src/Presentation/index.tsx

@@ -24,6 +24,7 @@ function PresentationInner(props: RendererProps) {
     setShowSettings,
     autoRotate,
     expansionPhases,
+    colorMode,
     colorPalette,
     scaleMode,
     showLayers,
@@ -33,12 +34,13 @@ function PresentationInner(props: RendererProps) {
   const options = useMemo(
     () => ({
       autoRotate,
+      colorMode,
       colorPalette,
       maxStage,
       scaleMode,
       showLayers,
     }),
-    [autoRotate, colorPalette, maxStage, scaleMode, showLayers]
+    [autoRotate, colorMode, colorPalette, maxStage, scaleMode, showLayers]
   );
 
   return (

workspaces/wasm/src/types.ts

@@ -178,6 +178,11 @@ export interface Style {
 	opacity?: number;
 }
 
+export enum ColorMode {
+	Placement = "Placement",
+	Stage = "Stage",
+}
+
 export enum ColorPalette {
 	BlackAndWhite = "BlackAndWhite",
 	None = "None",
@@ -220,6 +225,7 @@ export interface Styles {
 
 export interface Options {
 	autoRotate?: boolean;
+	colorMode?: ColorMode;
 	colorPalette?: ColorPalette;
 	isValid?: boolean;
 	maxStage?: number;