From ab86ca9ae921d7bf01442c974eac887241cada7d Mon Sep 17 00:00:00 2001
From: Shogo Fukushima <59794072+fksms@users.noreply.github.com>
Date: Thu, 25 Jul 2024 12:01:35 +0900
Subject: [PATCH] Remove node test

---
 src/components/ShowContextMenu.js        |  69 -----
 src/components/ViewBreadcrumbsList.vue   |   4 +-
 src/components/ViewDirectoryFileList.vue |   4 +-
 src/components/ViewSunburstChart.vue     | 307 ++++++++++++++++++-----
 4 files changed, 249 insertions(+), 135 deletions(-)
 delete mode 100644 src/components/ShowContextMenu.js

diff --git a/src/components/ShowContextMenu.js b/src/components/ShowContextMenu.js
deleted file mode 100644
index df22cd3..0000000
--- a/src/components/ShowContextMenu.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { invoke } from "@tauri-apps/api";
-import { listen } from "@tauri-apps/api/event";
-import { writeText } from '@tauri-apps/api/clipboard';
-
-
-// コンテキストメニューを表示する関数
-async function showContextMenu(node) {
-
-    // イベントを受信するためのリスナーを起動
-    const unlisten1 = await listen("writeToClipboard", event => {
-        // クリップボードに書き込む
-        writeToClipboard(event.payload);
-        // リスナーをまとめて停止
-        unlistenAll();
-    });
-
-    // イベントを受信するためのリスナーを起動
-    const unlisten2 = await listen("openFileManager", event => {
-        // ファイルマネージャーを開く
-        openFileManager(event.payload);
-        // リスナーをまとめて停止
-        unlistenAll();
-    });
-
-    // バックエンド側の関数を実行
-    await invoke("plugin:context_menu|show_context_menu", {
-        items: [
-            {
-                label: "Copy path",
-                disabled: false,
-                event: "writeToClipboard",
-                payload: node.data.name,
-            },
-            {
-                label: "Open",
-                disabled: false,
-                event: "openFileManager",
-                payload: (node.children) ? node.data.name : node.parent.data.name,
-            }
-        ],
-    });
-
-    // リスナーをまとめて停止
-    function unlistenAll() {
-        unlisten1();
-        unlisten2();
-    }
-}
-
-
-// ファイルマネージャーを開く関数
-async function openFileManager(path) {
-    await invoke("open_file_manager", { path: path })
-        // 失敗した場合
-        .catch((failure) => {
-            // エラーメッセージを出力
-            console.error(failure);
-        });
-}
-
-
-// クリップボードに書き込む関数
-async function writeToClipboard(path) {
-    await writeText(path);
-}
-
-
-// 外部に公開
-export { showContextMenu }
\ No newline at end of file
diff --git a/src/components/ViewBreadcrumbsList.vue b/src/components/ViewBreadcrumbsList.vue
index 9d4592b..d7fc2cf 100644
--- a/src/components/ViewBreadcrumbsList.vue
+++ b/src/components/ViewBreadcrumbsList.vue
@@ -10,9 +10,9 @@ const props = defineProps(["viewSunburstChart", "viewDirectoryFileList"]);
 const ancestors = ref([]);
 
 
-// パンくずリストを作成
+// パンくずリストを作成（入力されたノードデータのancestorsをパンくずリストにして表示）
 //
-// node: カーソルを合わせた円弧or円のデータ
+// node: ノードデータ
 function generateBreadcrumbs(node) {
 
     // 配列を初期化
diff --git a/src/components/ViewDirectoryFileList.vue b/src/components/ViewDirectoryFileList.vue
index e60bbf0..4cfb207 100644
--- a/src/components/ViewDirectoryFileList.vue
+++ b/src/components/ViewDirectoryFileList.vue
@@ -17,9 +17,9 @@ const ownSize = ref();
 const children = ref([]);
 
 
-// リストを作成
+// リストを作成（入力されたノードデータのchildrenをリストにして表示）
 //
-// node: カーソルを合わせた円弧or円のデータ
+// node: ノードデータ
 // option: オプション
 function generateDirectoryList(node, option) {
 
diff --git a/src/components/ViewSunburstChart.vue b/src/components/ViewSunburstChart.vue
index 88b67a5..2b7002f 100644
--- a/src/components/ViewSunburstChart.vue
+++ b/src/components/ViewSunburstChart.vue
@@ -1,11 +1,12 @@
 <script setup>
 
 import { ref, watch } from "vue";
+import { invoke } from "@tauri-apps/api";
+import { listen } from "@tauri-apps/api/event";
+import { writeText } from '@tauri-apps/api/clipboard';
 
 import * as d3 from "d3";
 
-import { showContextMenu } from "./ShowContextMenu";
-
 // 親から渡されたコンポーネントの参照を受け取る
 const props = defineProps(["viewDirectoryFileList", "viewBreadcrumbsList"]);
 
@@ -100,27 +101,31 @@ const arc = d3.arc()
 // returnの型は(SVGSVGElement | null)
 function generateSunburst(data) {
 
+    // カラースケールの作成
+    //
+    // scaleOrdinal: 配列の繰り返し設定を行う
+    const colorWheel = d3.scaleOrdinal().range(directoryColorCodes);
+
     // HierarchyNodeの作成
     //
     // sum: childrenの要素が0のもののサイズのみを足しこんでHierarchyNodeを作成
-    // sort: サイズを昇順でソート
+    // sort: サイズを降順でソート
     hierarchy = d3.hierarchy(data)
         .sum(d => d.children.length ? 0 : d.size)
         .sort((a, b) => b.value - a.value);
 
-    // パーティションデータの追加
+    // nodeId用カウンター
+    let count = 0;
+
+    // rootにパーティションデータを追加
+    // （幅は2π、高さは1の長方形とする。）
     //
     // (x0, y0): 左上の座標
     // (x1, y1): 右下の座標
-    d3.partition().size([2 * Math.PI, hierarchy.height + 1])(hierarchy);
-
-    // カラースケールの作成
-    //
-    // scaleOrdinal: 配列の繰り返し設定を行う
-    const colorWheel = d3.scaleOrdinal().range(directoryColorCodes);
-
-    // nodeId用カウンター
-    let count = 0;
+    hierarchy.x0 = 0;
+    hierarchy.x1 = 2 * Math.PI;
+    hierarchy.y0 = 0;
+    hierarchy.y1 = 1;
 
     // 各ノードにプロパティを追加する
     //
@@ -132,6 +137,11 @@ function generateSunburst(data) {
         d.nodeId = "M" + count;
         count++;
 
+        // childrenを持っている場合、childrenの各valueに応じて、childrenそれぞれにパーティションデータを設定する。
+        if (d.children) {
+            d3.treemapDice(d, d.x0, d.depth + 1, d.x1, d.depth + 2);
+        }
+
         // currentプロパティの追加
         d.current = {
             x0: d.x0,
@@ -303,7 +313,7 @@ function updateText(value) {
 
 // 入力されたnodeが可視化される場合はtrue、可視化されない場合はfalseを返す。
 //
-// node: クリックされた円弧or円のデータ
+// node: ノードデータ
 function visualize(node) {
     return node.target.y0 > 0 && node.target.y0 <= visibleDepth && node.target.x1 > node.target.x0;
 }
@@ -311,7 +321,7 @@ function visualize(node) {
 
 // Arcを更新
 //
-// node: クリックされた円弧or円のデータ
+// node: ノードデータ
 // isFirstCalled: 初めて呼ばれたか否か
 function updateArc(node, isFirstCalled) {
 
@@ -480,6 +490,54 @@ function updateArc(node, isFirstCalled) {
 }
 
 
+// Sunburstの更新
+//
+// node: ノードデータ
+function updateSunburst(node) {
+
+    // "path", "text"の要素を全て削除
+    svgElement.selectAll("path").remove();
+    svgElement.selectAll("text").remove();
+
+    // Arcを更新
+    updateArc(node, false);
+
+    // Textを更新（中心のファイルサイズ）
+    updateText(node.value);
+
+    // 変更を反映させる
+    svgElement.enter();
+
+    // main-arcのアニメーション
+    svgElement.selectAll("path.main-arc")
+        .transition()
+        .duration(transitionDuration)
+        .tween("scale", d => {
+            const i = d3.interpolate(d.current, d.target);
+            return t => d.current = i(t);
+        })
+        .attrTween("d", d => () => arc(d.current));
+
+    // squashed-arcのアニメーション
+    svgElement.selectAll("path.squashed-arc")
+        .attr("fill-opacity", 0);
+    svgElement.selectAll("path.squashed-arc")
+        .transition()
+        .duration(transitionDuration)
+        .ease(d3.easeExpIn)
+        .attr("fill-opacity", 1);
+
+    // textのアニメーション
+    svgElement.selectAll("text")
+        .attr("fill-opacity", 0);
+    svgElement.selectAll("text")
+        .transition()
+        .duration(transitionDuration)
+        .ease(d3.easeExpIn)
+        .attr("fill-opacity", 1);
+}
+
+
 // リスト更新用タイマーID
 let timerId = null;
 
@@ -490,7 +548,7 @@ const transitionName = "blink"
 // カーソルを合わせた時の動作
 //
 // event: イベントハンドラー（List側から呼び出された場合、イベントハンドラーは無効となる）
-// node: カーソルを合わせた円弧or円のデータ
+// node: ノードデータ
 // option: オプション
 function mouseEntered(event, node, option) {
 
@@ -535,7 +593,7 @@ function mouseEntered(event, node, option) {
 // カーソルを離した時の動作
 //
 // event: イベントハンドラー（List側から呼び出された場合、イベントハンドラーは無効となる）
-// node: カーソルを合わせた円弧or円のデータ
+// node: ノードデータ
 function mouseLeaved(event, node) {
 
     // 円弧or円のパスを格納
@@ -563,7 +621,7 @@ function mouseLeaved(event, node) {
 
 // 左クリックされた時の動作
 //
-// node: クリックされた円弧or円のデータ
+// node: ノードデータ
 function leftClicked(node) {
 
     // 自身がnullの場合はリターンして何もしない（parentがnullの時にクリックされた時）
@@ -575,61 +633,26 @@ function leftClicked(node) {
     // リスト更新用タイマーをキャンセル
     clearTimeout(timerId);
 
+    // circleのデータを更新
+    svgElement.select("circle")
+        .datum(node)
+        // IDを設定
+        .attr("id", node.nodeId);
+
     // Listの更新
     updateList(node, null);
 
     // Breadcrumbsの更新
     updateBreadcrumbs(node);
 
-    // circleのデータを更新
-    svgElement.select("circle").datum(node);
-
-    // "path", "text"の要素を全て削除
-    svgElement.selectAll("path").remove();
-    svgElement.selectAll("text").remove();
-
-    // Arcを更新
-    updateArc(node, false);
-
-    // Textを更新（中心のファイルサイズ）
-    updateText(node.value);
-
-    // 変更を反映させる
-    svgElement.enter();
-
-    // main-arcのアニメーション
-    svgElement.selectAll("path.main-arc")
-        .transition()
-        .duration(transitionDuration)
-        .tween("scale", d => {
-            const i = d3.interpolate(d.current, d.target);
-            return t => d.current = i(t);
-        })
-        .attrTween("d", d => () => arc(d.current));
-
-    // squashed-arcのアニメーション
-    svgElement.selectAll("path.squashed-arc")
-        .attr("fill-opacity", 0);
-    svgElement.selectAll("path.squashed-arc")
-        .transition()
-        .duration(transitionDuration)
-        .ease(d3.easeExpIn)
-        .attr("fill-opacity", 1);
-
-    // textのアニメーション
-    svgElement.selectAll("text")
-        .attr("fill-opacity", 0);
-    svgElement.selectAll("text")
-        .transition()
-        .duration(transitionDuration)
-        .ease(d3.easeExpIn)
-        .attr("fill-opacity", 1);
+    // Sunburstの更新
+    updateSunburst(node);
 }
 
 
 // 右クリックされた時の動作
 //
-// node: クリックされた円弧or円のデータ
+// node: ノードデータ
 function rightClicked(node) {
 
     // 自身がnullの場合はリターンして何もしない（parentがnullの時にクリックされた時）
@@ -640,6 +663,85 @@ function rightClicked(node) {
 }
 
 
+// Nodeを削除
+//
+// node: ノードデータ
+function removeNode(node) {
+
+    // 削除対象のノードのサイズ・ID・親ノードを保持
+    const removedNodeSize = node.value;
+    const removedNodeId = node.nodeId;
+    const removedNodeParent = node.parent;
+
+    // 中心のノードを保持
+    let centerNode = null;
+
+    // nodeがnullになるまで繰り返し（上方向に走査）
+    while (node != null) {
+        // targetのy0が0、y1が1の時に中心となる（必ず存在する）
+        if (node.target.y0 == 0 && node.target.y1 == 1) {
+            centerNode = node;
+        }
+
+        // 減算
+        node.value = node.value - removedNodeSize;
+        node.data.size = node.data.size - removedNodeSize;
+
+        // childrenを持っている場合、降順で再ソート
+        if (node.children) {
+            node.children.sort((a, b) => b.value - a.value);
+        }
+
+        // 親に移動
+        node = node.parent;
+    }
+
+    // 一旦親ノードに移動してから、該当の子ノードを消去する（横方向に走査）
+    for (let i = 0; i < removedNodeParent.children.length; i++) {
+        // 消去対象のノードIDと一致するかを確認
+        if (removedNodeParent.children[i].nodeId == removedNodeId) {
+            removedNodeParent.children.splice(i, 1);
+            break;
+        }
+    }
+
+    // 各ノードのプロパティ（x0, x1, y0, y1）を更新する
+    //
+    // each: ノードを幅優先で呼び出す
+    hierarchy.each(d => {
+        // childrenを持っている場合、childrenの各valueに応じて、childrenそれぞれにパーティションデータを設定する。
+        if (d.children) {
+            d3.treemapDice(d, d.x0, d.depth + 1, d.x1, d.depth + 2);
+        }
+    });
+
+    // 中心のノードを削除した場合
+    if (removedNodeId == centerNode.nodeId) {
+        // 親ノードを設定
+        node = centerNode.parent;
+
+        // circleのデータも更新する
+        svgElement.select("circle")
+            .datum(node)
+            // IDを設定
+            .attr("id", node.nodeId);
+    }
+    // それ以外は中心のノードを維持
+    else {
+        node = centerNode;
+    }
+
+    // Listの更新
+    updateList(removedNodeParent, null);
+
+    // Breadcrumbsの更新
+    updateBreadcrumbs(node);
+
+    // Sunburstの更新
+    updateSunburst(node);
+}
+
+
 // Listの更新
 //
 // node: ノードデータ
@@ -657,6 +759,87 @@ function updateBreadcrumbs(node) {
 }
 
 
+// コンテキストメニューを表示する関数
+async function showContextMenu(node) {
+
+    // イベントを受信するためのリスナーを起動
+    const unlisten1 = await listen("writeToClipboard", event => {
+        // クリップボードに書き込む
+        writeToClipboard(event.payload);
+        // リスナーをまとめて停止
+        unlistenAll();
+    });
+
+    // イベントを受信するためのリスナーを起動
+    const unlisten2 = await listen("openFileManager", event => {
+        // ファイルマネージャーを開く
+        openFileManager(event.payload);
+        // リスナーをまとめて停止
+        unlistenAll();
+    });
+
+    // イベントを受信するためのリスナーを起動
+    const unlisten3 = await listen("removeFileOrDirectory", event => {
+        // ファイル or ディレクトリを削除する
+        removeFileOrDirectory(event.payload);
+        // リスナーをまとめて停止
+        unlistenAll();
+    });
+
+    // バックエンド側の関数を実行
+    await invoke("plugin:context_menu|show_context_menu", {
+        items: [
+            {
+                label: "Copy path",
+                disabled: false,
+                event: "writeToClipboard",
+                payload: node.data.name,
+            },
+            {
+                label: "Open",
+                disabled: false,
+                event: "openFileManager",
+                payload: (node.children) ? node.data.name : node.parent.data.name,
+            },
+            {
+                label: "Remove",
+                disabled: false,
+                event: "removeFileOrDirectory",
+                payload: node.data.name,
+            },
+        ],
+    });
+
+    // リスナーをまとめて停止
+    function unlistenAll() {
+        unlisten1();
+        unlisten2();
+        unlisten3();
+    }
+
+    // ファイルマネージャーを開く関数
+    async function openFileManager(path) {
+        await invoke("open_file_manager", { path: path })
+            // 失敗した場合
+            .catch((failure) => {
+                // エラーメッセージを出力
+                console.error(failure);
+            });
+    }
+
+    // クリップボードに書き込む関数
+    async function writeToClipboard(path) {
+        await writeText(path);
+    }
+
+    // ファイル or ディレクトリを削除する関数
+    async function removeFileOrDirectory(path) {
+        /* ファイル削除用関数 */
+        removeNode(node);
+    }
+}
+
+
 // 外部から参照可能なプロパティを定義
 defineExpose({
     generateSunburst,