@growgroup/visual-editor 0.3.1 → 0.4.1

package/src/io.ts

@@ -36,15 +36,36 @@ export type EditorContent = {
   comments?: EditorComment[];
 };
 
+/**
+ * 範囲アンカー。紙面(`#artboard`)の左上を原点にした px。
+ * `ref` は投稿したときの紙面の大きさ。紙面の幅が変わったら(ノート欄の有無など)
+ * 横方向だけ幅の比で補正する。縦は内容が増減すると動くので補正しない。
+ * width / height が 0 のときは「点」(クリックで置いたピン)。
+ */
+export type CommentRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ref?: { width: number; height: number };
+};
+
 export type EditorComment = {
   id: string;
   author: string;
   text: string;
   createdAt: string;
   resolved?: boolean;
+  /**
+   * ページ内の通し番号(投稿順)。削除しても振り直さないので、返信で「#3 の件」と
+   * 書いても指す先が変わらない。ホストが採番する(無いホストでは付かない)
+   */
+  seq?: number;
   /** 要素アンカー。無ければ全体へのコメント */
   anchorSrc?: string;
   anchorLabel?: string;
+  /** 範囲アンカー(紙面の px)。要素アンカーより優先して表示する */
+  anchorRect?: CommentRect;
   replies?: { id: string; author: string; text: string; createdAt: string }[];
 };
 
@@ -55,7 +76,7 @@ export type EditorDeck = {
 };
 
 export type CommentAction =
-  | { action: "add"; author: string; text: string; anchorSrc?: string; anchorLabel?: string }
+  | { action: "add"; author: string; text: string; anchorSrc?: string; anchorLabel?: string; anchorRect?: CommentRect }
   | { action: "reply"; commentId: string; author: string; text: string }
   | { action: "resolve"; commentId: string; resolved: boolean }
   | { action: "delete"; commentId: string };

package/src/lib/firebase/css-variables.ts

@@ -17,6 +17,7 @@ import type {
   CSSVariableDefinition,
   CSSVariableCollection,
 } from '../../types/css-variables';
+import { debugLog } from '../../editor/utils/debug';
 
 // ============================================
 // スコープタイプ定義
@@ -184,7 +185,7 @@ export async function getCSSVariables(
     const data = readDoc(key);
 
     if (!data) {
-      console.log(`[CSSVariables] No variables found for ${scope}:`, resourceId);
+      debugLog(`[CSSVariables] No variables found for ${scope}:`, resourceId);
       return null;
     }
 
@@ -240,7 +241,7 @@ export async function saveCSSVariables(
     };
 
     writeDoc(key, data);
-    console.log(`[CSSVariables] Saved variables for ${scope}:`, resourceId, 'count:', variables.length);
+    debugLog(`[CSSVariables] Saved variables for ${scope}:`, resourceId, 'count:', variables.length);
   } catch (error) {
     console.error('[CSSVariables] Error saving variables:', error);
     throw error;
@@ -298,7 +299,7 @@ export async function deleteCSSVariablesCollection(websiteId: string): Promise<v
     const key = getCSSVariablesKey(websiteId);
     const store = getStore();
     if (store) store.removeItem(key);
-    console.log('[CSSVariables] Deleted variables for website:', websiteId);
+    debugLog('[CSSVariables] Deleted variables for website:', websiteId);
   } catch (error) {
     console.error('[CSSVariables] Error deleting variables:', error);
     throw error;

package/src/lib/firebase/storage.ts

@@ -42,6 +42,7 @@ async function persistDataUrl(dataUrl: string, fileName: string): Promise<string
 }
 
 import type { PageResourceUpload } from '../../types/page';
+import { debugLog } from '../../editor/utils/debug';
 
 // ============================================
 // 内部ヘルパー
@@ -161,7 +162,7 @@ export async function uploadPageResource(
 
 // ファイル削除（ローカルではリモート実体が無いため no-op）
 export async function deletePageResource(storagePath: string): Promise<void> {
-  console.log('[storage] deletePageResource is a no-op in local mode:', storagePath);
+  debugLog('[storage] deletePageResource is a no-op in local mode:', storagePath);
 }
 
 // ファイル情報取得（ローカルではメタデータを保持しないためスタブを返す）
@@ -264,7 +265,7 @@ export async function uploadFigmaImage(
 // コンポーネントの画像ファイルを削除（ローカルでは no-op）
 export async function deleteFigmaComponentImages(componentId: string): Promise<void> {
   const basePath = `components/${componentId}/figma-images/`;
-  console.log(`[storage] deleteFigmaComponentImages is a no-op in local mode: ${basePath}`);
+  debugLog(`[storage] deleteFigmaComponentImages is a no-op in local mode: ${basePath}`);
 }
 
 // 画像ファイルサイズの推定（Base64から）

package/src/styles/skin.css

@@ -325,8 +325,12 @@
 .gg-editor-ui :is(input:not([type="color"]), textarea, select):not([data-editor-preview] *) { border-color: var(--ed-line-strong) !important; }
 
 /* ── マルチフレームのキャンバス(Figma 風) ──────────────
-   フレーム名とリングは画面座標に置く(倍率に関係なく同じ太さ・同じ文字サイズ)。
+   フレーム名とリングはオーバーレイの中で scale(1/倍率) を掛けて画面上の大きさに戻す
+   (倍率に関係なく同じ太さ・同じ文字サイズ)。
    見るだけの紙面の骨組み(スケルトン)だけは転写層の中にあるので、フレームの寸法に対する % で描く */
+/* フレームの白地だけ。枠線と階層の線は画面の座標の canvas(CanvasFrameDecor)が描く。
+   転写層の中に枠線を持たせると、倍率が変わるたびに転写層まるごとが塗り直される(実測) */
+.gg-editor-ui .ed-frame-shell { background: #fff; }
 .gg-editor-ui .ed-frame-label-row { position: absolute; left: 0; height: 20px; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
 .gg-editor-ui .ed-frame-label {
   height: 20px; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
@@ -341,9 +345,6 @@
 .gg-editor-ui .ed-frame-label-link svg { width: 12px; height: 12px; }
 .gg-editor-ui .ed-frame-label-row:hover .ed-frame-label-link, .gg-editor-ui .ed-frame-label-active + .ed-frame-label-link, .gg-editor-ui .ed-frame-label-link:focus-visible { opacity: 1; }
 .gg-editor-ui .ed-frame-label-link:hover { color: var(--ed-text); background: var(--ed-panel); box-shadow: 0 0 0 1px var(--ed-line); }
-/* 階層の線(ツリー配置)。転写層の中にあるが、線の太さは non-scaling-stroke で画面上 1.5px */
-.gg-editor-ui .ed-frame-connectors { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
-.gg-editor-ui .ed-frame-connectors path { stroke: var(--ed-line-strong); stroke-width: 1.5px; stroke-linejoin: round; }
 /* 部品(data-part)のカード。紙面の紫の選択枠と同じ色 */
 .gg-editor-ui .ed-part-card { border: 1px solid color-mix(in srgb, #7b61ff 45%, var(--ed-line)); background: color-mix(in srgb, #7b61ff 8%, var(--ed-panel)); color: var(--ed-text); }
 .gg-editor-ui .ed-part-accent { color: #7b61ff; }
@@ -360,6 +361,10 @@
 .gg-editor-ui .ed-canvas-marquee { position: absolute; z-index: 20; pointer-events: none; border: 1px solid var(--ed-accent); background: color-mix(in srgb, var(--ed-accent) 12%, transparent); }
 .gg-editor-ui .ed-frame-ring-active { box-shadow: 0 0 0 1.5px var(--ed-accent-strong); }
 .gg-editor-ui .ed-frame-ring-hover { box-shadow: 0 0 0 1px var(--ed-accent-strong); opacity: 0.55; }
+/* 縮小の途中(倍率 0.4 未満)は、画像が読めている紙面の iframe を止めて、下に敷いた画像を見せる。
+   iframe を外して(メモリを返して)しまうのは操作が止まってから ── その間もラスタは止まっている。
+   属性 1 つ(キャンバスの容器の data-canvas-preview-image)の書き換えで 26 枚がいっぺんに切り替わる */
+.gg-editor-ui [data-canvas-preview-image="1"] [data-page-preview][data-image-ready="1"] iframe { visibility: hidden; }
 .gg-editor-ui .ed-frame-skeleton { position: absolute; inset: 0; padding: 6% 8%; display: flex; flex-direction: column; gap: 3%; background: #fff; }
 .gg-editor-ui .ed-frame-skeleton-bar { display: block; height: 2.5%; min-height: 8px; border-radius: 999px; background: #eceff3; }
 .gg-editor-ui .ed-frame-skeleton-note { font-size: 40px; color: #9aa3b2; }

package/src/types/editor.ts

@@ -16,7 +16,8 @@ export type EditorTool =
   | 'text'        // T - Text tool
   | 'scale'       // K - Scale tool
   | 'eraser'      // E - Eraser (ペン/鉛筆ストロークを消す)
-  | 'shape';      // 図形ギャラリーで選んだ図形(ドラッグでサイズ指定)
+  | 'shape'       // 図形ギャラリーで選んだ図形(ドラッグでサイズ指定)
+  | 'comment';    // C - コメント(紙面をドラッグして範囲を指定。クリックで点)
 
 // Shape types that can be drawn
 export type ShapeType = 'rectangle' | 'ellipse' | 'line' | 'arrow' | 'text' | 'pen' | 'pencil' | 'frame';
@@ -101,6 +102,7 @@ export type ShortcutAction =
   | 'text'
   | 'frame'
   | 'scale'
+  | 'comment'
   // Edit operations
   | 'undo'
   | 'redo'
@@ -189,7 +191,7 @@ export interface ToolConfig {
   label: string;
   shortcut: string;
   icon: string; // Lucide icon name
-  group: 'selection' | 'shapes' | 'drawing' | 'text' | 'frame';
+  group: 'selection' | 'shapes' | 'drawing' | 'text' | 'frame' | 'comment';
 }
 
 // Default tool configurations
@@ -205,6 +207,7 @@ export const TOOL_CONFIGS: ToolConfig[] = [
   { id: 'pen', label: 'ペン', shortcut: 'P', icon: 'Pen', group: 'drawing' },
   { id: 'pencil', label: 'フリーハンド', shortcut: '⇧P', icon: 'Pencil', group: 'drawing' },
   { id: 'text', label: 'テキスト', shortcut: 'T', icon: 'Type', group: 'text' },
+  { id: 'comment', label: 'コメント（範囲を指定）', shortcut: 'C', icon: 'MessageSquare', group: 'comment' },
 ];
 
 /**
@@ -232,6 +235,7 @@ export const KEYBOARD_SHORTCUTS: Record<string, ShortcutAction> = {
   'shift+p': 'pencil',
   't': 'text',
   'f': 'frame',
+  'c': 'comment',
 
   // Edit operations (Cmd/Ctrl + key)
   'meta+z': 'undo',

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.3.1';
+export const EDITOR_VERSION = '0.4.1';