setMetadata in URL

runsascoded · Oct 10, 2023 · e0b36cf · e0b36cf
1 parent 761a1b7
commit e0b36cf
Show file tree

Hide file tree

Showing 9 changed files with 196 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
         "buffer": "^6.0.3",
         "lodash": "^4.17.21",
         "next": "^13.2.4",
-        "next-utils": "https://gitpkg.now.sh/runsascoded/next-utils/dist?2865e86",
+        "next-utils": "https://gitpkg.now.sh/runsascoded/next-utils/dist?5eb21c0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.8.0",
         "react-dom": "^18.0.0",

diff --git a/pages/ellipse-test.tsx b/pages/ellipse-test.tsx
@@ -3,7 +3,6 @@ import React, {useState} from "react";
 import css from "./index.module.scss"
 import {XYRR} from "apvd";
 import Apvd from "../src/components/apvd";
-import {colors} from "./index";
 
 export default function Page() {
     return <Apvd>{() => <Body />}</Apvd>

diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/src/components/tables/shapes.module.scss b/src/components/tables/shapes.module.scss
@@ -1,4 +1,11 @@
 .shapesTable {
+  .abbrevCol {
+    max-width: 3em;
+  }
+  .shapeAbbrev {
+    border: 0;
+    width: 100%;
+  }
   td.skipped {
     background-color: #ddd;
   }
@@ -8,7 +15,7 @@
     overflow: hidden;
   }
   .shapeName {
-    max-width: 3em;
+    max-width: 4em;
     border: 0;
   }
   .selectShapeType {

diff --git a/src/components/tables/shapes.tsx b/src/components/tables/shapes.tsx
@@ -1,4 +1,4 @@
-import { getRadii, mapShape, S, SetMetadata, Shape } from "../../lib/shape";
+import { getRadii, mapShape, S, SetMetadatum, Shape } from "../../lib/shape";
 import React, { ReactNode, useState } from "react";
 import {Vars} from "../../lib/vars";
 import css from "./shapes.module.scss"
@@ -14,7 +14,7 @@ export type Props = {
     sets: S[]
     showShapesMetadata: boolean
     setShape: (idx: number, shape: Shape<number>) => void
-    updateSetMetadatum: (idx: number, newMetadatum: Partial<SetMetadata>) => void
+    updateSetMetadatum: (idx: number, newMetadatum: Partial<SetMetadatum>) => void
     vars: Vars
     precision?: number
 }
@@ -66,8 +66,8 @@ export function ShapesTable({ sets, showShapesMetadata, setShape, updateSetMetad
     const headerRow = showShapesMetadata
         ? <tr>
             <th>Name</th>
-            <th>
-                <OverlayTrigger overlay={<Tooltip>Abbreviated name: one character, used in Targets table</Tooltip>}>
+            <th className={css.abbrevCol}>
+                <OverlayTrigger overlay={<Tooltip>Abbreviated name: one character, used in "Targets" table</Tooltip>}>
                     <span>Key</span>
                 </OverlayTrigger>
             </th>
@@ -134,14 +134,14 @@ export function ShapesTable({ sets, showShapesMetadata, setShape, updateSetMetad
                         </td>
                         {
                             showShapesMetadata ? <>
-                                <td>
+                                <td className={css.abbrevCol}>
                                     <EditableText
-                                        className={css.shapeName}
+                                        className={css.shapeAbbrev}
                                         defaultValue={abbrev}
                                         onChange={newAbbrev => {
                                             console.log(`shape ${idx} abbrev changed from ${name} to ${newAbbrev}`)
                                             if (!newAbbrev) return
-                                            let newChar = newAbbrev.split('').find((ch, idx) => ch != abbrev[idx])
+                                            let newChar = newAbbrev.split('').find((ch, idx) => idx >= abbrev.length || ch != abbrev[idx])
                                             if (newChar) {
                                                 updateSetMetadatum(idx, { abbrev: newChar })
                                                 return newChar

diff --git a/src/lib/region.ts b/src/lib/region.ts
@@ -89,15 +89,41 @@ export const getRegionCenter = ({ segments }: Region, fs: number[]) => {
     }
 }
 
+export type TextAnchor = "start" | "middle" | "end"
+export type DominantBaseline = "middle" | "auto" | "hanging"
 export type LabelAttrs = {
-    textAnchor: "start" | "middle" | "end"
-    dominantBaseline: "middle" | "auto" | "hanging"
+    textAnchor: TextAnchor
+    dominantBaseline: DominantBaseline
 }
 
 export function getLabelAttrs(theta: number): LabelAttrs {
     // Normal direction from label to edge of region
     const degrees = (deg(theta) + 540) % 360
-    const textAnchor = degrees < 45 ? 'end' : degrees < 135 ? 'middle' : degrees < 225 ? 'start' : degrees < 315 ? 'middle' : 'end'
-    const dominantBaseline = degrees < 45 ? 'middle' : degrees < 135 ? 'hanging' : degrees < 225 ? 'middle' : degrees < 315 ? 'auto' : 'middle'
+    let textAnchor: TextAnchor = 'end'
+    const textAnchorCutoffs: [ number, TextAnchor ][] = [
+        [  67.5,    'end' ],
+        [ 112.5, 'middle' ],
+        [ 247.5,  'start' ],
+        [ 292.5, 'middle' ],
+    ]
+    for (let [ k, v ] of textAnchorCutoffs) {
+        if (degrees < k) {
+            textAnchor = v
+            break
+        }
+    }
+    let dominantBaseline: DominantBaseline = 'middle'
+    const dominantBaselineCutoffs: [ number, DominantBaseline ][] = [
+        [  22.5,  'middle' ],
+        [ 157.5, 'hanging' ],
+        [ 202.5,  'middle' ],
+        [ 337.5,    'auto' ],
+    ]
+    for (let [ k, v ] of dominantBaselineCutoffs) {
+        if (degrees < k) {
+            dominantBaseline = v
+            break
+        }
+    }
     return { textAnchor, dominantBaseline }
 }
diff --git a/src/lib/shape.ts b/src/lib/shape.ts
@@ -25,11 +25,12 @@ export interface XYRRT<D> {
 export type Shape<D> = Circle<D> | XYRR<D> | XYRRT<D>
 export type Shapes = Shape<number>[]
 
-export type SetMetadata = {
+export type SetMetadatum = {
     name: string
     abbrev: string
     color: string
 }
+export type SetMetadata = SetMetadatum[]
 
 export const DefaultSetMetadata = [
     { name: "A", abbrev: "A", color: '#f99'  , },  // red
@@ -38,10 +39,48 @@ export const DefaultSetMetadata = [
     { name: "D", abbrev: "D", color: '#99f'  , },  // blue
 ]
 
+export const setMetadataParam: Param<SetMetadata | null> = {
+    encode(metadata: SetMetadata | null): string | undefined {
+        if (!metadata) return undefined
+        const s = metadata.map(({ name, abbrev, color }, idx) => {
+            const defaults = DefaultSetMetadata[idx]
+            // console.log("encoding, defaults:", defaults)
+            let s = encodeURIComponent(name == defaults.name ? '' : name)
+            if (abbrev != name[0].toUpperCase()) {
+                s += `=${abbrev}`
+            }
+            if (color != defaults.color) {
+                s += `@${color}`
+            }
+            return s
+        }).join(',')
+        return s.match(/^,+$/) ? undefined : s
+    },
+    decode(v: string | undefined): SetMetadata | null {
+        // console.log("decoding setMetadata:", v)
+        if (!v) return null
+        return v.split(',').map((s, idx) => {
+            const defaults = DefaultSetMetadata[idx]
+            if (!s) return defaults
+            // console.log("decoding, defaults:", defaults)
+            const m = s.match(/(?<name>[^=@]+)(?:=(?<abbrev>[^@]))?(?:@(?<color>.*))?/)
+            if (!m) {
+                console.warn("Failed to parse set metadata:", s)
+                return defaults
+            }
+            let { name, abbrev, color } = m.groups!
+            name = name || defaults.name
+            abbrev = abbrev || name[0].toUpperCase()
+            color = color || defaults.color
+            return { name, abbrev, color }
+        })
+    }
+}
+
 export type Set = {
     idx: number
     shape: Shape<number>
-} & SetMetadata
+} & SetMetadatum
 export type S = Set
 
 export function rotate(p: R2<number>, theta: number): R2<number> {

diff --git a/src/lib/targets.ts b/src/lib/targets.ts
@@ -28,6 +28,7 @@ export const exclusiveKeyCmp = makeSortKeys('-')
 
 export function makeTargets(given: Target[]): Targets {
     const numShapes = given[0][0].length
+    // console.log("apvd.expand_targets:", given)
     const all = apvd.expand_targets(given).all as Map<string, number>
     const noneKey = '-'.repeat(numShapes)
     const allKey = '*'.repeat(numShapes)