ピンの形を増やし、設定ファイルにSVGパスを書けるようにする

カテゴリで種類を見分けられるよう、組み込みの形に diamond・pentagon・hexagon・
castle(上辺を凸凹にした城郭の胸壁)を足した。多角形は真下に頂点が来る向きに
しない —— ピンのとんがりと重なって長さ0の線分になり、輪郭が潰れるため。

あわせて、組み込みの形で足りないときは category_styles に path として
SVGのパス(d)を直接書けるようにした。形を増やすたびにアプリを直して
デプロイする必要をなくすため。幅100・高さ145の箱に描き、箱の下端中央が
スポットの位置になる(下がとんがっている必要は無い)。

- 描画は Path2D に寄せ、自前パスは addPath に変換行列を渡して取り込む
- 画像ID(pinIconId)にはパスのハッシュを混ぜる。混ぜないとパスを書き換えても
  既存のピン画像が使われ続ける
- パスはcanvasで図形を描くだけでスクリプトは走らないので設定から受け取って
  よいが、打ち間違いを黙って空のピンにしないよう字面を検査する
  (isValidPinPath。travel-log-data の validate_data.py にも同じ検査を置く)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: claude

CLAUDE.md

@@ -145,15 +145,30 @@ GitHub Actions(`.github/workflows/docker-publish.yml`)がビルド時に`<JST日
 **カテゴリに握らせる見た目は「形」だけ**にしてある(`lib/categoryStyle.ts`)。色・大きさ・
 ラベルはシリーズが、塗りの上書き(緑+✓)は訪問済みが、破線の縁取りは非公開スポットが
 すでに使っており、そこへカテゴリを重ねるとどちらが効いているのか読めない見た目になるため。
-形はそれらと直交していて、最小のピン(size 12)でも見分けられる。用途は「その場所が
-どういう種類か」ではなく、**シリーズとは別の軸をひと目で見せたいとき**(観光地の
-`じっくり` = 立ち寄るのに手間がかかる、など)。
+形はそれらと直交している。用途は「その場所がどういう種類か」(観光地の神社仏閣・城・
+商業施設・美術館博物館)と、**シリーズとは別の軸**(同じく`じっくり` = 立ち寄るのに
+手間がかかる)の両方。**ただし1スポットに出せる形は1つ**なので、両方を同時には示せない。
 
 `spot_type_settings`の`category_styles`キー(`CATEGORY_STYLES_SETTING_KEY`)に
-JSON文字列(`CategoryStyleDefinition[]` = `{ category, shape }`の配列)を保存する。
-`shape`は`PIN_SHAPES`(`circle` / `rounded-square`)のいずれか。**シリーズと違い既定は
-空配列**(=すべて既定の丸)で、使いたい種別だけが設定するもの。取得は
-`useCategoryStyles(typeKey)`フック(`useSeriesStyles`のカテゴリ版)。
+JSON文字列(`CategoryStyleDefinition[]` = `{ category, shape? , path? }`の配列)を
+保存する。`shape`は`PIN_SHAPES`(`circle` / `rounded-square` / `diamond` / `pentagon` /
+`hexagon` / `castle`)のいずれか。**シリーズと違い既定は空配列**(=すべて既定の丸)で、
+使いたい種別だけが設定するもの。取得は`useCategoryStyles(typeKey)`フック
+(`useSeriesStyles`のカテゴリ版)。
+
+**組み込みの形で足りないときは`path`にSVGのパス(`d`)を書ける**(`shape`より優先。
+アプリを直さずに設定側で形を増やせるようにするため)。**幅100・高さ145の箱**に描き、
+**箱の下端中央がスポットの位置**(`icon-anchor: bottom`)。**下がとんがっている必要は
+無い**。ラベル(シリーズの文字)は頭の中心(50,50)に描かれるのでそこは塗らない。
+描画は`Path2D`に組み、自前パスは`addPath`に変換行列を渡して取り込む
+(`lib/pinIcon.ts`)。**画像ID(`pinIconId`)にはパスのハッシュを混ぜる** ——
+混ぜないとパスを書き換えても既存の画像が使われ続ける。
+**パスはcanvasで図形を描くだけでスクリプトは走らない**ので設定から受け取ってよいが、
+打ち間違いを黙って空のピンにしないよう字面を検査する(`isValidPinPath`。
+travel-log-dataの`validate_data.py`にも同じ検査がある)。
+**組み込みの形を足すときは`PIN_SHAPES`・`lib/pinIcon.ts`の描画・
+travel-log-dataの`SHAPES`の3か所**をそろえること。多角形は**真下に頂点が来る向きに
+しない**(ピンのとんがりと重なって輪郭が潰れる)。
 
 **1スポットは複数カテゴリを持てるので、設定の配列順で最初に一致したものを採用する**
 (`findPinShape`)。シリーズの配列順が並び順を決めているのと同じ考え方。

lib/categoryStyle.ts

@@ -20,17 +20,52 @@ import type { Category, SpotType } from "./types";
  */
 
 /** ピンの頭の形。増やすときはlib/pinIcon.tsの描画にも分岐を足すこと */
-export const PIN_SHAPES = ["circle", "rounded-square"] as const;
+export const PIN_SHAPES = [
+  "circle",
+  "rounded-square",
+  "diamond",
+  "pentagon",
+  "hexagon",
+  "castle",
+] as const;
 export type PinShape = (typeof PIN_SHAPES)[number];
 
 /** 設定が無いカテゴリ・設定そのものが無い種別で使う形 */
 export const DEFAULT_PIN_SHAPE: PinShape = "circle";
 
+/**
+ * 自前の形を書くときの座標系。**幅100・高さ145の箱**に、SVGのパス(`d`)で描く。
+ * 145 は「頭100 + とんがり45」の比で、組み込みの形と同じ縦横比になる。
+ *
+ * **箱の下端中央(50,145)がスポットの位置**(symbolレイヤーは`icon-anchor: bottom`)。
+ * とんがりを付けたければそこまで伸ばし、付けないなら図形の下端がその位置に接する。
+ * ラベル(シリーズの文字)は**頭の中心(50,50)**に描くので、そこは塗りを空けておく。
+ */
+export const PIN_PATH_VIEW_WIDTH = 100;
+export const PIN_PATH_VIEW_HEIGHT = 145;
+
+/**
+ * パス(`d`)として妥当な文字だけでできているか。**canvasはパスを描くだけで
+ * スクリプトを実行しないので危険は無い**が、打ち間違いを黙って空のピンにしない
+ * ための最低限の検査(Path2Dは不正な断片を例外にせず無視する)。
+ */
+const PATH_D_RE = /^[Mm][\s0-9.,+\-eE]*[MmLlHhVvCcSsQqTtAaZz][A-Za-z0-9.,+\-eE\s]*$/;
+
+export function isValidPinPath(v: unknown): v is string {
+  return typeof v === "string" && v.length > 0 && v.length <= 4000 && PATH_D_RE.test(v);
+}
+
 export interface CategoryStyleDefinition {
   category: string;
-  shape: PinShape;
+  /** 組み込みの形。`path`を書いたときは省略できる */
+  shape?: PinShape;
+  /** 自前の形(SVGのパス。100×145の箱に描く)。`shape`より優先する */
+  path?: string;
 }
 
+/** 解決済みの形。文字列なら組み込み、オブジェクトなら自前のパス */
+export type PinShapeSpec = PinShape | { path: string };
+
 /** spot_type_settingsにおける、カテゴリの見た目設定を保存するキー(値はJSON文字列) */
 export const CATEGORY_STYLES_SETTING_KEY = "category_styles";
 
@@ -48,6 +83,8 @@ export function isValidCategoryStyle(v: unknown): v is CategoryStyleDefinition {
   if (typeof v !== "object" || v === null) return false;
   const o = v as Record<string, unknown>;
   if (typeof o.category !== "string" || !o.category) return false;
+  // pathがあればそちらを使う(shapeは省略可)。両方無い・両方不正なら無効
+  if (o.path !== undefined) return isValidPinPath(o.path);
   return isPinShape(o.shape);
 }
 
@@ -81,10 +118,12 @@ export function resolveCategoryStyles(
 export function findPinShape(
   categories: Category[] | null | undefined,
   styles: CategoryStyleDefinition[]
-): PinShape {
+): PinShapeSpec {
   if (!categories || categories.length === 0 || styles.length === 0) {
     return DEFAULT_PIN_SHAPE;
   }
   const found = styles.find((s) => categories.includes(s.category));
-  return found ? found.shape : DEFAULT_PIN_SHAPE;
+  if (!found) return DEFAULT_PIN_SHAPE;
+  if (found.path) return { path: found.path };
+  return found.shape ?? DEFAULT_PIN_SHAPE;
 }

lib/pinIcon.ts

@@ -1,7 +1,12 @@
 import type * as maplibregl from "maplibre-gl";
 import type { Series } from "./types";
 import { autoTextColor, findSeriesStyle, isImageLabel, type SeriesStyleDefinition } from "./seriesStyle";
-import { DEFAULT_PIN_SHAPE, type PinShape } from "./categoryStyle";
+import {
+  DEFAULT_PIN_SHAPE,
+  PIN_PATH_VIEW_HEIGHT,
+  PIN_PATH_VIEW_WIDTH,
+  type PinShapeSpec,
+} from "./categoryStyle";
 
 /**
  * 地図ピン(下がとんがった吹き出し型)の画像をcanvasで生成し、
@@ -34,10 +39,8 @@ function pinTailHeight(size: number): number {
  * シリーズ名だけをIDにすると暫定の見た目で登録した画像がそのまま使われ続けてしまう
  * (ensurePinImageはmap.hasImage()で早期returnする)。
  */
-function styleSignature(style: SeriesStyleDefinition): string {
-  const label = isImageLabel(style.label) ? `img:${style.label.image}` : `txt:${style.label}`;
-  const raw = `${style.color}|${style.borderColor}|${style.size}|${style.textColor ?? ""}|${label}`;
-  // FNV-1a(ラベルが画像(base64)のこともあるため、IDに全文を入れず固定長にする)
+/** FNV-1a。長い値(画像のbase64・自前のパス)をIDに入れず固定長にするために使う */
+function fnv1a(raw: string): string {
   let h = 0x811c9dc5;
   for (let i = 0; i < raw.length; i += 1) {
     h ^= raw.charCodeAt(i);
@@ -46,17 +49,27 @@ function styleSignature(style: SeriesStyleDefinition): string {
   return (h >>> 0).toString(36);
 }
 
+function styleSignature(style: SeriesStyleDefinition): string {
+  const label = isImageLabel(style.label) ? `img:${style.label.image}` : `txt:${style.label}`;
+  return fnv1a(
+    `${style.color}|${style.borderColor}|${style.size}|${style.textColor ?? ""}|${label}`
+  );
+}
+
 export function pinIconId(
   series: Series | null,
   visited: boolean,
   isPrivate: boolean,
   seriesStyles: SeriesStyleDefinition[],
   /** 頭の形(カテゴリ由来)。**IDに混ぜないと、形を変えても既存の画像が使われ続ける** */
-  shape: PinShape = DEFAULT_PIN_SHAPE
+  shape: PinShapeSpec = DEFAULT_PIN_SHAPE
 ): string {
   const sig = styleSignature(findSeriesStyle(series, seriesStyles));
   const base = `pin-${visited ? "visited" : "normal"}${isPrivate ? "-private" : ""}`;
-  return `${base}-${sig}-${shape}-${series ?? "__null__"}`;
+  // 自前のパスはそのまま混ぜるとIDが長くなるうえ、MapLibreの画像IDに使えない
+  // 文字が入りうるのでハッシュにする
+  const shapeKey = typeof shape === "string" ? shape : `p${fnv1a(shape.path)}`;
+  return `${base}-${sig}-${shapeKey}-${series ?? "__null__"}`;
 }
 
 /** data URL画像をHTMLImageElementとして読み込む(base64は同期的に近いが、確実性のためdecode()を待つ) */
@@ -76,7 +89,7 @@ export async function ensurePinImage(
   isPrivate: boolean,
   seriesStyles: SeriesStyleDefinition[],
   /** 頭の形(カテゴリ由来。lib/categoryStyle.ts の findPinShape で解決したもの) */
-  shape: PinShape = DEFAULT_PIN_SHAPE
+  shape: PinShapeSpec = DEFAULT_PIN_SHAPE
 ): Promise<string> {
   const id = pinIconId(series, visited, isPrivate, seriesStyles, shape);
   if (map.hasImage(id)) return id;
@@ -104,45 +117,98 @@ export async function ensurePinImage(
   const cy = PIN_ICON_PAD + r; // 頭(円)の中心
   const tipY = h - PIN_ICON_PAD; // とんがりの先端(画像下端中央)
 
-  // 頭ととんがりを1つのパスとして描く(塗りと縁取りを一度に済ませるため)
-  ctx.beginPath();
-  if (shape === "rounded-square") {
+  // 頭ととんがりを1つのパスとして描く(塗りと縁取りを一度に済ませるため)。
+  // 自前のパス(設定ファイル由来)も同じ1本として扱えるようPath2Dに組む
+  const path = new Path2D();
+  if (typeof shape !== "string") {
+    // 100×145の箱に描かれたパスを、このピンの寸法へ拡大縮小して取り込む。
+    // 箱の下端中央がスポットの位置(icon-anchor: bottom)に来る
+    const sx = size / PIN_PATH_VIEW_WIDTH;
+    const sy = (size + tail) / PIN_PATH_VIEW_HEIGHT;
+    path.addPath(new Path2D(shape.path), {
+      a: sx,
+      b: 0,
+      c: 0,
+      d: sy,
+      e: PIN_ICON_PAD,
+      f: PIN_ICON_PAD,
+    });
+  } else if (shape === "rounded-square") {
     // 角丸四角。円と同じ幅に収め、下辺の左右から先端へ引く。
     // 下辺は角丸の分だけ内側から始まるので、とんがりの付け根も同じ位置に合わせる
     const k = r * 0.42; // 角丸の半径
     const left = cx - r;
     const right = cx + r;
     const top = cy - r;
     const bottom = cy + r;
-    ctx.moveTo(left + k, top);
-    ctx.lineTo(right - k, top);
-    ctx.quadraticCurveTo(right, top, right, top + k);
-    ctx.lineTo(right, bottom - k);
-    ctx.quadraticCurveTo(right, bottom, right - k, bottom);
-    ctx.lineTo(cx, tipY); // 右下の角からとんがりの先端へ
-    ctx.lineTo(left + k, bottom);
-    ctx.quadraticCurveTo(left, bottom, left, bottom - k);
-    ctx.lineTo(left, top + k);
-    ctx.quadraticCurveTo(left, top, left + k, top);
+    path.moveTo(left + k, top);
+    path.lineTo(right - k, top);
+    path.quadraticCurveTo(right, top, right, top + k);
+    path.lineTo(right, bottom - k);
+    path.quadraticCurveTo(right, bottom, right - k, bottom);
+    path.lineTo(cx, tipY); // 右下の角からとんがりの先端へ
+    path.lineTo(left + k, bottom);
+    path.quadraticCurveTo(left, bottom, left, bottom - k);
+    path.lineTo(left, top + k);
+    path.quadraticCurveTo(left, top, left + k, top);
+  } else if (shape === "castle") {
+    // 上辺を凸凹(狭間)にした四角。城郭の胸壁の記号。多角形より輪郭の特徴が
+    // 分かりやすく、小さいピンでも「他と違う」ことは読み取れる
+    const left = cx - r;
+    const right = cx + r;
+    const top = cy - r;
+    const bottom = cy + r;
+    const step = (2 * r) / 5; // 凸凹の1区画。凸3・凹2で上辺を作る
+    const notch = r * 0.35; // 凹みの深さ
+    path.moveTo(left, bottom);
+    path.lineTo(left, top);
+    for (let i = 0; i < 5; i++) {
+      const y = i % 2 === 0 ? top : top + notch;
+      path.lineTo(left + i * step, y);
+      path.lineTo(left + (i + 1) * step, y);
+    }
+    path.lineTo(right, bottom);
+    path.lineTo(cx, tipY); // 右下の角から先端へ
+  } else if (shape !== "circle") {
+    // 多角形。**真下に頂点が来る向きは使わない** —— とんがりと重なって
+    // 長さ0の線分になり、輪郭が潰れるため。下側の2頂点から先端へ引く
+    const deg = (d: number): [number, number] => {
+      const rad = (d * Math.PI) / 180;
+      return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
+    };
+    // 頂点を時計回りに並べ、下側の2頂点の間に先端を挟む。
+    // bottomRightはその「右下の頂点」の添字(ここを過ぎたら先端へ引く)
+    const [angles, bottomRight] =
+      shape === "diamond"
+        ? [[-90, 0, 180], 1] // ひし形は左右の頂点が下側の2点を兼ねる
+        : shape === "pentagon"
+          ? [[-90, -18, 54, 126, 198], 2]
+          : [[-60, 0, 60, 120, 180, 240], 2]; // 六角形は上辺を平らにする
+    (angles as number[]).forEach((d, i) => {
+      const [x, y] = deg(d);
+      if (i === 0) path.moveTo(x, y);
+      else path.lineTo(x, y);
+      if (i === bottomRight) path.lineTo(cx, tipY); // 右下の頂点から先端へ
+    });
   } else {
     // 円の下側±45°の2点からとんがりの先端へ直線を引いた吹き出し型
-    ctx.arc(cx, cy, r, (3 * Math.PI) / 4, Math.PI / 4);
-    ctx.lineTo(cx, tipY);
+    path.arc(cx, cy, r, (3 * Math.PI) / 4, Math.PI / 4);
+    path.lineTo(cx, tipY);
   }
-  ctx.closePath();
+  path.closePath();
   // shadow系プロパティはscale()の影響を受けないため実ピクセルで指定する
   ctx.shadowColor = "rgba(0,0,0,0.35)";
   ctx.shadowBlur = 2 * PIXEL_RATIO;
   ctx.shadowOffsetY = 1 * PIXEL_RATIO;
   ctx.fillStyle = fill;
-  ctx.fill();
+  ctx.fill(path);
   ctx.shadowColor = "transparent";
 
   // 縁取りは常に描く。非公開だけ破線にする(それ以外はシリーズの見た目のまま)
   ctx.setLineDash(isPrivate ? [3, 2.5] : []);
   ctx.lineWidth = 1.5;
   ctx.strokeStyle = borderColor;
-  ctx.stroke();
+  ctx.stroke(path);
   ctx.setLineDash([]);
 
   if (!visited && isImageLabel(label)) {