Update documents based on feature/modules changes.

developer/create-a-new-node.md

@@ -8,7 +8,7 @@ This section describes the steps to create a new Node.
 
 ## Create a Node class file
 
-All Node classes are managed under **assets/scripts/core/nodes** folder.
+All Node classes are managed under **core/src/nodes** folder.
 
 The folder structure corresponds directly to the directory structure when searching for Nodes, so
 You can either create the Node under the folder you want it to belong to, or create a new folder and create the class files under it.　
@@ -27,7 +27,7 @@ We'll implement it by extending **NodeBase**, which is the base class for all No
 
 ```typescript
 
-export default class Example extends NodeBase {
+export class Example extends NodeBase {
 
   // Name to be displayed in the NodeView in the editor
   public get displayName(): string {
@@ -59,23 +59,30 @@ export default class Example extends NodeBase {
 
 ## Registering the Node index
 
-When you have finished defining the Node, you can register the Node index with the following command.
+When you have finished defining the Node, register the Node index with the following command and build @nodi/core.
 
 ```bash
-
-yarn barrel # Register the path of the file you added to assets/scripts/core/nodes/index.ts file.
+# Execute the following command under the core folder
+yarn barrel # Register the path of the file you added to core/src/index.ts file.
+yarn build # Generate bundle files with webpack
 
 ```
 
 ## Try Node
 
 The Node you added in the above steps can be selected in the editor, so you can see how it works.
 
+To launch the editor, execute the following command under the web folder.
+```bash
+# Execute a following command under the web folder
+yarn dev
+```
+
 ![ExampleNode](/img/developer/create-a-new-node/ExampleNode.gif)
 
 ## Write a description of the Node
 
-We manage the description of each Node in **assets/json/description.json**.
+We manage the description of each Node in **web/assets/json/description.json**.
 
 If you add a description here, you can display the text in the Node Inspector or in the description screen (nodi3d.com/nodes/[Node name]).
 

developer/directory-structure.md

@@ -4,38 +4,60 @@ sidebar_position: 3
 
 # Directory Structure
 
-In this project, we are using [NuxtJS](https://nuxtjs.org/) as the main framework.
+In this project, the
+Core implementations such as geometry processing and node graphs are managed by the @nodi/core module, and
+managed by the @nodi/web module, which is available on the web.
 
-It basically follows the structure of NuxtJS, but
-However, it should be noted that the implementation of the geometry processing and node-based editor portions that are the core of Nodi have been developed in a manner that is as separate from Vue as possible.
+```bash
+.
+├── core: @nodi/core
+└── web: @nodi/web
+```
+
+## @nodi/core
+
+@nodi/core is a collection of reusable implementations that are referenced by other packages, and
+It manages core implementations such as geometry processing and node graphs.
+
+```bash
+├─ preprocess: Scripts to automate the creation of Node class dictionary objects, etc.
+├─ src
+|   ├─ data: Type information for data handled by nodes and implementation of DataTree
+│   ├─ io: Classes to manage Nodi IO
+│   ├─ lib: Libraries that are not supported by npm (vrbnurbs)
+│   ├─ math
+│       ├── geometry: Geometric representation classes and implementations of various geometric operations
+│       ├─ misc: Utility implementations
+│       ├─ primitive: Basic classes for complex numbers, NDomain, etc.　
+│   ├─ misc: Interface and event definitions, etc.
+│   ├─ nodes: Class files for all nodes
+│   ├─ preview: Implementation for preview
+├─ test: Test code by jest
+├─ types: Type definition file
+├─ wasm: WebAssembly module by Rust
+````
+
+## @nodi/web
+
+@nodi/web uses [NuxtJS](https://nuxtjs.org/) as its main framework.
 
-This is because we intend to modularize the geometry processing and node-based editor parts so that they can be run in different applications in the future.
+Basically, we follow the structure of NuxtJS, but
+However, it should be noted that we are developing the implementation of the node-based editor part in a state that is separated from Vue as much as possible.
 
-The most important part of the directory structure that needs to be explained is the **assets/scripts** section.
-This section contains the implementation of the geometry handling and interfaces that are important for Nodi.
+This is because we intend to modularize the node-based editor part in the future, so that it can be run on a different application.
 
 ```bash
 .
-├── assets
-│   ├── images: Image materials
-│   ├── json: Text to manage node descriptions, etc.
-│   ├── styles: Style files
-│   └── scripts
-|       ├── core
-│           ├── data: Types of the data handled by the node and implementation of DataTree
-│           ├── io: Classes that manage IO
-│           ├── lib: Libraries that are not supported by npm (verbnurbs)
-│           ├── math
-│               ├── geometry: Geometric representation classes and implementations of various geometric operations
-│               ├── misc: Utility implementation
-│               ├── primitive: Primitive classes for complex numbers, NDomain, etc.
-│           ├── misc: Interface and event definitions, etc.
-│           ├── nodes: Class files for all nodes
-|       ├── editor: Editor UI implementation
-|       ├── service: Implementation for services such as project and user management
-│       └── viewer: Viewer UI implementation
-├── components
-├── pages
+├─ assets
+│   ├─ images: Image material
+│   ├─ json: Text to manage node descriptions, etc.
+│   ├─ styles: Style files
+│   └─ scripts
+|       ├─ editor: Editor UI implementation
+|       ├─ service: Implementation for services such as project and user management
+|       └─ viewer: Viewer UI implementation
+├─ components
+├─ pages
 .
-. (The others are basically in accordance with the NuxtJS structure, so they are omitted.)
+. (Others are basically in accordance with NuxtJS structure, so omitted)
 ```

developer/getting-started/setup.md

@@ -21,13 +21,13 @@ https://github.com/Nodi3d/nodi
 
 ### Set up the environment variable file.
 
-Rename **.firebase.env.example.js** in the root of the repository to **.firebase.env.js**.
+Rename **.firebase.env.example.js** in the web folder to **.firebase.env.js**.
 
 > If you want to use your own Firebase project, please check [Firebase Settings](/developer/getting-started/firebase).
 
 ### Solving dependency and Build
 
-In this project, [NuxtJS](https://nuxtjs.org/) is used as the main framework, and the following commands are used to resolve dependencies, start up locally, build, etc.
+In nodi3d.com, [NuxtJS](https://nuxtjs.org/) is used as the main framework, and the following commands under the web folder are used to resolve dependencies, start up locally, build, etc.
 
 ```bash
 # install dependencies

i18n/ja/docusaurus-plugin-content-docs-developer/current/create-a-new-node.md

@@ -8,7 +8,7 @@ sidebar_position: 4
 
 ## Nodeクラスファイルを追加する
 
-**assets/scripts/core/nodes**フォルダ以下ですべてのNodeクラスを管理しています。
+**core/src/nodes**フォルダ以下ですべてのNodeクラスを管理しています。
 
 フォルダ構成がそのままNodeを検索する際のディレクトリ構造に対応しているので、
 Nodeを所属させたいフォルダ以下に作成するか、もしくは新しいフォルダを作成し、その下にクラスファイルを作成してください。　
@@ -27,7 +27,7 @@ Nodeを所属させたいフォルダ以下に作成するか、もしくは新
 
 ```typescript
 
-export default class Example extends NodeBase {
+export class Example extends NodeBase {
 
   // エディタ上のNodeViewに表示される名前
   public get displayName(): string {
@@ -59,23 +59,29 @@ export default class Example extends NodeBase {
 
 ## Nodeのインデックスに登録する
 
-Nodeの定義が終了したら、以下のコマンドでNodeのインデックスを登録します。
+Nodeの定義が終了したら、以下のコマンドでNodeのインデックスを登録し、@nodi/coreをビルドします。
 
 ```bash
-
-yarn barrel # assets/scripts/core/nodes/index.tsファイルに追加したファイルのパスを登録する
-
+# coreフォルダ以下で下記のコマンドを実行する
+yarn barrel # src/nodes/index.tsファイルに追加したファイルのパスを登録する
+yarn build # webpackでbundleファイルを生成する
 ```
 
 ## Nodeを試す
 
 以上までの手順で追加したNodeがエディタ上で選べるようになるので動作を確認することができます。
 
+エディタを立ち上げるには、webフォルダ以下で下記のコマンドを実行します。
+```bash
+# webフォルダ以下で下記のコマンドを実行する
+yarn dev
+```
+
 ![ExampleNode](/img/developer/create-a-new-node/ExampleNode.gif)
 
 ## Nodeの説明文を書く
 
-**assets/json/description.json**で各Nodeの説明文を管理しています。
+**web/assets/json/description.json**で各Nodeの説明文を管理しています。
 
 ここに説明を追加すると、Node Inspectorや説明画面(nodi3d.com/nodes/[Node名])に文章を表示することができます。
 

i18n/ja/docusaurus-plugin-content-docs-developer/current/directory-structure.md

@@ -4,15 +4,46 @@ sidebar_position: 3
 
 # ディレクトリ構成
 
-このプロジェクトでは[NuxtJS](https://nuxtjs.org/)を主なフレームワークとして使用しています。
+このプロジェクトでは、
+幾何処理やノードグラフなどのコアとなる実装を@nodi/coreモジュールで管理していて、
+Web上で利用できる@nodi/webモジュールで管理しています。
 
-基本的にNuxtJSの構成に則っていますが、
-Nodiのコアとなるジオメトリ処理やノードベースエディター部分の実装についてはなるべくVueと切り離した状態で開発している点に注意が必要です。
+```bash
+.
+├── core: @nodi/core
+└── web: @nodi/web
+```
+
+## @nodi/core
 
-これは、将来的にジオメトリ処理やノードベースエディター部分をモジュール化し、別アプリケーション上でも動かせるようにすることを意図しているためです。
+@nodi/coreは他のパッケージから参照される再利用可能な実装をまとめたもので、
+幾何処理やノードグラフなどのコアとなる実装を管理しています。
 
-ディレクトリ構成に関して特に説明が必要なのがassets/scripts以下の部分で、
-ここにNodiでは重要なジオメトリ処理やインターフェイスの実装が含まれています。
+```bash
+├── preprocess: Nodeクラスの辞書オブジェクトの生成などを自動化するスクリプトなど
+├── src
+    ├── data: ノードが扱うデータの型情報や、DataTreeの実装
+│   ├── io: NodiのIOを管理するクラス群
+│   ├── lib: npmに対応していないライブラリ (verbnurbs)
+│   ├── math
+│       ├── geometry: 幾何表現クラスや各種幾何処理の実装群
+│       ├── misc: ユーティリティ系の実装
+│       ├── primitive: 複素数やNDomainなどの基本的なクラス群　
+│   ├── misc: インターフェイスやイベントの定義など
+│   ├── nodes: 全てのノードのクラスファイル
+│   ├── preview: プレビュー用の実装
+├── test: jestによるテストコード
+├── types: 型定義ファイル
+├── wasm: RustによるWebAssemblyモジュール
+```
+
+## @nodi/web
+
+@nodi/webでは[NuxtJS](https://nuxtjs.org/)を主なフレームワークとして使用しています。
+
+基本的にNuxtJSの構成に則っていますが、
+ノードベースエディター部分の実装についてはなるべくVueと切り離した状態で開発している点に注意が必要です。
+これは、将来的にノードベースエディター部分をモジュール化し、別アプリケーション上でも動かせるようにすることを意図しているためです。
 
 ```bash
 .
@@ -21,16 +52,6 @@ Nodiのコアとなるジオメトリ処理やノードベースエディター
 │   ├── json: ノードの説明文言を管理するテキストなど
 │   ├── styles: スタイルファイル群
 │   └── scripts
-|       ├── core
-│           ├── data: ノードが扱うデータの型情報や、DataTreeの実装
-│           ├── io: NodiのIOを管理するクラス群
-│           ├── lib: npmに対応していないライブラリ (verbnurbs)
-│           ├── math
-│               ├── geometry: 幾何表現クラスや各種幾何処理の実装群
-│               ├── misc: ユーティリティ系の実装
-│               ├── primitive: 複素数やNDomainなどの基本的なクラス群　
-│           ├── misc: インターフェイスやイベントの定義など
-│           ├── nodes: 全てのノードのクラスファイル
 |       ├── editor: エディタUIの実装
 |       ├── service: プロジェクトやユーザ管理などのサービスに関わる実装
 │       └── viewer: ビューワUIの実装

i18n/ja/docusaurus-plugin-content-docs-developer/current/getting-started/setup.md

@@ -20,15 +20,18 @@ https://github.com/Nodi3d/nodi
 
 ### 環境変数ファイルの設定
 
-リポジトリのルートに含まれる**.firebase.env.example.js**を**.firebase.env.js**にリネームします。
+webフォルダ直下に含まれる**.firebase.env.example.js**を**.firebase.env.js**にリネームします。
 
 > もし自前のFirebaseプロジェクトを使いたい場合は[Firebaseの設定](/developer/getting-started/firebase)を確認してください。
 
 ### 依存関係の解決とビルド
 
-このプロジェクトでは[NuxtJS](https://nuxtjs.org/)を主なフレームワークとして使用していて、以下のコマンドで依存関係の解決やローカルでの立ち上げ、ビルド等を行います。
+nodi3d.comでは[NuxtJS](https://nuxtjs.org/)を主なフレームワークとして使用していて、
+webフォルダ直下で以下のコマンドを実行することで依存関係の解決やローカルでの立ち上げ、ビルド等を行います。
 
 ```bash
+# webフォルダ以下に移動して以下のコマンドを実行
+
 # install dependencies
 $ yarn install