@growgroup/visual-editor 0.3.0 → 0.4.0

package/src/editor/utils/drop-target.ts

@@ -0,0 +1,135 @@
+/**
+ * 部品をキャンバスへドラッグしているときの「どこに入るか」の判定と、その印。
+ *
+ * 【なぜ別ファイルか】
+ * 挿入位置の計算(parts.ts の insertIntoFlow)と、ドラッグ中に見せる印は
+ * 必ず同じ答えでなければならない。別々に書くと「印の場所と違うところに入る」
+ * という一番たちの悪いズレ方をするので、計算は 1 つにして両方から呼ぶ。
+ */
+
+/** ドラッグ中の印につけるクラス(この名前で探して消す) */
+export const PART_DROP_INDICATOR_CLASS = 'gg-part-drop-indicator';
+
+/**
+ * 印に付けるクラス。
+ * `selection-box` を併記しているのは、保存時のサニタイズ(html-utils の
+ * getCleanHtml)と履歴の除外(EditorHistoryContext の EDITOR_CHROME_SELECTOR)が
+ * どちらも `.selection-box` を見ているため。既存の除外機構にそのまま乗せることで、
+ * 印が保存 HTML や Undo 履歴に混ざるのを防ぐ。
+ * (同じ手は dom-utils の群バウンディングボックスでも使っている)
+ */
+const INDICATOR_CLASS = `selection-box ${PART_DROP_INDICATOR_CLASS}`;
+
+/** 紙面の中身ではなく、エディタが差し込んでいる表示専用のノード */
+const EDITOR_CHROME =
+  '.selection-box,.marquee-selection-box,.gg-comment-layer,.gg-crop-ui,' +
+  '#gg-measure-layer,#gg-smart-guides,.flex-drop-indicator,.nesting-drop-indicator,' +
+  '.auto-layout-drop-indicator,.drag-ghost';
+
+/** 挿入先。before が null なら parent の末尾 */
+export interface FlowInsertion {
+  parent: Element;
+  before: Element | null;
+}
+
+/**
+ * 「セクションの器」か。この直下に部品を並べる。
+ * 器 = body / #artboard / [data-wf-body] / main
+ */
+function isContainer(doc: Document, node: Element | null): node is Element {
+  return (
+    !!node &&
+    (node === doc.body ||
+      node.id === 'artboard' ||
+      node.hasAttribute('data-wf-body') ||
+      node.tagName === 'MAIN')
+  );
+}
+
+/** 器が見つからないときの落とし先 */
+function fallbackContainer(doc: Document): Element {
+  return (
+    doc.querySelector('main') ??
+    doc.querySelector('[data-wf-body]') ??
+    doc.getElementById('artboard') ??
+    doc.body
+  );
+}
+
+/** 部品を並べる相手になる子要素(表示専用のノードと高さ 0 のものは外す) */
+function placeableChildren(parent: Element): Element[] {
+  return Array.from(parent.children).filter((el) => {
+    if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.tagName === 'LINK') return false;
+    if (el.matches(EDITOR_CHROME)) return false;
+    return el.getBoundingClientRect().height > 0;
+  });
+}
+
+/**
+ * iframe 内の座標 (x, y) に部品を落としたとき、どこに入るかを返す。
+ *
+ * 【なぜ elementsFromPoint で一番深い器を探すか】
+ * 以前は「当たった要素から器の直下の祖先まで上る」方式だった。これだと
+ * セクションとセクションの隙間(= main の地の部分)に落としたとき、上る先が
+ * main ではなく main を包む div になり、部品がページの先頭か末尾に飛んでいた
+ * (実測: キャンバス表示で紙面の中ほどに落として先頭に入った)。
+ * 重なり順を全部見て「一番内側の器」を親に決めれば、隙間に落としても
+ * そのセクションの列に入る。
+ */
+export function findFlowInsertion(doc: Document, x: number, y: number): FlowInsertion {
+  const stack = (doc.elementsFromPoint(x, y) as Element[]) ?? [];
+  const parent = stack.find((el) => isContainer(doc, el)) ?? fallbackContainer(doc);
+
+  // 親の子を上から見て、ドロップ位置より下に中心がある最初の子の前に入れる。
+  // 中心で区切るので「つかんでいる位置のすぐ上か、すぐ下か」が見立てと合う
+  const kids = placeableChildren(parent);
+  const before = kids.find((el) => {
+    const r = el.getBoundingClientRect();
+    return y < r.top + r.height / 2;
+  });
+  return { parent, before: before ?? null };
+}
+
+/** 既にある印を消す */
+export function clearPartDropIndicator(doc: Document | null | undefined): void {
+  if (!doc) return;
+  doc.querySelectorAll(`.${PART_DROP_INDICATOR_CLASS}`).forEach((el) => el.remove());
+}
+
+/**
+ * 挿入位置に横棒を出す。
+ * 紙面(iframe)の中に置くので、キャンバス表示で外側の transform に
+ * 縮められていても紙面と一緒に縮み、位置がずれない。
+ */
+export function showPartDropIndicator(doc: Document, x: number, y: number): FlowInsertion {
+  // 前回の印を先に消す。残したまま座標判定をすると印そのものに当たる
+  clearPartDropIndicator(doc);
+
+  const target = findFlowInsertion(doc, x, y);
+  const kids = placeableChildren(target.parent);
+  // before があればその上辺、無ければ最後の子の下辺。子が無ければ親の内側の上辺
+  const ref = target.before ?? kids[kids.length - 1] ?? target.parent;
+  const atTop = !!target.before || ref === target.parent;
+  const rect = ref.getBoundingClientRect();
+
+  const view = doc.defaultView;
+  const scrollX = view?.scrollX ?? 0;
+  const scrollY = view?.scrollY ?? 0;
+
+  const bar = doc.createElement('div');
+  bar.className = INDICATOR_CLASS;
+  // .selection-box が position:absolute / pointer-events:none / z-index:10000 を
+  // 既に持っているので、ここでは見た目と位置だけ足す
+  bar.style.cssText = [
+    `left: ${rect.left + scrollX}px`,
+    `top: ${(atTop ? rect.top : rect.bottom) + scrollY - 2}px`,
+    `width: ${Math.max(rect.width, 24)}px`,
+    'height: 4px',
+    'background: #0d99ff',
+    'border-radius: 2px',
+    'box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 0 8px rgba(13,153,255,0.6)',
+  ].join(';');
+
+  doc.body.appendChild(bar);
+  return target;
+}

package/src/editor/utils/eyedropper.ts

@@ -10,6 +10,8 @@
  * (押せるのに何も起きないボタンを置かない)。
  */
 
+import { debugLog } from './debug';
+
 /** この環境でスポイトが使えるか */
 export function isEyeDropperSupported(): boolean {
   return typeof window !== 'undefined' && 'EyeDropper' in window;
@@ -29,7 +31,7 @@ export async function pickScreenColor(): Promise<string | null> {
     return result?.sRGBHex || null;
   } catch (e) {
     // Escでの取り消しもここに来るので、握りつぶしてよい
-    console.log('EyeDropper canceled or failed', e);
+    debugLog('EyeDropper canceled or failed', e);
     return null;
   }
 }

package/src/editor/utils/figma-export.ts

@@ -7,6 +7,7 @@
 
 import { readHTMLMessage, writeHTMLMessage } from 'fig-kiwi';
 import type { Schema } from 'kiwi-schema';
+import { debugLog } from './debug';
 
 /**
  * Cached schema from Figma paste (proper kiwi-schema Schema type)
@@ -18,7 +19,7 @@ let cachedFigKiwiSchema: Schema | null = null;
  */
 export function cacheFigKiwiSchema(schema: Schema): void {
   cachedFigKiwiSchema = schema;
-  console.log('[figma-export] Cached fig-kiwi schema with', schema.definitions.length, 'definitions');
+  debugLog('[figma-export] Cached fig-kiwi schema with', schema.definitions.length, 'definitions');
 }
 
 /**
@@ -505,8 +506,8 @@ export async function copyElementsToFigma(elements: HTMLElement[]): Promise<{
       allNodes.push(...nodes);
     }
 
-    console.log('[figma-export] Converted', allNodes.length, 'nodes');
-    console.log('[figma-export] First node:', JSON.stringify(allNodes[0], null, 2));
+    debugLog('[figma-export] Converted', allNodes.length, 'nodes');
+    debugLog('[figma-export] First node:', JSON.stringify(allNodes[0], null, 2));
 
     // Create message using fig-kiwi's expected format
     const message = {
@@ -527,7 +528,7 @@ export async function copyElementsToFigma(elements: HTMLElement[]): Promise<{
       message: message as any, // Type assertion needed due to fig-kiwi's strict types
     });
 
-    console.log('[figma-export] Generated clipboard HTML length:', clipboardHtml.length);
+    debugLog('[figma-export] Generated clipboard HTML length:', clipboardHtml.length);
 
     // Copy to clipboard
     await navigator.clipboard.write([
@@ -537,7 +538,7 @@ export async function copyElementsToFigma(elements: HTMLElement[]): Promise<{
       }),
     ]);
 
-    console.log('[figma-export] Copied to clipboard successfully');
+    debugLog('[figma-export] Copied to clipboard successfully');
 
     return {
       success: true,

package/src/editor/utils/figma-kiwi-decoder.ts

@@ -7,6 +7,7 @@
 
 import * as pako from 'pako';
 import { cacheSchema } from './figma-kiwi-encoder';
+import { debugLog } from './debug';
 
 // Extended types array
 const EXTENDED_TYPES = [
@@ -196,7 +197,7 @@ function customDecodeBinarySchema(buffer: Uint8Array, types: string[]): Schema {
   const definitionCount = bb.readVarUint();
   const definitions: Definition[] = [];
 
-  console.log('[figma-kiwi-decoder] Custom decode: definition count =', definitionCount);
+  debugLog('[figma-kiwi-decoder] Custom decode: definition count =', definitionCount);
 
   // Read in the schema
   for (let i = 0; i < definitionCount; i++) {
@@ -281,7 +282,7 @@ function parseArchive(buffer: Uint8Array): { schema: Uint8Array; data: Uint8Arra
   // Read version (4 bytes, little endian)
   const view = new DataView(buffer.buffer, buffer.byteOffset);
   const version = view.getUint32(offset, true);
-  console.log('[figma-kiwi-decoder] Archive version:', version);
+  debugLog('[figma-kiwi-decoder] Archive version:', version);
   offset += 4;
 
   const files: Uint8Array[] = [];
@@ -330,7 +331,7 @@ export function parseFigmaClipboardToJson(html: string): FigmaClipboardData {
     throw new Error('Figma metadata not found');
   }
   const meta = JSON.parse(atob(metaMatch[1]));
-  console.log('[figma-kiwi-decoder] Meta:', meta);
+  debugLog('[figma-kiwi-decoder] Meta:', meta);
 
   // Extract binary data
   const dataMatch = html.match(/\(figma\)([A-Za-z0-9+/=]+)\(\/figma\)/);
@@ -344,22 +345,22 @@ export function parseFigmaClipboardToJson(html: string): FigmaClipboardData {
   for (let i = 0; i < binaryString.length; i++) {
     bytes[i] = binaryString.charCodeAt(i);
   }
-  console.log('[figma-kiwi-decoder] Binary data size:', bytes.length);
+  debugLog('[figma-kiwi-decoder] Binary data size:', bytes.length);
 
   // Parse archive
   const archive = parseArchive(bytes);
-  console.log('[figma-kiwi-decoder] Schema chunk size:', archive.schema.length);
-  console.log('[figma-kiwi-decoder] Data chunk size:', archive.data.length);
+  debugLog('[figma-kiwi-decoder] Schema chunk size:', archive.schema.length);
+  debugLog('[figma-kiwi-decoder] Data chunk size:', archive.data.length);
 
   // Decompress schema and data
   const schemaDecompressed = pako.inflateRaw(archive.schema);
   const dataDecompressed = pako.inflateRaw(archive.data);
-  console.log('[figma-kiwi-decoder] Schema decompressed size:', schemaDecompressed.length);
-  console.log('[figma-kiwi-decoder] Data decompressed size:', dataDecompressed.length);
+  debugLog('[figma-kiwi-decoder] Schema decompressed size:', schemaDecompressed.length);
+  debugLog('[figma-kiwi-decoder] Data decompressed size:', dataDecompressed.length);
 
   // Decode schema with extended types
   const schema = customDecodeBinarySchema(schemaDecompressed, EXTENDED_TYPES);
-  console.log('[figma-kiwi-decoder] Schema definitions:', schema.definitions.length);
+  debugLog('[figma-kiwi-decoder] Schema definitions:', schema.definitions.length);
 
   // Cache schema for later use in encoding (Figma export)
   cacheSchema(schema, archive.schema);
@@ -367,8 +368,8 @@ export function parseFigmaClipboardToJson(html: string): FigmaClipboardData {
   // Export raw schema for bundling (one-time capture)
   if (typeof window !== 'undefined') {
     const schemaBase64 = btoa(String.fromCharCode(...archive.schema));
-    console.log('[figma-kiwi-decoder] RAW SCHEMA BASE64 (copy this for bundling):');
-    console.log(schemaBase64);
+    debugLog('[figma-kiwi-decoder] RAW SCHEMA BASE64 (copy this for bundling):');
+    debugLog(schemaBase64);
   }
 
   // Find Message definition
@@ -376,18 +377,18 @@ export function parseFigmaClipboardToJson(html: string): FigmaClipboardData {
   if (messageDefIndex === -1) {
     throw new Error('Message definition not found in schema');
   }
-  console.log('[figma-kiwi-decoder] Message definition found at index:', messageDefIndex);
+  debugLog('[figma-kiwi-decoder] Message definition found at index:', messageDefIndex);
 
   // Find and log NodeChange definition to see available fields
   const nodeChangeDef = schema.definitions.find(d => d.name === 'NodeChange');
   if (nodeChangeDef) {
-    console.log('[figma-kiwi-decoder] NodeChange fields:',
+    debugLog('[figma-kiwi-decoder] NodeChange fields:',
       nodeChangeDef.fields.map(f => `${f.name}(${f.value})`).join(', '));
     // Look for parent-related fields
     const parentFields = nodeChangeDef.fields.filter(f =>
       f.name.toLowerCase().includes('parent') || f.name.toLowerCase().includes('index'));
     if (parentFields.length > 0) {
-      console.log('[figma-kiwi-decoder] Parent-related fields:', parentFields.map(f => f.name));
+      debugLog('[figma-kiwi-decoder] Parent-related fields:', parentFields.map(f => f.name));
     }
   }
 
@@ -395,19 +396,19 @@ export function parseFigmaClipboardToJson(html: string): FigmaClipboardData {
   const paintDefs = schema.definitions.filter(d =>
     d.name.toLowerCase().includes('paint') || d.name.toLowerCase().includes('image'));
   for (const def of paintDefs) {
-    console.log(`[figma-kiwi-decoder] ${def.name} (${def.kind}): ${def.fields.map(f => `${f.name}:${f.type}(${f.value})`).join(', ')}`);
+    debugLog(`[figma-kiwi-decoder] ${def.name} (${def.kind}): ${def.fields.map(f => `${f.name}:${f.type}(${f.value})`).join(', ')}`);
   }
 
   // Log PaintType enum if it exists
   const paintTypeEnum = schema.definitions.find(d => d.name === 'PaintType');
   if (paintTypeEnum) {
-    console.log('[figma-kiwi-decoder] PaintType enum values:', paintTypeEnum.fields.map(f => `${f.name}=${f.value}`).join(', '));
+    debugLog('[figma-kiwi-decoder] PaintType enum values:', paintTypeEnum.fields.map(f => `${f.name}=${f.value}`).join(', '));
   }
 
   // Compile schema and decode message using our custom implementation
   const message = decodeMessage(dataDecompressed, schema);
 
-  console.log('[figma-kiwi-decoder] Message decoded, type:', message.type);
+  debugLog('[figma-kiwi-decoder] Message decoded, type:', message.type);
 
   return { meta, message, schema };
 }
@@ -668,44 +669,44 @@ export function extractNodes(message: Record<string, unknown>): FigmaNode[] {
   // Try to extract node changes from message
   const nodeChanges = message.nodeChanges as unknown[];
   if (Array.isArray(nodeChanges)) {
-    console.log('[figma-kiwi-decoder] === NODE CHANGES DEBUG ===');
+    debugLog('[figma-kiwi-decoder] === NODE CHANGES DEBUG ===');
     for (let i = 0; i < nodeChanges.length; i++) {
       const change = nodeChanges[i];
       if (change && typeof change === 'object') {
         const nodeObj = change as Record<string, unknown>;
         // Log all keys to see what fields are available
-        console.log(`[figma-kiwi-decoder] Node ${i}: ${nodeObj.type} "${nodeObj.name}"`);
-        console.log(`[figma-kiwi-decoder]   Keys: ${Object.keys(nodeObj).join(', ')}`);
+        debugLog(`[figma-kiwi-decoder] Node ${i}: ${nodeObj.type} "${nodeObj.name}"`);
+        debugLog(`[figma-kiwi-decoder]   Keys: ${Object.keys(nodeObj).join(', ')}`);
         // Look for parent-related fields - parentIndex has nested guid structure
         if ('parentIndex' in nodeObj && nodeObj.parentIndex) {
           const pi = nodeObj.parentIndex as { guid?: { sessionID?: number; localID?: number } };
           if (pi.guid) {
-            console.log(`[figma-kiwi-decoder]   parentIndex.guid: ${pi.guid.sessionID}:${pi.guid.localID}`);
+            debugLog(`[figma-kiwi-decoder]   parentIndex.guid: ${pi.guid.sessionID}:${pi.guid.localID}`);
           }
         }
         if ('guid' in nodeObj && nodeObj.guid) {
           const g = nodeObj.guid as { sessionID?: number; localID?: number };
-          console.log(`[figma-kiwi-decoder]   guid: ${g.sessionID}:${g.localID}`);
+          debugLog(`[figma-kiwi-decoder]   guid: ${g.sessionID}:${g.localID}`);
         }
         // Log auto-layout properties if present
         if ('stackMode' in nodeObj) {
-          console.log(`[figma-kiwi-decoder]   auto-layout: mode=${nodeObj.stackMode} spacing=${nodeObj.stackSpacing} padding=${nodeObj.stackPadding}`);
+          debugLog(`[figma-kiwi-decoder]   auto-layout: mode=${nodeObj.stackMode} spacing=${nodeObj.stackSpacing} padding=${nodeObj.stackPadding}`);
         }
         // Log text properties if present
         if ('textAlignHorizontal' in nodeObj || 'lineHeight' in nodeObj) {
           const lh = nodeObj.lineHeight as { value?: number; units?: string } | undefined;
           const ls = nodeObj.letterSpacing as { value?: number; units?: string } | undefined;
-          console.log(`[figma-kiwi-decoder]   text: align=${nodeObj.textAlignHorizontal} lineHeight=${lh?.value}${lh?.units} letterSpacing=${ls?.value}${ls?.units}`);
+          debugLog(`[figma-kiwi-decoder]   text: align=${nodeObj.textAlignHorizontal} lineHeight=${lh?.value}${lh?.units} letterSpacing=${ls?.value}${ls?.units}`);
         }
         // Log fill paints details for debugging image detection
         if ('fillPaints' in nodeObj && Array.isArray(nodeObj.fillPaints)) {
           for (let j = 0; j < nodeObj.fillPaints.length; j++) {
             const paint = nodeObj.fillPaints[j] as Record<string, unknown>;
             const paintKeys = Object.keys(paint);
-            console.log(`[figma-kiwi-decoder]   fillPaint[${j}]: type=${paint.type} keys=[${paintKeys.join(', ')}]`);
+            debugLog(`[figma-kiwi-decoder]   fillPaint[${j}]: type=${paint.type} keys=[${paintKeys.join(', ')}]`);
             // Log all values for IMAGE type or unknown types
             if (paint.type === 'IMAGE' || paintKeys.includes('imageHash') || paintKeys.includes('imageRef')) {
-              console.log(`[figma-kiwi-decoder]   IMAGE paint detail:`, JSON.stringify(paint, (_, v) => {
+              debugLog(`[figma-kiwi-decoder]   IMAGE paint detail:`, JSON.stringify(paint, (_, v) => {
                 if (v instanceof Uint8Array) return `<Uint8Array(${v.length})>`;
                 return v;
               }, 2).substring(0, 500));
@@ -715,7 +716,7 @@ export function extractNodes(message: Record<string, unknown>): FigmaNode[] {
         nodes.push(nodeObj as FigmaNode);
       }
     }
-    console.log('[figma-kiwi-decoder] === END NODE CHANGES DEBUG ===');
+    debugLog('[figma-kiwi-decoder] === END NODE CHANGES DEBUG ===');
   }
 
   return nodes;

package/src/editor/utils/figma-kiwi-encoder.ts

@@ -6,6 +6,7 @@
  */
 
 import * as pako from 'pako';
+import { debugLog } from './debug';
 
 /**
  * WriteBuffer for encoding binary data in kiwi format
@@ -193,7 +194,7 @@ export function cacheSchema(schema: Schema, rawSchemaBytes?: Uint8Array): void {
   if (rawSchemaBytes) {
     cachedSchemaRaw = rawSchemaBytes;
   }
-  console.log('[figma-kiwi-encoder] Schema cached with', schema.definitions.length, 'definitions');
+  debugLog('[figma-kiwi-encoder] Schema cached with', schema.definitions.length, 'definitions');
 }
 
 /**
@@ -402,7 +403,7 @@ export function encodeMessage(
     nodeChanges: nodeChanges,
   };
 
-  console.log('[figma-kiwi-encoder] Message:', { type: 'NODE_CHANGES', sessionID, pasteID, nodeChangesCount: nodeChanges.length });
+  debugLog('[figma-kiwi-encoder] Message:', { type: 'NODE_CHANGES', sessionID, pasteID, nodeChangesCount: nodeChanges.length });
 
   // Encode the message
   encodeStruct(bb, message, messageDef, defMap);
@@ -537,28 +538,28 @@ export function generateFigmaClipboardHtml(
 
   // Encode message
   const messageData = encodeMessage(nodeChanges, schemaToUse);
-  console.log('[figma-kiwi-encoder] Encoded message size:', messageData.length);
+  debugLog('[figma-kiwi-encoder] Encoded message size:', messageData.length);
 
   // Compress data
   const dataCompressed = pako.deflateRaw(messageData);
-  console.log('[figma-kiwi-encoder] Compressed data size:', dataCompressed.length);
+  debugLog('[figma-kiwi-encoder] Compressed data size:', dataCompressed.length);
 
   // Get or encode schema
   let schemaCompressed: Uint8Array;
   if (cachedSchemaRaw) {
     // Re-use cached raw schema (already in correct format)
     schemaCompressed = cachedSchemaRaw;
-    console.log('[figma-kiwi-encoder] Using cached schema bytes');
+    debugLog('[figma-kiwi-encoder] Using cached schema bytes');
   } else {
     // Encode schema
     const schemaData = encodeBinarySchema(schemaToUse);
     schemaCompressed = pako.deflateRaw(schemaData);
-    console.log('[figma-kiwi-encoder] Encoded schema size:', schemaCompressed.length);
+    debugLog('[figma-kiwi-encoder] Encoded schema size:', schemaCompressed.length);
   }
 
   // Create archive
   const archive = createArchive(schemaCompressed, dataCompressed);
-  console.log('[figma-kiwi-encoder] Archive size:', archive.length);
+  debugLog('[figma-kiwi-encoder] Archive size:', archive.length);
 
   // Encode to base64
   const binaryString = Array.from(archive).map(b => String.fromCharCode(b)).join('');
@@ -578,6 +579,6 @@ export function generateFigmaClipboardHtml(
     : '';
   const html = `<meta charset="utf-8"><span data-metadata="<!--(figmeta)${base64Meta}(/figmeta)-->"></span><span data-buffer="<!--(figma)${base64Data}(/figma)-->"></span>${previewSpan}`;
 
-  console.log('[figma-kiwi-encoder] Generated clipboard HTML length:', html.length);
+  debugLog('[figma-kiwi-encoder] Generated clipboard HTML length:', html.length);
   return html;
 }