@growgroup/visual-editor 0.6.0 → 0.7.1

package/src/editor/FrontendVisualEditor.tsx

@@ -72,6 +72,20 @@ import { EditorToolbar } from './EditorToolbar';
 import { MultiPageCanvasView } from './components/multi-page';
 import { useMultiPageCanvasOptional } from './contexts/MultiPageCanvasContext';
 import { convertToAbsolutePositioning, buildDomTree, getArtboardContent, canUngroup, updateSelectionBox } from './utils/dom-utils';
+import {
+  enableFreeLayout,
+  disableFreeLayout,
+  enablePageFreeLayout,
+  disablePageFreeLayout,
+  isFreeLayoutContainer,
+  hasFreeLayout,
+  disableFreeLayoutTree,
+  FREELAYOUT_CLASS,
+  FREELAYOUT_HOLD_CLASS,
+  FREELAYOUT_ITEM_CLASS,
+} from './utils/free-layout';
+import { enableFreeLayoutTree, canEnableFreeLayoutTree, waitForFreeLayoutTreeReady } from './utils/free-layout-tree';
+import { ConfirmDialog } from './components/shell/ConfirmDialog';
 import { extractElementInfo } from './utils/style-utils';
 import { findTableCell, insertRow, insertColumn, deleteRow, deleteColumn } from './utils/table-edit';
 import { Loader2 } from 'lucide-react';
@@ -1138,6 +1152,146 @@ function FrontendVisualEditorInner({
     notifyIframeChange();
   }, [getIframeDoc, selectedElement?.id, notifyIframeChange]);
 
+  // ── 自由配置(webpage 専用) ──────────────────────────────
+  // 構成ラフは流し込みのまま保つのが既定で、ここだけが例外を作る入口。
+  // 「選んだ器の中だけ」と「ページの最上位セクション全部」の2段構えにして、
+  // 全体を倒す側には必ず確認ダイアログを挟む(高さが固定され、以後は
+  // 内容を足しても下へ押し出されなくなるため、取り返しの印象が強い)。
+  const isWebpage = editorMode === 'webpage';
+  const [pageFreeLayoutConfirm, setPageFreeLayoutConfirm] = useState<'on' | 'off' | null>(null);
+
+  /** 右クリック時点の選択要素を DOM から引く */
+  const selectedDomElement = useCallback((): HTMLElement | null => {
+    const doc = getIframeDoc();
+    if (!doc || !selectedElement?.id) return null;
+    return doc.querySelector<HTMLElement>(`[data-element-id="${selectedElement.id}"]`);
+  }, [getIframeDoc, selectedElement?.id]);
+
+  /**
+   * 変換のあとの後始末。
+   * notifyIframeChange が履歴の積み増しとレイヤーツリーの作り直しをやるので、
+   * ここでは選択枠だけを新しい位置へ合わせ直す(変換で矩形が変わるため)
+   */
+  const afterFreeLayoutChange = useCallback(
+    (doc: Document) => {
+      notifyIframeChange();
+      const el = selectedDomElement();
+      if (el) requestAnimationFrame(() => updateSelectionBox(doc, el));
+    },
+    [notifyIframeChange, selectedDomElement],
+  );
+
+  const handleFreeLayoutOn = useCallback(() => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    const n = enableFreeLayout(el, doc);
+    if (n === 0) {
+      toast.error('絶対配置にできませんでした(子が無いか、変換で位置がずれました)');
+      return;
+    }
+    afterFreeLayoutChange(doc);
+    toast.success(`${n}個の子を絶対配置にしました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  const handleFreeLayoutOff = useCallback(() => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    const n = disableFreeLayout(el, doc);
+    afterFreeLayoutChange(doc);
+    toast.success(`${n}個の子を流し込みに戻しました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  const handlePageFreeLayoutOn = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const { sections, elements } = enablePageFreeLayout(doc);
+    afterFreeLayoutChange(doc);
+    if (sections === 0) toast.error('自由配置にできるセクションがありませんでした');
+    else toast.success(`${sections}セクション・${elements}要素を自由配置にしました`);
+  }, [getIframeDoc, afterFreeLayoutChange]);
+
+  const handlePageFreeLayoutOff = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const { sections, elements } = disablePageFreeLayout(doc);
+    afterFreeLayoutChange(doc);
+    toast.success(`${sections}セクション・${elements}要素を流し込みに戻しました`);
+  }, [getIframeDoc, afterFreeLayoutChange]);
+
+  // ツリーの絶対配置: 選んだ要素から下の箱を入れ子まで全部倒す(free-layout-tree.ts)。
+  // 書体と画像の読み込みを待ってから測る。待っている間に共同編集の反映などで
+  // 要素が差し替わっていたら何もしない(古い要素を測っても意味がない)
+  const handleFreeLayoutTreeOn = useCallback(async () => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    await waitForFreeLayoutTreeReady(el, doc);
+    if (!el.isConnected) return;
+    const r = enableFreeLayoutTree(el, doc);
+    if (r.error) {
+      toast.error(r.error);
+      return;
+    }
+    if (r.items === 0) {
+      toast.error('絶対配置にできる箱がありませんでした(文字の流れ・表・部品のスロットの外は対象外です)');
+      return;
+    }
+    afterFreeLayoutChange(doc);
+    toast.success(`${r.items}個の要素を絶対配置にしました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  const handleFreeLayoutTreeOff = useCallback(() => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    const n = disableFreeLayoutTree(el, doc);
+    afterFreeLayoutChange(doc);
+    toast.success(`${n}個の要素を流し込みに戻しました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  /**
+   * 右クリックのメニューの「配置」の出し分け。メニューが開いている間の DOM を見て決める
+   * (ツリーの判定は木の computed style を読むので、メニューが開いていない再描画では回さない)。
+   *
+   * - 中に入れ子の器か、器の外で倒した要素がある … 「このツリーの絶対配置を解除する」
+   * - 自身が 1 段だけの器 … 「流し込みに戻す」(見えている順に並べ直す従来の解除)
+   * - どちらでもない … 「直下の子だけ絶対配置にする」
+   * - 倒せる箱が残っていれば、どの場合も「このツリーをすべて絶対配置にする」
+   *
+   * メニューが閉じている間は何もしない。選択の反映(ELEMENT_SELECTED)はメニューを開く合図より
+   * 1 テンポ遅れて届くことがあるので、選択が変わったら開いたまま決め直す
+   */
+  const freeLayoutMenu = useMemo(() => {
+    if (!isWebpage || !contextMenuPosition) return {};
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    const container = !!el && isFreeLayoutContainer(el);
+    const treeInside =
+      !!el &&
+      (!!el.querySelector(`.${FREELAYOUT_CLASS}`) ||
+        (!container && !!el.querySelector(`.${FREELAYOUT_ITEM_CLASS}, .${FREELAYOUT_HOLD_CLASS}`)));
+    return {
+      onFreeLayoutTreeOn: el && doc && canEnableFreeLayoutTree(el, doc) ? handleFreeLayoutTreeOn : undefined,
+      onFreeLayoutTreeOff: el && treeInside ? handleFreeLayoutTreeOff : undefined,
+      onFreeLayoutOn: el && !container && !treeInside ? handleFreeLayoutOn : undefined,
+      onFreeLayoutOff: el && container && !treeInside ? handleFreeLayoutOff : undefined,
+      onPageFreeLayoutOn: () => setPageFreeLayoutConfirm('on'),
+      onPageFreeLayoutOff: () => setPageFreeLayoutConfirm('off'),
+      pageHasFreeLayout: !!doc && hasFreeLayout(doc),
+    };
+  }, [
+    isWebpage,
+    contextMenuPosition,
+    getIframeDoc,
+    selectedDomElement,
+    handleFreeLayoutTreeOn,
+    handleFreeLayoutTreeOff,
+    handleFreeLayoutOn,
+    handleFreeLayoutOff,
+  ]);
+
   // 右クリックハンドラ
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
@@ -2428,6 +2582,25 @@ function FrontendVisualEditorInner({
         onDetachInstance={handleDetachInstance}
         onResetOverrides={handleResetOverrides}
         onPushOverridesToMain={handlePushOverridesToMain}
+        {...freeLayoutMenu}
+      />
+
+      {/* ページ一括の自由配置。版面全体の性格が変わるので必ず確認を挟む */}
+      <ConfirmDialog
+        open={pageFreeLayoutConfirm !== null}
+        onOpenChange={(open) => { if (!open) setPageFreeLayoutConfirm(null); }}
+        title={pageFreeLayoutConfirm === 'off' ? 'ページを流し込みに戻しますか？' : 'このページを自由配置にしますか？'}
+        description={
+          pageFreeLayoutConfirm === 'off'
+            ? '自由配置にしたセクションをすべて流し込みに戻します。要素は今見えている位置の順に並び直り、絶対配置の座標は失われます。'
+            : 'ページの最上位セクションをすべて自由配置にします。セクションの高さが固定され、内容を足しても下に押し出されなくなります。'
+        }
+        confirmLabel={pageFreeLayoutConfirm === 'off' ? '流し込みに戻す' : '自由配置にする'}
+        onConfirm={() => {
+          if (pageFreeLayoutConfirm === 'off') handlePageFreeLayoutOff();
+          else handlePageFreeLayoutOn();
+          setPageFreeLayoutConfirm(null);
+        }}
       />
 
       {/* AI生成ポップオーバー */}

package/src/editor/components/EditorCanvas.tsx

@@ -12,6 +12,7 @@ import { useDragResize } from "../hooks/useDragResize";
 import { useContextMenuHandler } from "../hooks/useContextMenuHandler";
 import { useIframeSetup } from "../hooks/useIframeSetup";
 import { useFocusManagement } from "../hooks/useFocusManagement";
+import { useKeepArtboardInPlace } from "../hooks/useKeepArtboardInPlace";
 import {
   SLIDE_WIDTH,
   SLIDE_HEIGHT,
@@ -27,6 +28,8 @@ import {
 } from "../utils/dom-utils";
 import { generateEditableHtml } from "../utils/html-utils";
 import { setupInlineFormatToolbar } from "../utils/inline-format";
+import { setupLineBreakOnEnter } from "../utils/text-line-break";
+import { setupInlineTextSelection } from "../utils/inline-text-style";
 import { recalculateViewportUnits } from "../utils/viewport-utils";
 import { useMultiPageCanvasOptional } from "../contexts/MultiPageCanvasContext";
 import { applyDocumentAttributes } from "./multi-page/PageFramePreview";
@@ -36,6 +39,7 @@ import { io } from "../../io";
 import { COLLAB_DOCUMENT_READY_ATTR, COLLAB_DOCUMENT_READY_EVENT } from "../collab/signals";
 import { showPartDropIndicator, clearPartDropIndicator, findFlowInsertion } from "../utils/drop-target";
 import { debugLog } from '../utils/debug';
+import { useLinkNavigation } from "../hooks/useLinkNavigation";
 import { useEditorComponents } from "../contexts/EditorComponentsContext";
 import type {
   DOMTreeNode,
@@ -129,6 +133,7 @@ export function EditorCanvas() {
     editorMode,
     setShowLayoutHint,
     viewportWidth,
+    iframeReady,
     setIframeReady,
     documentAttributes,
     currentContentId,
@@ -160,6 +165,8 @@ export function EditorCanvas() {
 
   // Figmaライクなキャンバス操作
   useCanvasControls();
+  // 左のパネルを出し入れしても紙面を画面上の同じ位置に留める(1 ページ表示。マルチフレームは MultiPageCanvasView)
+  useKeepArtboardInPlace(containerRef, getIframeDoc, !isInMultiPageMode, iframeReady);
 
   // グループ化/グループ解除/スタイルコピー&ペースト/Figmaエクスポート
   const { groupElements, ungroupElements, copyStyle, pasteStyle, copyToFigma } = useElementActions();
@@ -266,6 +273,9 @@ export function EditorCanvas() {
     marqueeGeomRef,
   });
 
+  // ⌘ / Ctrl + クリックでリンク先へ移る(選択の mousedown には手を出さず、クリックが確定してから移る)
+  const { setupLinkNavigation } = useLinkNavigation();
+
   // マーキー選択
   const {
     marqueeBoxRef: _marqueeBoxRef, // used internally by hook
@@ -531,8 +541,14 @@ export function EditorCanvas() {
 
     // 選択リスナー（mousedown, dblclick）
     cleanupFunctions.push(setupSelectionListeners(iframeDoc));
+    // ⌘ / Ctrl + クリックでリンク先へ(ページ・アンカー・外部サイト)
+    cleanupFunctions.push(setupLinkNavigation(iframeDoc));
     // テキスト編集中の範囲選択に、マーカー・太字のツールバーを出す
     cleanupFunctions.push(setupInlineFormatToolbar(iframeDoc));
+    // 範囲選択を覚えておき、パネルで変えた文字の大きさ・太さ・色・字間を選んだ所だけに当てる
+    cleanupFunctions.push(setupInlineTextSelection(iframeDoc));
+    // テキスト編集中の Enter は段落を分けず、同じ要素の中の改行(<br>)にする
+    cleanupFunctions.push(setupLineBreakOnEnter(iframeDoc));
 
     // コンテキストメニュー
     cleanupFunctions.push(setupContextMenuListener(iframeDoc));

package/src/editor/components/EditorContextMenu.tsx

@@ -40,6 +40,12 @@ import {
   BetweenVerticalEnd,
   Rows3,
   Columns3,
+  Move,
+  AlignVerticalJustifyStart,
+  LayoutGrid,
+  AlignJustify,
+  ListTree,
+  ListCollapse,
 } from 'lucide-react';
 
 export interface ContextMenuPosition {
@@ -104,6 +110,21 @@ export interface ContextMenuProps {
   // 部品操作
   onDetachPart?: () => void;
   onUpdatePart?: () => void;
+  // 自由配置(webpage のみ。渡されたものだけ出す)
+  /** 選んだ要素から下の箱を、入れ子まですべて絶対配置にする */
+  onFreeLayoutTreeOn?: () => void;
+  /** 選んだ要素から下の自由配置を、入れ子まですべて流し込みへ戻す */
+  onFreeLayoutTreeOff?: () => void;
+  /** 選んだ要素を器にして、直下の子だけを絶対配置にする */
+  onFreeLayoutOn?: () => void;
+  /** 1 段だけの器を流し込みへ戻す */
+  onFreeLayoutOff?: () => void;
+  /** ページの最上位セクションをまとめて自由配置にする */
+  onPageFreeLayoutOn?: () => void;
+  /** ページの自由配置をまとめて解除する */
+  onPageFreeLayoutOff?: () => void;
+  /** ページのどこかに自由配置の器があるか(解除項目の出し分け) */
+  pageHasFreeLayout?: boolean;
 }
 
 interface MenuItemProps {
@@ -191,6 +212,13 @@ export function EditorContextMenu({
   onDetachInstance,
   onResetOverrides,
   onPushOverridesToMain,
+  onFreeLayoutTreeOn,
+  onFreeLayoutTreeOff,
+  onFreeLayoutOn,
+  onFreeLayoutOff,
+  onPageFreeLayoutOn,
+  onPageFreeLayoutOff,
+  pageHasFreeLayout,
 }: ContextMenuProps) {
   const { restoreFocus } = useEditorContext();
   if (!position) return null;
@@ -380,6 +408,58 @@ export function EditorContextMenu({
         disabled={!hasSelection || selectionCount > 1}
       />
 
+      {/* 自由配置(webpage のみ渡される)。
+          広い範囲から順に「ツリーごと」→「直下の子だけ」→「ページ全体」と並べ、
+          戻す道は同じ粒度の項目と入れ替わりで出す(戻せないと怖くて使えない) */}
+      {(onFreeLayoutTreeOn || onFreeLayoutTreeOff || onFreeLayoutOn || onFreeLayoutOff || onPageFreeLayoutOn || onPageFreeLayoutOff) && (
+        <>
+          <MenuDivider />
+          <div className="px-3 pb-0.5 pt-1 text-[10px] text-gray-500">配置</div>
+          {onFreeLayoutTreeOn && (
+            <MenuItem
+              icon={<ListTree className="w-3.5 h-3.5" />}
+              label="このツリーをすべて絶対配置にする"
+              onClick={() => handleAction(onFreeLayoutTreeOn)}
+            />
+          )}
+          {onFreeLayoutTreeOff && (
+            <MenuItem
+              icon={<ListCollapse className="w-3.5 h-3.5" />}
+              label="このツリーの絶対配置を解除する"
+              onClick={() => handleAction(onFreeLayoutTreeOff)}
+            />
+          )}
+          {onFreeLayoutOn && (
+            <MenuItem
+              icon={<Move className="w-3.5 h-3.5" />}
+              label="直下の子だけ絶対配置にする"
+              onClick={() => handleAction(onFreeLayoutOn)}
+            />
+          )}
+          {onFreeLayoutOff && (
+            <MenuItem
+              icon={<AlignVerticalJustifyStart className="w-3.5 h-3.5" />}
+              label="流し込みに戻す"
+              onClick={() => handleAction(onFreeLayoutOff)}
+            />
+          )}
+          <MenuItem
+            icon={<LayoutGrid className="w-3.5 h-3.5" />}
+            label="このページを自由配置にする…"
+            onClick={() => handleAction(onPageFreeLayoutOn)}
+            disabled={!onPageFreeLayoutOn}
+          />
+          {pageHasFreeLayout && (
+            <MenuItem
+              icon={<AlignJustify className="w-3.5 h-3.5" />}
+              label="ページを流し込みに戻す…"
+              onClick={() => handleAction(onPageFreeLayoutOff)}
+              disabled={!onPageFreeLayoutOff}
+            />
+          )}
+        </>
+      )}
+
       <MenuDivider />
 
       {/* レイヤー操作 */}