Skip to content

Commit

Permalink
Merge pull request #16 from CaseyNelson314/リファクタリング
Browse files Browse the repository at this point in the history 
リファクタリング
  • Loading branch information
@CaseyNelson314
CaseyNelson314 authored Jan 28, 2024
2 parents 59d147b + d7d2ade commit 1bb2bfa
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 65 deletions.
34 changes: 13 additions & 21 deletions app/script/dragger.ts
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
import { Charge } from './charge.js';


// 点電荷をドラッグして移動させるクラス
export class Dragger {

private transControls: TransformControls;
private pointCharges: Charge[];
private pointCharges: THREE.Object3D[];
private camera: THREE.PerspectiveCamera;
private dom: HTMLElement;
private scene: THREE.Scene;
private ray: THREE.Raycaster;
private pointer: THREE.Vector2;
private listeners: { type: string, listener: Function }[];
private selected: Charge | null;
private selected: THREE.Object3D | null;

private onDownPosition: THREE.Vector2;
private onUpPosition: THREE.Vector2;

constructor(
pointCharges: Charge[],
pointCharges: THREE.Object3D[],
camera: THREE.PerspectiveCamera,
dom: HTMLElement,
controls: OrbitControls,
Expand Down Expand Up @@ -65,7 +66,7 @@ export class Dragger {

if (intersects.length > 0) {

const object = intersects[0]!.object as Charge;
const object = intersects[0]!.object as THREE.Object3D;

if (object !== this.transControls.object) {

Expand Down Expand Up @@ -131,27 +132,18 @@ export class Dragger {
return this.selected;
}

attach = (object: Charge) => {
attach = (object: THREE.Object3D) => {
this.transControls.attach(object);
this.selected = object;
}

removeSelected = () => {
if (this.selected !== null) {
this.transControls.detach();
this.scene.remove(this.selected);
this.selected.dispose();
this.pointCharges.splice(this.pointCharges.indexOf(this.selected), 1);
this.selected = null;

// オブジェクトが選択解除されたことを通知
for (let listener of this.listeners) {
if (listener.type === 'object-unselected') {
listener.listener();
}
}
}
detach = () => {

this.transControls.detach();
this.selected = null;

}


setMode = (mode: 'translate' | 'rotate' | 'scale') => {
this.transControls.setMode(mode);
Expand Down
121 changes: 119 additions & 2 deletions app/script/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,36 @@ abstract class ParameterEditor {

}


/**
* 座標エディタのパラメーター
*/
interface PositionEditorOption {

/**
* 電荷の位置
*/
position: THREE.Vector3;

/**
* 位置が変更されたときのイベントハンドラー
*/
onChange: (position: THREE.Vector3) => void;

}


/**
* 座標エディタ
* @note 座標を編集できるHTML要素を表示する
*/
export class PositionEditor implements ParameterEditor {


/**
* コンストラクター
* @param options
*/
constructor(options: PositionEditorOption) {

this.position = options.position;
Expand Down Expand Up @@ -79,7 +101,7 @@ export class PositionEditor implements ParameterEditor {
}

if (type === 'position-editor') {
this.editorArea.addEventListener('click', () => {
this.editorArea.addEventListener('click', () => {
listener();
});
}
Expand All @@ -90,6 +112,10 @@ export class PositionEditor implements ParameterEditor {
private position: THREE.Vector3
private onChange: ((position: THREE.Vector3) => void)[];


/**
* HTML要素の値が変更されたときに呼び出される
*/
private onChangePosition = () => {

const x = Number(this.xInput.value);
Expand All @@ -113,14 +139,37 @@ export class PositionEditor implements ParameterEditor {
}



/**
* 回転角エディタのパラメーター
*/
interface RotationEditorOption {

/**
* 回転角
*/
rotation: THREE.Euler;

/**
* 回転角が変更されたときのイベントハンドラー
*/
onChange: (rotation: THREE.Euler) => void;

}


/**
* 回転角エディタ
* @note 回転角を編集できるHTML要素を表示する
* @note 角度は度数法で表示されるが、内部的にはラジアンで扱う
*/
export class RotationEditor implements ParameterEditor {


/**
* コンストラクター
* @param options
*/
constructor(options: RotationEditorOption) {

this.rotation = options.rotation;
Expand Down Expand Up @@ -175,6 +224,9 @@ export class RotationEditor implements ParameterEditor {
private onChange: ((rotation: THREE.Euler) => void)[];


/**
* HTML要素の値が変更されたときに呼び出される
*/
private onChangeRotation = () => {

const x = THREE.MathUtils.degToRad(Number(this.xInput.value));
Expand All @@ -196,18 +248,62 @@ export class RotationEditor implements ParameterEditor {

}


/**
* 数値エディタのパラメーター
*/
interface NumberEditorOption {

/**
* パラメーター名
*/
name: string;

/**
* 表示される値
* @note エディタ側が値を変更することはない
*/
value: number;

/**
* 値が変更されたときのイベントハンドラー
*/
onChange: (value: number) => void;

/**
* 値の変更量
*/
step?: number;

/**
* 最小値
*/
min?: number;

/**
* 最大値
*/
max?: number;

/**
* 小数点以下の桁数
*/
digits?: number;

}


/**
* 数値エディタ
* @note 数値を編集できるHTML要素を表示する
*/
export class NumberEditor implements ParameterEditor {


/**
* コンストラクター
* @param options
*/
constructor(options: NumberEditorOption) {

this.options = options;
Expand Down Expand Up @@ -282,6 +378,9 @@ export class NumberEditor implements ParameterEditor {
private onChange: ((value: number) => void)[];


/**
* HTML要素の値が変更されたときに呼び出される
*/
private onChangeNumber = () => {

let value = Number(this.input.value);
Expand Down Expand Up @@ -310,23 +409,38 @@ export class NumberEditor implements ParameterEditor {



export class Editor {
/**
* パラメーター設定用エディタ
* @note パラメーターを編集できるHTML要素を表示する
*/
export class Editor implements ParameterEditor {

private parameters: ParameterEditor[] = [];


/**
* エディタを追加する
* @param editor エディタ
*/
add = (editor: ParameterEditor) => {
this.parameters.push(editor);
return this;
}


/**
* エディタを表示する
*/
enable = () => {
for (const parameter of this.parameters) {
parameter.enable();
}
}


/**
* エディタを非表示にする
*/
disable = () => {
for (const parameter of this.parameters) {
parameter.disable();
Expand All @@ -344,6 +458,9 @@ export class Editor {
}


/**
* 電荷が変更(移動など)されたときに呼び出す
*/
addEventListener = (type: 'input' | 'position-editor' | 'rotation-editor', listener: () => void) => {
for (const parameter of this.parameters) {
parameter.addEventListener(type, listener);
Expand Down
Loading

0 comments on commit 1bb2bfa

Please sign in to comment.