Vertical text

"use client";
 
import {
  type CombineUpright,
  type TextOrientation,
  VerticalText,
} from "fabricjs-document-engine/text";
import {
  DownloadIcon,
  PencilIcon,
  RotateCwIcon,
  SigmaIcon,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { useEffect, useRef, useState } from "react";
 
import { DemoCanvas, DemoFrame, Status, Toolbar, ToolButton } from "./demo-ui";
import { PAGE, useFabricCanvas } from "./use-fabric-canvas";
 
const TEXT = "縦書きの文章、ABCも読める。\n令和8年10月2日\n한국어 세로쓰기";
 
export default function VerticalTextDemo() {
  const t = useTranslations("demos");
  const { elementRef, canvas } = useFabricCanvas();
  const textRef = useRef<VerticalText | null>(null);
  const [orientation, setOrientation] = useState<TextOrientation>("mixed");
  const [combine, setCombine] = useState<CombineUpright>("digits2");
  const [message, setMessage] = useState("");
 
  useEffect(() => {
    if (!canvas) return;
    const text = new VerticalText(TEXT, {
      left: PAGE.width - 40,
      top: 20,
      originX: "right",
      originY: "top",
      fontSize: 24,
      lineHeight: 1.3,
      fill: "#0d0d0d",
      combineUpright: "digits2",
      styles: {
        0: {
          0: { fill: "#6f00ff" },
          1: { fill: "#6f00ff" },
          2: { fill: "#6f00ff" },
        },
      },
    });
    textRef.current = text;
    canvas.add(text);
    canvas.setActiveObject(text);
    canvas.requestRenderAll();
    return () => {
      canvas.remove(text);
    };
  }, [canvas]);
 
  useEffect(() => {
    const text = textRef.current;
    if (!canvas || !text) return;
    text.set({ textOrientation: orientation, combineUpright: combine });
    text.setCoords();
    canvas.requestRenderAll();
  }, [canvas, orientation, combine]);
 
  function edit() {
    const text = textRef.current;
    if (!canvas || !text) return;
    canvas.setActiveObject(text);
    text.enterEditing();
    text.selectAll();
    setMessage(t("vertical.editing"));
  }
 
  function downloadSvg() {
    if (!canvas) return;
    const url = URL.createObjectURL(
      new Blob([canvas.toSVG()], { type: "image/svg+xml" })
    );
    const link = document.createElement("a");
    link.href = url;
    link.download = "vertical-text.svg";
    link.click();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
    setMessage(t("vertical.downloaded"));
  }
 
  return (
    <DemoFrame>
      <DemoCanvas elementRef={elementRef} label={t("canvas")} />
 
      <Toolbar>
        <ToolButton
          icon={PencilIcon}
          label={t("vertical.edit")}
          primary
          disabled={!canvas}
          onClick={edit}
        />
        <ToolButton
          icon={RotateCwIcon}
          label={
            orientation === "mixed"
              ? t("vertical.mixed")
              : t("vertical.upright")
          }
          onClick={() =>
            setOrientation((value) => (value === "mixed" ? "upright" : "mixed"))
          }
        />
        <ToolButton
          icon={SigmaIcon}
          label={
            combine === "digits2"
              ? t("vertical.combined")
              : t("vertical.separate")
          }
          onClick={() =>
            setCombine((value) => (value === "digits2" ? "none" : "digits2"))
          }
        />
        <ToolButton
          icon={DownloadIcon}
          label={t("vertical.svg")}
          disabled={!canvas}
          onClick={downloadSvg}
        />
      </Toolbar>
 
      <Status tone={message ? "ok" : "idle"}>
        {message || t("vertical.hint")}
      </Status>
    </DemoFrame>
  );
}