Merge pull request #6 from CSDotNET0211/dev

Dev

Author: CSDotNET0211

package-lock.json

@@ -19,7 +19,7 @@
 		"@tauri-apps/plugin-dialog": "2.2.2",
 		"@tauri-apps/plugin-fs": "2.3.0",
 		"@tauri-apps/plugin-opener": "2.2.7",
-		"@tauri-apps/plugin-process": "^2.2.1",
+		"@tauri-apps/plugin-process": "2.2.2",
 		"@tauri-apps/plugin-shell": "2.2.1",
 		"bson": "^6.10.4",
 		"chart.js": "^4.4.9",
@@ -40,10 +40,11 @@
 		"@sveltejs/kit": "^2.19.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tauri-apps/cli": "^2",
+		"@tsconfig/svelte": "^5.0.5",
 		"@types/crypto-js": "^4.2.2",
 		"@types/sql.js": "^1.4.9",
 		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.3.3",
 		"svelte-dnd-action": "^0.9.64",
 		"typescript": "~5.6.2",
 		"vite": "^6.2.6"

package.json

@@ -5,11 +5,11 @@ import PreferencesWindow from "../../features/windows/preferences/preferencesWin
 import CanvasWindow from "../../features/windows/canvas/canvasWindow.svelte";
 
 
-export const DEFAULT_WINDOW_WIDTH = 532;
-export const DEFAULT_WINDOW_HEIGHT = 770;
+export const DEFAULT_WINDOW_WIDTH = 532 + 20;
+export const DEFAULT_WINDOW_HEIGHT = 770 + 20;
 
-export const DEFAULT_TETRIS_CANVAS_WIDTH = 310;
-export const DEFAULT_TETRIS_CANVAS_HEIGHT = 713;
+export const DEFAULT_TETRIS_CANVAS_WIDTH = 310 + 20;
+export const DEFAULT_TETRIS_CANVAS_HEIGHT = 713 + 20;
 
 export enum WindowType {
 	Field,

src/app/stores/window.ts

@@ -121,7 +121,7 @@ export function registerCommands() {
 						const uint8Array = new Uint8Array(arrayBuffer);
 
 						currentFieldIndex.set(-1);
-						await get(nodeUpdater)!.load(uint8Array, false);
+						await get(nodeUpdater)!.load(uint8Array, true);
 
 						// Set current project path
 						currentProjectPath.set(file);

src/core/commands/builtinCommands.ts

@@ -1,32 +1,204 @@
+import { get } from "svelte/store";
 import type { DatabaseNode } from "../../../../core/nodes/DatabaseNode/databaseNode";
+import { FieldDatabaseNode } from "../../../../core/nodes/DatabaseNode/fieldDatabaseNode";
+import { TextDatabaseNode } from "../../../../core/nodes/DatabaseNode/textDatabaseNode";
+import { getNodeDatabase } from "../../../../core/nodes/db";
+import { nodeUpdater } from "../../../../core/nodes/NodeUpdater/nodeUpdater";
+import { selectedNodeIds } from "../canvasStore";
+import { CANVAS_HEIGHT, CANVAS_WIDTH, GRID_SNAP_SIZE } from "../const";
+import { clamp } from "../util";
+import { close } from "../contextMenu.svelte";
 
 export class CanvasNode {
 	id: number;
 	type: string;
 	element: HTMLElement | null;
 	active: boolean;
+	isDragging: boolean;
+	dragOffsetX: number;
+	dragOffsetY: number;
 
 	constructor(id: number, type: string) {
 		this.id = id;
 		this.type = type;
 		this.element = null;
 		this.active = false;
+		this.isDragging = false;
+		this.dragOffsetX = 0;
+		this.dragOffsetY = 0;
 	}
 
 	render(DatabaseNode: DatabaseNode): void {
 		throw new Error("Method not implemented");
 	}
 
-	click(e: MouseEvent): void {
+	_pointerDown(e: MouseEvent): void {
 		throw new Error("Method not implemented");
 	}
 
-	dblClick(e: MouseEvent): void {
-		throw new Error("Method not implemented");
+	_dblClick(e: MouseEvent): void {
+		e.stopPropagation();
 	}
 
-	rightClick(e: MouseEvent): void {
-		throw new Error("Method not implemented");
+	// 共通の右クリック処理
+	protected handleRightClick(e: MouseEvent): void {
+		e.stopPropagation();
+		e.preventDefault();
+
+		// 右クリック時の選択処理
+		if (e.ctrlKey) {
+			// Ctrlキーが押されている場合は追加選択
+			const currentSelection = get(selectedNodeIds);
+			if (currentSelection.includes(this.id)) {
+				selectedNodeIds.set(currentSelection.filter(id => id !== this.id));
+			} else {
+				selectedNodeIds.set([...currentSelection, this.id]);
+			}
+		} else {
+			// Ctrlキーが押されていない場合
+			const currentSelection = get(selectedNodeIds);
+			// 既に選択されていない場合のみ、このノードのみを選択
+			if (!currentSelection.includes(this.id)) {
+				selectedNodeIds.set([this.id]);
+			}
+		}
+
+		// コンテキストメニューを開くためのイベントを発行
+		const contextMenuEvent = new CustomEvent('openNodeContextMenu', {
+			detail: {
+				x: e.clientX,
+				y: e.clientY,
+				id: this.id
+			}
+		});
+		document.dispatchEvent(contextMenuEvent);
+	}
+
+	// 共通のマウスダウン処理
+	protected handleMouseDown(e: MouseEvent): void {
+		if (e.button !== 0) return;
+		e.stopPropagation();
+
+		close();
+
+		const currentSelection = get(selectedNodeIds);
+
+		if (e.ctrlKey) {
+			if (currentSelection.includes(this.id)) {
+				selectedNodeIds.set(currentSelection.filter(id => id !== this.id));
+			} else {
+				selectedNodeIds.set([...currentSelection, this.id]);
+			}
+		} else {
+			// 既に選択されている場合は何もしない
+			if (!currentSelection.includes(this.id)) {
+				selectedNodeIds.set([this.id]);
+			}
+		}
+
+		this.isDragging = true;
+		const parent = (this.element as HTMLElement).parentElement;
+		const parentRect = parent?.getBoundingClientRect();
+		const scale =
+			parent?.style.transform?.match(/scale\(([\d.]+)\)/)?.[1]
+				? parseFloat(parent.style.transform.match(/scale\(([\d.]+)\)/)![1])
+				: 1;
+
+		// 基準点: マウスの押した位置を記録
+		this.dragOffsetX = (e.clientX - (parentRect?.left ?? 0)) / scale;
+		this.dragOffsetY = (e.clientY - (parentRect?.top ?? 0)) / scale;
+
+		document.body.style.cursor = "grabbing";
+		document.addEventListener("mousemove", this.handleDragMove);
+		document.addEventListener("mouseup", this.handleDragEnd);
+	}
+
+	// 共通のドラッグ移動処理
+	private handleDragMove = async (e: MouseEvent) => {
+		if (!this.isDragging || !this.element) return;
+		const parent = this.element.parentElement;
+		if (!parent) return;
+		const parentRect = parent.getBoundingClientRect();
+		const scale =
+			parent.style.transform?.match(/scale\(([\d.]+)\)/)?.[1]
+				? parseFloat(parent.style.transform.match(/scale\(([\d.]+)\)/)![1])
+				: 1;
+		// 現在のマウス位置を取得
+		const currentMouseX = (e.clientX - parentRect.left) / scale;
+		const currentMouseY = (e.clientY - parentRect.top) / scale;
+
+		// ドラッグ開始からの移動量を計算
+		const deltaX = currentMouseX - this.dragOffsetX;
+		const deltaY = currentMouseY - this.dragOffsetY;
+
+		// 実際に適用された移動量を記録するための変数
+		let actualDeltaX = 0;
+		let actualDeltaY = 0;
+
+		// 選択されているすべてのノードを移動
+		const selectedIds = get(selectedNodeIds);
+
+		// 選択されているノードを一括更新（異なる種類のノードも含む）
+		for (const nodeId of selectedIds) {
+			const node = getNodeDatabase(nodeId);
+			if (node && this.isMovableNode(node)) {
+				// 各ノードの元の位置
+				const oldX = node.x!;
+				const oldY = node.y!;
+
+				// 各ノードの新しい位置を計算
+				const newX = clamp(node.x! + deltaX, 0, CANVAS_WIDTH);
+				const newY = clamp(node.y! + deltaY, 0, CANVAS_HEIGHT);
+				const snappedX = Math.round(newX / GRID_SNAP_SIZE) * GRID_SNAP_SIZE;
+				const snappedY = Math.round(newY / GRID_SNAP_SIZE) * GRID_SNAP_SIZE;
+
+				// 実際の移動量を計算（最初のノードの移動量を基準にする）
+				if (actualDeltaX === 0 && actualDeltaY === 0) {
+					actualDeltaX = snappedX - oldX;
+					actualDeltaY = snappedY - oldY;
+				}
+
+				// ノードの種類に応じて適切な更新を行う
+				await this.updateNodePosition(node, nodeId, snappedX, snappedY);
+			}
+		}
+
+		// 実際に適用された移動量分だけオフセットを更新（残りの移動量は蓄積される）
+		this.dragOffsetX += actualDeltaX;
+		this.dragOffsetY += actualDeltaY;
+	};
+
+	// 共通のドラッグ終了処理
+	private handleDragEnd = (e: MouseEvent) => {
+		this.isDragging = false;
+		document.body.style.cursor = "";
+		document.removeEventListener("mousemove", this.handleDragMove);
+		document.removeEventListener("mouseup", this.handleDragEnd);
+	};
+
+	protected handleClick(e: MouseEvent): void {
+		if (e.button !== 0) return;
+		e.stopPropagation();
+
+		// Ctrlキーが押されていない場合は、このノードのみを選択
+		if (!e.ctrlKey) {
+			selectedNodeIds.set([this.id]);
+		}
+	}
+
+	// ノードが移動可能かどうかを判定
+	private isMovableNode(node: DatabaseNode): node is FieldDatabaseNode | TextDatabaseNode {
+		return node instanceof FieldDatabaseNode || node instanceof TextDatabaseNode;
+	}
+
+	// ノードタイプに応じた位置更新
+	private async updateNodePosition(node: DatabaseNode, nodeId: number, x: number, y: number): Promise<void> {
+		if (node instanceof FieldDatabaseNode) {
+			await get(nodeUpdater)!.update(new FieldDatabaseNode(nodeId, x, y, undefined, undefined));
+		} else if (node instanceof TextDatabaseNode) {
+			await get(nodeUpdater)!.update(new TextDatabaseNode(nodeId, x, y, undefined, undefined, undefined, undefined));
+		}
+		// 新しいノードタイプを追加する場合は、ここに条件を追加するだけ
 	}
 
 }