@threestarsoftware/tssgrid 0.1.30 → 0.1.31

package/CHANGELOG.md

@@ -3,6 +3,11 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.31] - 2026-10-29
+
+### 改善（プラグイン）
+- **`tss-comment` を実機タッチ対応** — これまで吹き出しは**ホバー（`mouseover`）**だけで、スマホ等のタッチ端末では合成 hover 任せ＝不安定だった。**タッチのときはタップで吹き出しをトグル**するよう分岐（同じセル再タップ・コメント外タップで閉じる）。マウスは従来どおりホバー（`pointerdown` の `pointerType` で判定）。desktop の挙動は不変。
+
 ## [0.1.30] - 2026-10-28
 
 ### 追加（プラグイン）

package/README.md

@@ -547,7 +547,7 @@ new TssGrid(el, { columns: [{ type: 'time', editor: t }] });
 
 ### 同梱プラグイン: セルのコメント（tss-comment・Excel のメモ風）
 
-`plugins/tss-comment.js`＝ セルに注釈を付ける。コメントのあるセルは**右上に赤い三角**、**ホバーで吹き出し**、**右クリック or Shift+F2 で挿入・編集・削除**。動く例: [`examples/comment.html`](https://tssgrid.threestarsoftware.co.jp/examples/comment.html)。
+`plugins/tss-comment.js`＝ セルに注釈を付ける。コメントのあるセルは**右上に赤い三角**、**PC はホバー・スマホはタップで吹き出し**、**右クリック or Shift+F2 で挿入・編集・削除**。動く例: [`examples/comment.html`](https://tssgrid.threestarsoftware.co.jp/examples/comment.html)。
 
 **★他プラグインと干渉しません**：セルのフック（`cellClass`/`cellStyle`/`editor`/`format`）を一切奪わず、コメント済みの `<td>` に自前でクラスを足すだけ（再描画追従は `MutationObserver`）。条件付き書式・heatmap・cascade/calendar と**同じセルで共存**できます。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",

package/plugins/tss-comment.js

@@ -47,7 +47,8 @@
 
     var host = grid.root || (grid.table.closest && grid.table.closest('.tssgrid')) || grid.table;
     var store = new Map();   // key(id\0dataKey) -> text
-    var bubble = null, editor = null, edCell = null, outside = null, hideT = 0, rafId = 0, dead = false;
+    var bubble = null, bubbleTd = null, editor = null, edCell = null, outside = null, hideT = 0, rafId = 0, dead = false;
+    var lastTouch = false;   // 直前の入力がタッチか。スマホはホバーが無い＝合成 mouseover に頼らず tap で出す
 
     // 初期コメント（保存済み）を取り込む
     (opts.comments || []).forEach(function (cm) {
@@ -103,9 +104,11 @@
       bubble.textContent = text;
       document.body.appendChild(bubble);
       place(bubble, td);
+      bubbleTd = td;
     }
-    function hideBubble() { if (bubble) { bubble.remove(); bubble = null; } }
+    function hideBubble() { if (bubble) { bubble.remove(); bubble = null; } bubbleTd = null; }
     function onOver(e) {
+      if (lastTouch) return;   // タッチはホバーに頼らず onTap で出す（合成 mouseover の誤発火を避ける）
       var td = e.target.closest && e.target.closest('td.tg-comment-mark');
       if (!td || !grid.table.contains(td)) return;
       if (hideT) { clearTimeout(hideT); hideT = 0; }
@@ -114,11 +117,24 @@
       if (text != null) showBubble(td, text);
     }
     function onOut(e) {
+      if (lastTouch) return;
       var td = e.target.closest && e.target.closest('td.tg-comment-mark');
       if (!td) return;
       if (e.relatedTarget && td.contains(e.relatedTarget)) return;   // セル内の移動は無視
       hideT = setTimeout(hideBubble, 60);
     }
+    // 入力種別の記録。マウス＝hover、タッチ＝tap に振り分ける（pointerdown が click の前に走る）。
+    function onPointerDown(e) { if (e.pointerType) lastTouch = (e.pointerType === 'touch'); }
+    function onTouchStart() { lastTouch = true; }   // PointerEvent 非対応ブラウザの保険
+    // タッチ時のみ: コメント済みセルのタップで吹き出しをトグル（同セル再タップ・コメント外タップで閉じる）。
+    function onTap(e) {
+      if (!lastTouch) return;   // マウスのクリックは無視＝desktop は hover のまま
+      var td = e.target.closest && e.target.closest('td.tg-comment-mark');
+      if (!td || !grid.table.contains(td)) { hideBubble(); return; }
+      if (bubble && bubbleTd === td) { hideBubble(); return; }
+      var r = +td.getAttribute('data-r'), c = +td.getAttribute('data-c'), text = getText(r, c);
+      if (text != null) showBubble(td, text);
+    }
 
     // ── 編集ポップアップ ───────────────────────────────────
     function openEditor(r, c) {
@@ -198,6 +214,9 @@
 
     grid.table.addEventListener('mouseover', onOver);
     grid.table.addEventListener('mouseout', onOut);
+    grid.table.addEventListener('pointerdown', onPointerDown, true);
+    grid.table.addEventListener('touchstart', onTouchStart, { capture: true, passive: true });
+    grid.table.addEventListener('click', onTap);
     host.addEventListener('keydown', onKey, true);
     scheduleDecorate();
 
@@ -241,6 +260,9 @@
         try { mo.disconnect(); } catch (e) { /* noop */ }
         grid.table && grid.table.removeEventListener('mouseover', onOver);
         grid.table && grid.table.removeEventListener('mouseout', onOut);
+        grid.table && grid.table.removeEventListener('pointerdown', onPointerDown, true);
+        grid.table && grid.table.removeEventListener('touchstart', onTouchStart, true);
+        grid.table && grid.table.removeEventListener('click', onTap);
         host.removeEventListener('keydown', onKey, true);
         if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; }
         hideBubble(); closeEditor();