@growgroup/visual-editor 0.1.0

package/src/editor/types.ts

@@ -0,0 +1,382 @@
+/**
+ * フロントエンドエディタの型定義
+ * (スライド、ページ、コンポーネント等で共用)
+ */
+
+// 再エクスポート（既存の型）
+export type {
+  EditorTool,
+  SerializedElement,
+  ClipboardData,
+  DrawingState,
+  BoundingBox,
+  EditorToolbarProps,
+} from '../types/editor';
+
+export { DEFAULT_SHAPE_STYLES, MOVEMENT_AMOUNTS, TOOL_CONFIGS } from '../types/editor';
+
+// DOMツリーノード
+export interface DOMTreeNode {
+  id: string;
+  tagName: string;
+  className: string;
+  text: string;
+  children: DOMTreeNode[];
+  visible: boolean;
+  depth: number;
+  /** コンポーネントインスタンスID (該当する場合) */
+  componentInstanceId?: string;
+  /** マスターコンポーネントID (該当する場合) */
+  masterComponentId?: string;
+}
+
+// 選択された要素の情報
+export interface SelectedElementInfo {
+  id: string;
+  tagName: string;
+  text: string;
+  // Typography
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+  textAlign: string;
+  textDecoration: string;
+  fontStyle: string;
+  color: string;
+  // Layout
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  widthAuto: boolean;  // width: auto かどうか
+  heightAuto: boolean; // height: auto かどうか
+  rotation: number;
+  // Transform (flip)
+  scaleX: number;      // 1 or -1 (horizontal flip)
+  scaleY: number;      // 1 or -1 (vertical flip)
+  // Padding
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  paddingLinked: boolean; // すべてのpaddingが同じかどうか
+  // Margin
+  marginTop: number;
+  marginRight: number;
+  marginBottom: number;
+  marginLeft: number;
+  // Background
+  backgroundColor: string;
+  backgroundImage: string;
+  backgroundSize: string;
+  backgroundPosition: string;
+  backgroundRepeat: string;
+  opacity: number;
+  // Image fill settings
+  hasBackgroundImage: boolean;
+  imageFillMode: ImageFillMode;
+  imagePositionX: number;
+  imagePositionY: number;
+  imageScale: number;
+  // Border
+  borderWidth: number;
+  borderColor: string;
+  borderStyle: string;
+  borderRadius: number;
+  borderRadiusTopLeft: number;
+  borderRadiusTopRight: number;
+  borderRadiusBottomRight: number;
+  borderRadiusBottomLeft: number;
+  // Shadow
+  boxShadow: string;
+  hasShadow: boolean;
+  shadowX: number;
+  shadowY: number;
+  shadowBlur: number;
+  shadowSpread: number;
+  shadowColor: string;
+  // Filter effects
+  filter: string;
+  filterBlur: number;        // blur(Xpx)
+  filterBrightness: number;  // brightness(X)
+  filterContrast: number;    // contrast(X)
+  filterGrayscale: number;   // grayscale(X)
+  filterSaturate: number;    // saturate(X)
+  filterSepia: number;       // sepia(X)
+  filterHueRotate: number;   // hue-rotate(Xdeg)
+  filterInvert: number;      // invert(X)
+  mixBlendMode: string;
+  // Backdrop filter
+  backdropFilter: string;
+  backdropBlur: number;      // backdrop-filter: blur(Xpx)
+  // Overflow
+  overflow: string;          // visible, hidden, scroll, auto
+  // Transform settings
+  transformOrigin: string;   // transform-origin
+  // Auto Layout (Flexbox) settings
+  display: string;           // block, flex, grid
+  flexDirection: string;     // row, column, row-reverse, column-reverse
+  flexWrap: string;          // nowrap, wrap, wrap-reverse
+  justifyContent: string;    // flex-start, center, flex-end, space-between, space-around, space-evenly
+  alignItems: string;        // flex-start, center, flex-end, stretch, baseline
+  gap: number;               // gap between items
+  // Child flex properties
+  flexGrow: number;          // flex-grow
+  flexShrink: number;        // flex-shrink
+  flexBasis: string;         // flex-basis (auto, px, %)
+  alignSelf: string;         // auto, flex-start, center, flex-end, stretch
+  // CSS Grid properties
+  gridTemplateColumns: string;  // grid-template-columns
+  gridTemplateRows: string;     // grid-template-rows
+  gridGap: number;              // gap (for grid)
+  gridRowGap: number;           // row-gap
+  gridColumnGap: number;        // column-gap
+  gridAutoFlow: string;         // grid-auto-flow: row, column, dense
+  gridAutoRows: string;         // grid-auto-rows
+  gridAutoColumns: string;      // grid-auto-columns
+  justifyItems: string;         // justify-items: start, center, end, stretch
+  alignContent: string;         // align-content: start, center, end, stretch, space-between, space-around
+  // Child grid properties
+  gridColumn: string;           // grid-column (e.g., "1 / 3", "span 2")
+  gridRow: string;              // grid-row (e.g., "1 / 2", "span 2")
+  gridColumnStart: number;      // grid-column-start
+  gridColumnEnd: number;        // grid-column-end
+  gridRowStart: number;         // grid-row-start
+  gridRowEnd: number;           // grid-row-end
+  justifySelf: string;          // justify-self: start, center, end, stretch
+  // Parent Layout context
+  parentDisplay: string;     // 親要素のdisplayプロパティ
+  parentFlexDirection: string; // 親要素のflex-direction
+  // Link properties (for <a> tags)
+  isLink: boolean;
+  /** [移植時の追加] <img>要素のsrc(画像差し替えUI用) */
+  imageSrc?: string;           // この要素またはその親が<a>タグかどうか
+  linkHref: string;          // href属性値
+  linkTarget: string;        // target属性値 (_self, _blank, _parent, _top)
+  linkTitle: string;         // title属性値
+  // CSS Variable references (raw inline style values if they contain var())
+  rawWidth?: string;          // width (e.g., "var(--spacing-lg)")
+  rawHeight?: string;         // height
+  rawPaddingTop?: string;     // padding-top
+  rawPaddingRight?: string;   // padding-right
+  rawPaddingBottom?: string;  // padding-bottom
+  rawPaddingLeft?: string;    // padding-left
+  rawMarginTop?: string;      // margin-top
+  rawMarginRight?: string;    // margin-right
+  rawMarginBottom?: string;   // margin-bottom
+  rawMarginLeft?: string;     // margin-left
+  rawBackgroundColor?: string; // background-color (e.g., "var(--color-primary)")
+  rawColor?: string;          // color (text color)
+  rawBorderColor?: string;    // border-color
+  // Additional CSS Variable references
+  rawBorderRadius?: string;   // border-radius
+  rawBorderTopLeftRadius?: string;
+  rawBorderTopRightRadius?: string;
+  rawBorderBottomLeftRadius?: string;
+  rawBorderBottomRightRadius?: string;
+  rawOpacity?: string;        // opacity
+  rawFontSize?: string;       // font-size
+  rawLineHeight?: string;     // line-height
+  rawLetterSpacing?: string;  // letter-spacing
+  rawBorderWidth?: string;    // border-width
+  rawGap?: string;            // gap (flexbox/grid)
+  rawLeft?: string;           // left (position)
+  rawTop?: string;            // top (position)
+}
+
+// 画像フィルモード
+export type ImageFillMode = 'fill' | 'fit' | 'crop' | 'tile';
+
+// プロパティパネルのセクション開閉状態
+export interface PanelSections {
+  position: boolean;    // 位置: 配置、XY座標、回転
+  layout: boolean;      // レイアウト: オートレイアウト、サイズ、クリッピング
+  appearance: boolean;  // 外見: 不透明度、角丸
+  image: boolean;
+  typography: boolean;
+  link: boolean;        // リンク設定（<a>タグ）
+  fill: boolean;
+  stroke: boolean;
+  effects: boolean;
+}
+
+/**
+ * スタイルクリップボード（Figmaライクなスタイルコピー&ペースト用）
+ * 位置・サイズ以外のスタイルプロパティを保持
+ */
+export interface StyleClipboard {
+  // タイポグラフィ
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  textAlign?: string;
+  textDecoration?: string;
+  fontStyle?: string;
+  color?: string;
+
+  // 背景・塗り
+  backgroundColor?: string;
+  backgroundImage?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  backgroundRepeat?: string;
+  opacity?: number;
+
+  // ボーダー
+  borderWidth?: number;
+  borderColor?: string;
+  borderStyle?: string;
+  borderRadius?: number;
+  borderRadiusTopLeft?: number;
+  borderRadiusTopRight?: number;
+  borderRadiusBottomRight?: number;
+  borderRadiusBottomLeft?: number;
+
+  // シャドウ
+  boxShadow?: string;
+
+  // フィルター
+  filter?: string;
+  mixBlendMode?: string;
+  backdropFilter?: string;
+
+  // パディング
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+
+  // Flexbox（オートレイアウト）
+  display?: string;
+  flexDirection?: string;
+  flexWrap?: string;
+  justifyContent?: string;
+  alignItems?: string;
+  gap?: number;
+}
+
+// エディタのメッセージタイプ
+export type EditorMessageType =
+  | 'SLIDE_CONTENT_CHANGED'
+  | 'ELEMENT_SELECTED'
+  | 'ELEMENT_DESELECTED'
+  | 'TOOL_FINISHED'
+  | 'DOM_TREE_UPDATED';
+
+// エディタのメッセージ
+export interface EditorMessage {
+  type: EditorMessageType;
+  html?: string;
+  element?: SelectedElementInfo;
+  tree?: DOMTreeNode[];
+}
+
+// ドラッグ状態
+export interface DragState {
+  element: HTMLElement | null;
+  elements: HTMLElement[]; // 複数選択時のドラッグ用
+  startX: number;
+  startY: number;
+  origLeft: number;
+  origTop: number;
+  origPositions: { left: number; top: number }[]; // 複数選択時の元位置
+  isDragging: boolean;
+  hasMoved: boolean;
+  // Flex reorder mode (auto-layout)
+  flexReorderMode: boolean;
+  flexParent: HTMLElement | null;
+  originalIndex: number;
+  targetIndex: number;
+  // Enhanced auto-layout drag (hierarchy change support)
+  autoLayoutDragMode: boolean;      // オートレイアウトドラッグモード
+  dragGhost: HTMLElement | null;    // ドラッグゴースト（カーソル追従する縮小コピー）
+  originalParent: HTMLElement | null; // ドラッグ元の親要素
+  currentDropTarget: HTMLElement | null; // 現在のドロップターゲット
+  dropPosition: 'before' | 'after' | 'inside' | null; // ドロップ位置
+  dropIndex: number;                // ドロップ先のインデックス
+}
+
+// リサイズ状態
+export interface ResizeState {
+  isResizing: boolean;
+  isRotating: boolean; // 回転モード
+  element: HTMLElement | null;
+  elements: HTMLElement[]; // 複数選択時の対象要素
+  handle: string;
+  startX: number;
+  startY: number;
+  origLeft: number;
+  origTop: number;
+  origWidth: number;
+  origHeight: number;
+  origRadius: number;
+  // 複数選択時のバウンディングボックスと各要素の初期状態
+  selectionBounds: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    right: number;
+    bottom: number;
+  } | null;
+  origElementStates: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  }[];
+  // Scale Tool用状態
+  origScaleX: number;
+  origScaleY: number;
+  rotation: number;
+  // 回転用状態
+  rotationStartAngle: number;
+  centerX: number;
+  centerY: number;
+}
+
+// 要素キャプチャ（絶対配置変換用）
+export interface ElementCapture {
+  element: HTMLElement;
+  rect: DOMRect;
+  parent: HTMLElement | null;
+  parentRect: DOMRect | null;
+  computedStyle: CSSStyleDeclaration;
+  parentComputedStyle: CSSStyleDeclaration | null;
+  // 拡張情報（改善版変換用）
+  originalTransform?: string;      // 元のtransform
+  scale?: number;                  // iframeのズームスケール
+  /** 変換前の style 属性(自己検証で崩れを検知したとき巻き戻すため) */
+  prevStyle?: string | null;
+}
+
+// FrontendVisualEditorのProps
+export interface FrontendVisualEditorProps {
+  html: string;
+  /** コンテンツID（スライドID、ページID等） */
+  contentId?: string;
+  /** 親ID（プレゼンテーションID、プロジェクトID等） */
+  parentId?: string;
+  /** @deprecated Use contentId instead */
+  slideId?: string;
+  /** @deprecated Use parentId instead */
+  presentationId?: string;
+  onSave: (html: string) => Promise<void>;
+  onClose: () => void;
+}
+
+/** @deprecated Use FrontendVisualEditorProps instead */
+export type SlideVisualEditorProps = FrontendVisualEditorProps;
+
+// マーキー選択（範囲選択）の状態
+export interface MarqueeState {
+  isActive: boolean;
+  startX: number;  // キャンバス座標
+  startY: number;
+  currentX: number;
+  currentY: number;
+}

package/src/editor/utils/align-elements.ts

@@ -0,0 +1,169 @@
+/**
+ * 選択要素の配置(整列)と等間隔配置。
+ *
+ * 【なぜ offset* を使うか】
+ * アートボードはズームのために CSS transform で拡縮している。getBoundingClientRect() は
+ * その拡縮が乗った画面pxを返すので、書き込み先の style.left(素のアートボードpx)と
+ * 単位が食い違う。offsetLeft/offsetTop/offsetWidth/offsetHeight は transform の影響を
+ * 受けないレイアウト値なので、実測と書き込みの単位が必ず一致する。
+ *
+ * 【基準の決め方】
+ * ・2個以上 … 選択群のバウンディングボックス(PowerPointと同じ「選択したオブジェクトを揃える」)
+ * ・1個     … アートボード(1920×1080)
+ *
+ * 【入れ子の扱い】
+ * スライドの要素は「カードの中の見出し」のように入れ子になっていることが多く、
+ * offsetLeft は要素ごとに違う親を原点にした値になる。そのまま比べると別々の
+ * ものさしで測った数字を並べることになるので、いったん**アートボード座標**へ
+ * 直して比較し、書き戻すときにその要素の原点へ戻す。
+ *
+ * 位置は style.left / style.top へ書き戻すため、動かせるのは絶対配置の要素だけ。
+ * 通常フロー(static)や relative の要素は left/top を書いても意図どおりに動かないので触らない。
+ */
+
+/** アートボードの設計寸法(スライドは常にこの大きさ) */
+const ARTBOARD_W = 1920;
+const ARTBOARD_H = 1080;
+
+export type AlignMode = 'left' | 'hcenter' | 'right' | 'top' | 'vcenter' | 'bottom';
+export type DistributeAxis = 'h' | 'v';
+
+/** 実測した1要素。位置はアートボード座標、原点はその要素の left/top の起点 */
+type Box = {
+  el: HTMLElement;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  /** この要素の left/top が測られている原点(アートボード座標) */
+  originX: number;
+  originY: number;
+  /** left/top を書いて動かせるか。動かせない要素も「選択群の広さ」には数える */
+  movable: boolean;
+};
+
+/** left/top を書いて動かせる要素か(絶対配置のみ) */
+function isMovable(el: HTMLElement): boolean {
+  const pos = el.ownerDocument.defaultView?.getComputedStyle(el).position;
+  return pos === 'absolute' || pos === 'fixed';
+}
+
+/** アートボードの左上から見た位置。offsetParent を遡って足し上げる */
+function artboardOffset(el: HTMLElement): { x: number; y: number } {
+  let x = 0;
+  let y = 0;
+  let node: HTMLElement | null = el;
+  while (node) {
+    x += node.offsetLeft;
+    y += node.offsetTop;
+    const parent = node.offsetParent as HTMLElement | null;
+    if (!parent || parent.id === 'artboard') break;
+    node = parent;
+  }
+  return { x, y };
+}
+
+/**
+ * 選択要素をアートボード座標で実測する。
+ * 動かせない要素も返すのは、基準になる「選択群の広さ」から外すと、
+ * 例えば2つ選んだうちの片方が動かせないときに、残り1つが
+ * アートボード基準へ勝手に切り替わってしまうため。
+ */
+function measure(els: HTMLElement[]): Box[] {
+  return els.map((el) => {
+    const { x, y } = artboardOffset(el);
+    return {
+      el,
+      x,
+      y,
+      width: el.offsetWidth,
+      height: el.offsetHeight,
+      originX: x - el.offsetLeft,
+      originY: y - el.offsetTop,
+      movable: isMovable(el),
+    };
+  });
+}
+
+/** アートボード座標で指定した位置へ置く(その要素の原点に直してから書く) */
+function setX(b: Box, x: number): void {
+  b.el.style.left = `${Math.round(x - b.originX)}px`;
+}
+function setY(b: Box, y: number): void {
+  b.el.style.top = `${Math.round(y - b.originY)}px`;
+}
+
+/** 整列の基準になる枠(アートボード座標)。複数選択なら選択群、単一ならアートボード全面 */
+function referenceRect(boxes: Box[]): { left: number; top: number; right: number; bottom: number } {
+  if (boxes.length > 1) {
+    return {
+      left: Math.min(...boxes.map((b) => b.x)),
+      top: Math.min(...boxes.map((b) => b.y)),
+      right: Math.max(...boxes.map((b) => b.x + b.width)),
+      bottom: Math.max(...boxes.map((b) => b.y + b.height)),
+    };
+  }
+  return { left: 0, top: 0, right: ARTBOARD_W, bottom: ARTBOARD_H };
+}
+
+/**
+ * 指定した揃え方で要素を動かす。戻り値は実際に動かした要素。
+ * 複数選択時は選択群のバウンディングボックス、単一選択時はアートボードが基準。
+ */
+export function alignElements(els: HTMLElement[], mode: AlignMode): HTMLElement[] {
+  const boxes = measure(els);
+  const movable = boxes.filter((b) => b.movable);
+  if (!movable.length) return [];
+  // 基準は選択全体、動かすのは動かせるものだけ
+  const ref = referenceRect(boxes);
+  const cx = (ref.left + ref.right) / 2;
+  const cy = (ref.top + ref.bottom) / 2;
+
+  for (const b of movable) {
+    switch (mode) {
+      case 'left': setX(b, ref.left); break;
+      case 'hcenter': setX(b, cx - b.width / 2); break;
+      case 'right': setX(b, ref.right - b.width); break;
+      case 'top': setY(b, ref.top); break;
+      case 'vcenter': setY(b, cy - b.height / 2); break;
+      case 'bottom': setY(b, ref.bottom - b.height); break;
+    }
+  }
+  return movable.map((b) => b.el);
+}
+
+/**
+ * 等間隔に配置する(3個以上)。両端の要素はそのままで、間の要素の**すき間**が
+ * 均等になるように置き直す(PowerPointの「左右に整列」と同じ)。
+ * 要素の幅がまちまちでも見た目の間隔が揃うよう、中心間ではなく辺と辺の間で割る。
+ */
+export function distributeElements(els: HTMLElement[], axis: DistributeAxis): HTMLElement[] {
+  // 等間隔は「並べ替える対象」そのものが要るので、動かせる要素だけで組む
+  const boxes = measure(els).filter((b) => b.movable);
+  if (boxes.length < 3) return [];
+
+  const horizontal = axis === 'h';
+  const start = (b: Box) => (horizontal ? b.x : b.y);
+  const size = (b: Box) => (horizontal ? b.width : b.height);
+  const place = horizontal ? setX : setY;
+
+  const sorted = [...boxes].sort((a, b) => start(a) - start(b));
+  const first = sorted[0];
+  const last = sorted[sorted.length - 1];
+
+  // 両端の内側に残る空きを、間の要素で分け合う
+  const span = start(last) - (start(first) + size(first));
+  const innerSize = sorted.slice(1, -1).reduce((sum, b) => sum + size(b), 0);
+  const gap = (span - innerSize) / (sorted.length - 1);
+
+  let cursor = start(first) + size(first);
+  const moved: HTMLElement[] = [];
+  for (let i = 1; i < sorted.length - 1; i++) {
+    const b = sorted[i];
+    cursor += gap;
+    place(b, cursor);
+    cursor += size(b);
+    moved.push(b.el);
+  }
+  return moved;
+}

package/src/editor/utils/api-json.ts

@@ -0,0 +1,21 @@
+/**
+ * devサーバーのAPI応答を安全に読む。
+ *
+ * プラグイン未読込(テンプレ更新後にdevサーバーが古いまま)だと、/__ 系は
+ * 404の空応答やSPAのHTMLが返り、素の res.json() は
+ * 「Unexpected end of JSON input」で落ちて原因が伝わらない。
+ * ここで空/HTMLを検出して「サーバーの再起動が必要」という言葉に変える。
+ */
+export async function readApiJson<T>(res: Response): Promise<T> {
+  const text = await res.text();
+  if (!text.trim() || text.trimStart().startsWith('<')) {
+    throw new Error(
+      '開発サーバーが新しい機能を読み込んでいません。devサーバー(npm run dev)を再起動してください',
+    );
+  }
+  try {
+    return JSON.parse(text) as T;
+  } catch {
+    throw new Error(`サーバー応答を解釈できません: ${text.slice(0, 80)}`);
+  }
+}

package/src/editor/utils/aspect-lock.ts

@@ -0,0 +1,50 @@
+/**
+ * 縦横比ロック（アスペクト比ロック）の共有ストア
+ *
+ * [なぜ Context ではなくモジュールスコープなのか]
+ * ロック状態を読む必要があるのは
+ *   1) プロパティパネル（トグル UI と W/H 入力）— React の再描画が要る
+ *   2) useDragResize のマウスハンドラ — iframe ロード時のクロージャに閉じ込められる
+ * の 2 箇所。2) は「イベントハンドラが古い値を掴む」問題があるため React state を
+ * そのまま渡せない（同ファイル冒頭に zoom で同じ注意書きがある）。
+ * 関数で最新値を読めるモジュールスコープのストアにしておけば、両方から同じ値を見られる。
+ *
+ * [なぜ永続化しないのか]
+ * Figma と同様、ロックは選択を変えても保たれるがセッションを越えては引き継がない。
+ * リロード後に「なぜか比率が固定されている」状態を復元すると事故のもとなのでメモリ内のみ。
+ */
+
+import { useSyncExternalStore } from 'react';
+
+let locked = false;
+const listeners = new Set<() => void>();
+
+/** 現在のロック状態（イベントハンドラからはこれを呼ぶ） */
+export function isAspectRatioLocked(): boolean {
+  return locked;
+}
+
+/** ロック状態を変更する（変化が無ければ通知しない） */
+export function setAspectRatioLocked(next: boolean): void {
+  if (locked === next) return;
+  locked = next;
+  listeners.forEach((listener) => listener());
+}
+
+/** 変更購読（useSyncExternalStore 用） */
+export function subscribeAspectRatioLock(onStoreChange: () => void): () => void {
+  listeners.add(onStoreChange);
+  return () => {
+    listeners.delete(onStoreChange);
+  };
+}
+
+/** React からロック状態を購読する */
+export function useAspectRatioLock(): boolean {
+  return useSyncExternalStore(
+    subscribeAspectRatioLock,
+    isAspectRatioLocked,
+    // SSR / ハイドレーション時は必ず false（サーバに状態は無い）
+    () => false,
+  );
+}