feature(mandala): add rotation syntax to toml and mandala animation (#103)

This adds a "rotate_clockwise" property to the TOML metadata, which allows the default direction of rotation to be changed on a per-symbol basis.

Co-authored-by: Corinna Cohn <corinna.cohn@gmail.com>

assets/symbols/eye.toml

@@ -1,5 +1,4 @@
 # If true, this indicates that the symbol should always have
-
 # a symbol nested within its nesting area(s).
 
 always_nest = false
@@ -7,7 +6,9 @@ always_nest = false
 
 
 # If true, this indicates that the symbol should always
-
 # be nested inside another symbol's nesting area.
+always_be_nested = false
 
-always_be_nested = false
+
+# If true the symbol rotation direction will be clockwise
+rotate_clockwise = true

lib/pages/mandala-page.tsx

@@ -95,7 +95,7 @@ const DEFAULT_DURATION_SECS = 3;
 
 const ExtendedMandalaCircle: React.FC<
   ExtendedMandalaCircleParams & SvgSymbolContext
-> = ({ scaling, rotation, symbolScaling, symbolRotation, ...props }) => {
+  > = ({ scaling, rotation, symbolScaling, symbolRotation, ...props }) => {
   props = {
     ...props,
     symbolTransforms: [svgScale(symbolScaling), svgRotate(symbolRotation)],
@@ -113,9 +113,10 @@ function animateMandalaCircleParams(
   animPct: number
 ): ExtendedMandalaCircleParams {
   if (value.animateSymbolRotation) {
+    const direction = value.data.meta?.rotate_clockwise ? 1 : -1;
     value = {
       ...value,
-      symbolRotation: animPct * ROTATION.max,
+      symbolRotation: direction * animPct * ROTATION.max,
     };
   }
   return value;

lib/svg-symbol-metadata.ts

@@ -24,6 +24,12 @@ type SvgSymbolMetadataBooleans = {
    * symbol’s nesting area should have their colors inverted.
    */
   invert_nested?: boolean;
+
+  /**
+   * In the mandala, the normal rotation direction for animation is counterclockwise.
+   * This changes the rotation direction to clockwise.
+   */
+  rotate_clockwise?: boolean;
 };
 
 const METADATA_BOOLEANS: Set<keyof SvgSymbolMetadataBooleans> = new Set([
@@ -31,6 +37,7 @@ const METADATA_BOOLEANS: Set<keyof SvgSymbolMetadataBooleans> = new Set([
   "always_be_nested",
   "never_be_nested",
   "invert_nested",
+  "rotate_clockwise",
 ]);
 
 function isSvgSymbolMetadataBoolean(