diff --git a/package.json b/package.json index 7639d67..12abd91 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@next2d/framework", "description": "Next2D Framework is designed according to the principles of clean architecture, domain-driven development, test-driven development, and MVVM, with an emphasis on flexibility, scalability, and maintainability, and a design methodology that keeps each layer loosely coupled.", - "version": "4.0.2", + "version": "4.0.3", "homepage": "https://next2d.app", "bugs": "https://github.com/Next2D/Framework/issues/new", "author": "Toshiyuki Ienaga (https://github.com/ienaga/)", @@ -33,18 +33,18 @@ "devDependencies": { "@eslint/eslintrc": "^3.3.5", "@eslint/js": "^10.0.1", - "@types/node": "^25.5.0", - "@typescript-eslint/eslint-plugin": "^8.58.0", - "@typescript-eslint/parser": "^8.58.0", - "@vitest/coverage-v8": "^4.1.2", - "@vitest/web-worker": "^4.1.2", - "eslint": "^10.1.0", + "@types/node": "^25.6.0", + "@typescript-eslint/eslint-plugin": "^8.58.2", + "@typescript-eslint/parser": "^8.58.2", + "@vitest/coverage-v8": "^4.1.4", + "@vitest/web-worker": "^4.1.4", + "eslint": "^10.2.0", "eslint-plugin-unused-imports": "^4.4.1", - "globals": "^17.4.0", - "jsdom": "^29.0.1", + "globals": "^17.5.0", + "jsdom": "^29.0.2", "typescript": "^6.0.2", - "vite": "^8.0.3", - "vitest": "^4.1.2", + "vite": "^8.0.8", + "vitest": "^4.1.4", "vitest-webgl-canvas-mock": "^1.1.0" }, "peerDependencies": { diff --git a/specs/cn/config.md b/specs/cn/config.md index dd067f5..af56612 100644 --- a/specs/cn/config.md +++ b/specs/cn/config.md @@ -11,9 +11,11 @@ src/config/ └── routing.json # 路由设置 ``` +--- + ## stage.json -用于设置显示区域（Stage）的 JSON 文件。 +用于配置显示区域（Stage）的 JSON 文件。应用启动时读取一次，作为 Stage 的初始参数使用。 ```json { @@ -32,22 +34,30 @@ src/config/ | 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| -| `width` | number | 240 | 显示区域宽度 | -| `height` | number | 240 | 显示区域高度 | -| `fps` | number | 60 | 每秒绘制次数（1-60） | -| `options` | object | null | 选项设置 | +| `width` | number | 240 | 显示区域宽度（像素）。作为渲染画布的基准宽度使用 | +| `height` | number | 240 | 显示区域高度（像素）。作为渲染画布的基准高度使用 | +| `fps` | number | 60 | 每秒渲染次数。有效范围为 1〜60 | +| `options` | object | null | 附加选项设置。可省略 | ### options 设置 | 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| -| `fullScreen` | boolean | false | 超出舞台宽高在整个屏幕上绘制 | -| `tagId` | string | null | 指定后，绘制发生在具有该 ID 的元素内 | -| `bgColor` | string | "transparent" | 十六进制背景颜色。默认为透明 | +| `fullScreen` | boolean | false | 设为 `true` 时，Stage 扩展为填充整个窗口。设为 `false` 时，以 `width`・`height` 指定的尺寸固定渲染 | +| `tagId` | string \| null | null | 用作渲染目标的 HTML 元素 ID。画布在指定 ID 的元素内部创建。为 `null` 时直接在 `` 下创建 | +| `bgColor` | string | "transparent" | 以十六进制颜色代码指定背景色（例：`"#1461A0"`）。指定 `"transparent"` 则为透明 | + +> [!WARNING] +> `stage.json` 中有效的属性仅有 `width`・`height`・`fps`・`options`。 +> `align`・`scaleMode` 等与 Stage 显示相关的设置，在 `stage.json` 中并不存在。 +> 如需这些设置，请在 `config.json` 中定义。 +> 上述以外的属性将被框架完全忽略，不做任何处理。 + +--- ## config.json -用于管理特定环境设置的文件。分为 `local`、`dev`、`stg`、`prd` 和 `all`，其中除 `all` 以外的任何环境名称都是任意的。 +用于管理各环境设置的文件。构建时，与 `--env` 选项指定的环境名匹配的对象和 `all` 对象合并后，作为整个应用可引用的设置展开。 ```json { @@ -82,20 +92,68 @@ src/config/ } ``` -### all 设置 +### 环境键规格 + +`local`・`dev`・`stg`・`prd` 等键名可任意指定（`all` 除外）。构建时，与 `--env=<环境名>` 匹配的键的对象将被读取。 -`all` 是在任何环境中导出的公共变量。 +| 键 | 说明 | +|----|------| +| `all` | 在所有环境下均会读取的公共设置 | +| 其他 | 仅在键名与构建时 `--env` 指定值匹配时读取的设置 | + +### all 设置（框架保留属性） + +以下属性由框架自动处理。 | 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| -| `spa` | boolean | true | 作为单页应用程序通过 URL 控制场景 | -| `defaultTop` | string | "top" | 页面顶部的 View。如果未设置，将启动 TopView 类 | -| `loading.callback` | string | Loading | 加载画面类名。调用 start 和 end 函数 | -| `gotoView.callback` | string \| array | ["callback.Background"] | gotoView 完成后的回调类 | +| `spa` | boolean | true | 设为 `true` 时，作为单页应用程序运行，与浏览器 URL 联动管理 View 切换 | +| `defaultTop` | string | "top" | 应用启动时最先显示的 View 名称。未指定时启动 `TopView` 类 | +| `loading.callback` | string | "Loading" | 用作加载画面的类名。该类的 `start()` 和 `end()` 会被自动调用 | +| `gotoView.callback` | string \| string[] | — | View 切换完成后调用的回调类名。可以数组形式指定多个，按 async/await 顺序执行 | + +### 用户自定义属性 + +除框架保留属性外，可在任意环境键中添加任意属性。添加的属性在构建后可通过 `config` 对象引用。 + +端点 URL、功能开关、显示设置等需要按环境区分的值，可在此处统一管理。 + +```json +{ + "local": { + "api": { + "endPoint": "http://localhost:3000/" + } + }, + "prd": { + "api": { + "endPoint": "https://api.example.com/" + } + }, + "all": { + "spa": true, + "defaultTop": "top", + "align": "TL", + "scaleMode": "noScale" + } +} +``` + +```typescript +import { config } from "@/config/Config"; + +// 访问用户自定义属性 +const align = config.align; // "TL" +const scaleMode = config.scaleMode; // "noScale" +``` + +> [!WARNING] +> `config.json` 中框架自动处理的属性仅有 `spa`・`defaultTop`・`loading`・`gotoView`。 +> 其他属性不会被框架直接处理，但可通过 `config` 对象在应用代码中自由引用。 ### platform 设置 -构建时使用 `--platform` 指定的值会被设置。 +构建时通过 `--platform` 指定的值会被自动设置。无需在配置文件中填写，为只读项。 支持的值：`macos`、`windows`、`linux`、`ios`、`android`、`web` @@ -103,10 +161,12 @@ src/config/ import { config } from "@/config/Config"; if (config.platform === "ios") { - // iOS 特定处理 + // iOS 专用处理 } ``` +--- + ## routing.json 路由配置文件。详情请参阅[路由](/cn/reference/framework/routing)。 @@ -128,53 +188,21 @@ if (config.platform === "ios") { } ``` -## 获取配置值 - -在代码中使用 `config` 对象获取配置值。 - -### Config.ts 示例 +--- -```typescript -import stageJson from "./stage.json"; -import configJson from "./config.json"; - -interface IStageConfig { - width: number; - height: number; - fps: number; - options: { - fullScreen: boolean; - tagId: string | null; - bgColor: string; - }; -} +## 获取配置值 -interface IConfig { - stage: IStageConfig; - api: { - endPoint: string; - }; - content: { - endPoint: string; - }; - spa: boolean; - defaultTop: string; - platform: string; -} +`Config.ts` 是执行 `npm start` 时自动生成的文件，无需手动创建或编辑。 -export const config: IConfig = { - stage: stageJson, - ...configJson -}; -``` +在代码中通过导入自动生成的 `config` 对象来获取配置值。 ### 使用示例 ```typescript import { config } from "@/config/Config"; -// 舞台设置 -const stageWidth = config.stage.width; +// Stage 设置 +const stageWidth = config.stage.width; const stageHeight = config.stage.height; // API 设置 @@ -184,9 +212,11 @@ const apiEndPoint = config.api.endPoint; const isSpa = config.spa; ``` +--- + ## 加载画面 -调用 `loading.callback` 中设置的类的 `start` 和 `end` 函数。 +`loading.callback` 中设置的类的 `start()` 和 `end()` 方法会被自动调用。 ```typescript export class Loading @@ -213,9 +243,11 @@ export class Loading } ``` +--- + ## gotoView 回调 -调用 `gotoView.callback` 中设置的类的 `execute` 函数。可以设置多个类作为数组，并使用 async/await 顺序执行。 +`gotoView.callback` 中设置的类的 `execute()` 方法会被调用。可以数组形式指定多个类，按 async/await 顺序执行。 ```typescript import { app } from "@next2d/framework"; @@ -236,12 +268,14 @@ export class Background const view = context.view; if (!view) return; - // 将背景放在后面 + // 将背景放置在最底层 view.addChildAt(this.shape, 0); } } ``` +--- + ## 构建命令 带环境指定的构建： @@ -265,6 +299,8 @@ npm run build -- --platform=ios npm run build -- --platform=android ``` +--- + ## 配置示例 ### 完整配置文件示例 @@ -320,11 +356,15 @@ npm run build -- --platform=android }, "gotoView": { "callback": ["callback.Background"] - } + }, + "align": "TL", + "scaleMode": "noScale" } } ``` +--- + ## 相关 - [路由](/cn/reference/framework/routing) diff --git a/specs/en/config.md b/specs/en/config.md index e9202e5..891ceee 100644 --- a/specs/en/config.md +++ b/specs/en/config.md @@ -11,9 +11,11 @@ src/config/ └── routing.json # Routing settings ``` +--- + ## stage.json -JSON file for setting the display area (Stage). +JSON file for configuring the display area (Stage). It is read once at application startup and used as the initial parameters for the Stage. ```json { @@ -32,22 +34,30 @@ JSON file for setting the display area (Stage). | Property | Type | Default | Description | |----------|------|---------|-------------| -| `width` | number | 240 | Display area width | -| `height` | number | 240 | Display area height | -| `fps` | number | 60 | Drawings per second (1-60) | -| `options` | object | null | Option settings | +| `width` | number | 240 | Display area width in pixels. Used as the base width of the rendering canvas | +| `height` | number | 240 | Display area height in pixels. Used as the base height of the rendering canvas | +| `fps` | number | 60 | Number of renders per second. Valid range is 1–60 | +| `options` | object | null | Additional option settings. Can be omitted | ### options Settings | Property | Type | Default | Description | |----------|------|---------|-------------| -| `fullScreen` | boolean | false | Draw on entire screen beyond Stage width/height | -| `tagId` | string | null | When specified, drawing occurs within the element with that ID | -| `bgColor` | string | "transparent" | Background color in hexadecimal. Default is transparent | +| `fullScreen` | boolean | false | When `true`, the Stage expands to fill the entire window. When `false`, rendering is fixed to the size specified by `width` and `height` | +| `tagId` | string \| null | null | ID of the HTML element to use as the rendering target. The canvas is created inside the element with the specified ID. When `null`, the canvas is created directly under `` | +| `bgColor` | string | "transparent" | Background color as a hexadecimal color code (e.g. `"#1461A0"`). Use `"transparent"` for a transparent background | + +> [!WARNING] +> The only valid properties in `stage.json` are `width`, `height`, `fps`, and `options`. +> Properties such as `align` and `scaleMode` — even though they relate to Stage display — do not exist in `stage.json`. +> If you need these settings, define them in `config.json`. +> Any properties not listed above are completely ignored by the framework. + +--- ## config.json -File for managing environment-specific settings. Divided into `local`, `dev`, `stg`, `prd`, and `all`, where any environment name except `all` is arbitrary. +File for managing environment-specific settings. At build time, the object matching the environment name specified with `--env` is merged with the `all` object and made available throughout the application. ```json { @@ -82,20 +92,68 @@ File for managing environment-specific settings. Divided into `local`, `dev`, `s } ``` -### all Settings +### Environment Key Specification + +Key names such as `local`, `dev`, `stg`, and `prd` are arbitrary (except `all`). The object whose key matches `--env=` at build time is loaded. -`all` is a common variable exported in any environment. +| Key | Description | +|-----|-------------| +| `all` | Settings loaded in all environments | +| Others | Settings loaded only when the key matches the `--env` value at build time | + +### all Settings (Framework Reserved Properties) + +The following properties are automatically processed by the framework. | Property | Type | Default | Description | |----------|------|---------|-------------| -| `spa` | boolean | true | Control scenes via URL as Single Page Application | -| `defaultTop` | string | "top" | View for page top. TopView class launches if not set | -| `loading.callback` | string | Loading | Loading screen class name. Calls start and end functions | -| `gotoView.callback` | string \| array | ["callback.Background"] | Callback class after gotoView completion | +| `spa` | boolean | true | When `true`, the application behaves as a Single Page Application and manages View transitions in sync with the browser URL | +| `defaultTop` | string | "top" | Name of the View to display first when the application starts. If not specified, the `TopView` class is launched | +| `loading.callback` | string | "Loading" | Class name to use as the loading screen. The class's `start()` and `end()` methods are called automatically | +| `gotoView.callback` | string \| string[] | — | Callback class name(s) to call after a View transition completes. Multiple classes can be specified as an array and are executed sequentially with async/await | + +### User-Defined Properties + +In addition to the framework reserved properties, you can add any properties to any environment key. Added properties are accessible from the `config` object after the build. + +Use this to manage values that need to differ per environment, such as endpoint URLs, feature flags, and display settings. + +```json +{ + "local": { + "api": { + "endPoint": "http://localhost:3000/" + } + }, + "prd": { + "api": { + "endPoint": "https://api.example.com/" + } + }, + "all": { + "spa": true, + "defaultTop": "top", + "align": "TL", + "scaleMode": "noScale" + } +} +``` + +```typescript +import { config } from "@/config/Config"; + +// Accessing user-defined properties +const align = config.align; // "TL" +const scaleMode = config.scaleMode; // "noScale" +``` + +> [!WARNING] +> The only properties automatically processed by the framework in `config.json` are `spa`, `defaultTop`, `loading`, and `gotoView`. +> All other properties are not processed directly by the framework, but can be freely accessed from application code via the `config` object. ### platform Settings -The value specified with `--platform` at build time is set. +The value specified with `--platform` at build time is automatically set. It does not need to be written in the configuration file and is read-only. Supported values: `macos`, `windows`, `linux`, `ios`, `android`, `web` @@ -107,6 +165,8 @@ if (config.platform === "ios") { } ``` +--- + ## routing.json Routing configuration file. See [Routing](/en/reference/framework/routing) for details. @@ -128,45 +188,13 @@ Routing configuration file. See [Routing](/en/reference/framework/routing) for d } ``` -## Getting Configuration Values - -Use the `config` object to get configuration values in code. - -### Config.ts Example +--- -```typescript -import stageJson from "./stage.json"; -import configJson from "./config.json"; - -interface IStageConfig { - width: number; - height: number; - fps: number; - options: { - fullScreen: boolean; - tagId: string | null; - bgColor: string; - }; -} +## Getting Configuration Values -interface IConfig { - stage: IStageConfig; - api: { - endPoint: string; - }; - content: { - endPoint: string; - }; - spa: boolean; - defaultTop: string; - platform: string; -} +`Config.ts` is auto-generated when running `npm start`. You do not need to create or edit it manually. -export const config: IConfig = { - stage: stageJson, - ...configJson -}; -``` +To get configuration values in code, import and use the auto-generated `config` object. ### Usage Example @@ -174,7 +202,7 @@ export const config: IConfig = { import { config } from "@/config/Config"; // Stage settings -const stageWidth = config.stage.width; +const stageWidth = config.stage.width; const stageHeight = config.stage.height; // API settings @@ -184,9 +212,11 @@ const apiEndPoint = config.api.endPoint; const isSpa = config.spa; ``` +--- + ## Loading Screen -The `start` and `end` functions of the class set in `loading.callback` are called. +The `start()` and `end()` methods of the class set in `loading.callback` are called automatically. ```typescript export class Loading @@ -213,9 +243,11 @@ export class Loading } ``` +--- + ## gotoView Callback -The `execute` function of classes set in `gotoView.callback` is called. Multiple classes can be set as an array and executed sequentially with async/await. +The `execute()` method of classes set in `gotoView.callback` is called. Multiple classes can be specified as an array and are executed sequentially with async/await. ```typescript import { app } from "@next2d/framework"; @@ -242,6 +274,8 @@ export class Background } ``` +--- + ## Build Commands Build with environment specification: @@ -265,6 +299,8 @@ npm run build -- --platform=ios npm run build -- --platform=android ``` +--- + ## Configuration Examples ### Complete Configuration File Examples @@ -320,11 +356,15 @@ npm run build -- --platform=android }, "gotoView": { "callback": ["callback.Background"] - } + }, + "align": "TL", + "scaleMode": "noScale" } } ``` +--- + ## Related - [Routing](/en/reference/framework/routing) diff --git a/specs/ja/config.md b/specs/ja/config.md index 9d615c5..415b080 100644 --- a/specs/ja/config.md +++ b/specs/ja/config.md @@ -11,9 +11,11 @@ src/config/ └── routing.json # ルーティング設定 ``` +--- + ## stage.json -表示領域（Stage）の設定を行うJSONファイルです。 +表示領域（Stage）の設定を行うJSONファイルです。アプリ起動時に一度だけ読み込まれ、Stageの初期パラメータとして使用されます。 ```json { @@ -32,22 +34,30 @@ src/config/ | プロパティ | 型 | デフォルト | 説明 | |-----------|------|----------|------| -| `width` | number | 240 | 表示領域の幅 | -| `height` | number | 240 | 表示領域の高さ | -| `fps` | number | 60 | 1秒間に何回描画するか（1〜60） | -| `options` | object | null | オプション設定 | +| `width` | number | 240 | 表示領域の幅（ピクセル単位）。実際の描画キャンバスの基準幅として使用される | +| `height` | number | 240 | 表示領域の高さ（ピクセル単位）。実際の描画キャンバスの基準高さとして使用される | +| `fps` | number | 60 | 1秒間の描画回数。指定可能な範囲は 1〜60 | +| `options` | object | null | 追加オプション設定。省略可能 | -### options設定 +### options 設定 | プロパティ | 型 | デフォルト | 説明 | |-----------|------|----------|------| -| `fullScreen` | boolean | false | Stageで設定した幅と高さを超えて画面全体に描画 | -| `tagId` | string | null | IDを指定すると、指定したIDのエレメント内で描画を行う | -| `bgColor` | string | "transparent" | 背景色を16進数で指定。デフォルトは無色透明 | +| `fullScreen` | boolean | false | `true` にするとウィンドウ全体にStageを拡張して描画する。`false` の場合は `width`・`height` で指定したサイズで固定描画 | +| `tagId` | string \| null | null | 描画先とするHTML要素のID。指定したIDのエレメント内部にキャンバスが生成される。`null` の場合は `` 直下に生成される | +| `bgColor` | string | "transparent" | 背景色を16進数カラーコードで指定（例: `"#1461A0"`）。`"transparent"` を指定すると透明になる | + +> [!WARNING] +> `stage.json` で有効なプロパティは上記の `width`・`height`・`fps`・`options` のみです。 +> `align`・`scaleMode` などステージ表示に関わる設定であっても、`stage.json` には存在しないプロパティです。 +> これらの設定が必要な場合は `config.json` に記述してください。 +> 上記以外のプロパティを記述しても、フレームワークは一切処理しません。 + +--- ## config.json -環境ごとの設定を管理するファイルです。`local`、`dev`、`stg`、`prd`、`all`と区切られており、`all`以外は任意の環境名です。 +環境ごとの設定を管理するファイルです。ビルド時に `--env` オプションで指定した環境名のオブジェクトと `all` オブジェクトがマージされ、アプリケーション全体で参照可能な設定として展開されます。 ```json { @@ -82,20 +92,68 @@ src/config/ } ``` -### all設定 +### 環境キーの仕様 + +`local`・`dev`・`stg`・`prd` などのキー名は任意です（`all` を除く）。ビルド時に `--env=<環境名>` で一致したキーのオブジェクトが読み込まれます。 -`all`はどの環境でも書き出される共通変数です。 +| キー | 説明 | +|------|------| +| `all` | すべての環境で共通して読み込まれる設定 | +| それ以外 | `--env` で指定した環境名と一致したときのみ読み込まれる設定 | + +### all 設定（フレームワーク予約済みプロパティ） + +以下のプロパティはフレームワークが自動的に処理します。 | プロパティ | 型 | デフォルト | 説明 | |-----------|------|----------|------| -| `spa` | boolean | true | Single Page ApplicationとしてURLでシーンを制御 | -| `defaultTop` | string | "top" | ページトップのView。設定がない場合はTopViewクラスが起動 | -| `loading.callback` | string | Loading | ローディング画面のクラス名。start関数とend関数を呼び出す | -| `gotoView.callback` | string \| array | ["callback.Background"] | gotoView完了後のコールバッククラス | +| `spa` | boolean | true | `true` にするとSingle Page Applicationとして動作し、ブラウザのURLと連動してView遷移を管理する | +| `defaultTop` | string | "top" | アプリ起動時に最初に表示するViewの名前。指定しない場合は `TopView` クラスが起動する | +| `loading.callback` | string | "Loading" | ローディング画面として使用するクラス名。そのクラスの `start()` と `end()` が自動的に呼び出される | +| `gotoView.callback` | string \| string[] | — | View遷移完了後に呼び出すコールバッククラス名。配列で複数指定でき、async/awaitで順次実行される | + +### ユーザー定義プロパティ + +フレームワークの予約済みプロパティ以外に、任意のプロパティをどの環境キーにも追加できます。追加したプロパティはビルド後に `config` オブジェクトから参照できます。 + +エンドポイントURLや機能フラグ、表示設定など、環境ごとに変える必要がある値をここで管理します。 + +```json +{ + "local": { + "api": { + "endPoint": "http://localhost:3000/" + } + }, + "prd": { + "api": { + "endPoint": "https://api.example.com/" + } + }, + "all": { + "spa": true, + "defaultTop": "top", + "align": "TL", + "scaleMode": "noScale" + } +} +``` -### platform設定 +```typescript +import { config } from "@/config/Config"; + +// ユーザー定義プロパティへのアクセス +const align = config.align; // "TL" +const scaleMode = config.scaleMode; // "noScale" +``` -ビルド時の`--platform`で指定した値がセットされます。 +> [!WARNING] +> `config.json` でフレームワークが自動処理するプロパティは `spa`・`defaultTop`・`loading`・`gotoView` のみです。 +> それ以外のプロパティはフレームワークが直接処理することはありませんが、`config` オブジェクト経由でアプリケーションコードから自由に参照できます。 + +### platform 設定 + +ビルド時の `--platform` で指定した値が自動的にセットされます。設定ファイルに記述する必要はなく、読み取り専用です。 対応値: `macos`, `windows`, `linux`, `ios`, `android`, `web` @@ -107,6 +165,8 @@ if (config.platform === "ios") { } ``` +--- + ## routing.json ルーティングの設定ファイルです。詳細は[ルーティング](/ja/reference/framework/routing)を参照してください。 @@ -128,45 +188,13 @@ if (config.platform === "ios") { } ``` -## 設定値の取得 - -コード内で設定値を取得するには`config`オブジェクトを使用します。 - -### Config.tsの例 +--- -```typescript -import stageJson from "./stage.json"; -import configJson from "./config.json"; - -interface IStageConfig { - width: number; - height: number; - fps: number; - options: { - fullScreen: boolean; - tagId: string | null; - bgColor: string; - }; -} +## 設定値の取得 -interface IConfig { - stage: IStageConfig; - api: { - endPoint: string; - }; - content: { - endPoint: string; - }; - spa: boolean; - defaultTop: string; - platform: string; -} +`Config.ts` は `npm start` 実行時に自動生成されるファイルです。手動で作成・編集する必要はありません。 -export const config: IConfig = { - stage: stageJson, - ...configJson -}; -``` +コード内で設定値を取得するには、自動生成された `config` オブジェクトをインポートして使用します。 ### 使用例 @@ -174,7 +202,7 @@ export const config: IConfig = { import { config } from "@/config/Config"; // ステージ設定 -const stageWidth = config.stage.width; +const stageWidth = config.stage.width; const stageHeight = config.stage.height; // API設定 @@ -184,9 +212,11 @@ const apiEndPoint = config.api.endPoint; const isSpa = config.spa; ``` +--- + ## ローディング画面 -`loading.callback`で設定したクラスの`start`関数と`end`関数が呼び出されます。 +`loading.callback` で設定したクラスの `start()` と `end()` が自動的に呼び出されます。 ```typescript export class Loading @@ -213,9 +243,11 @@ export class Loading } ``` -## gotoViewコールバック +--- -`gotoView.callback`で設定したクラスの`execute`関数が呼び出されます。複数のクラスを配列で設定でき、async/awaitで順次実行されます。 +## gotoView コールバック + +`gotoView.callback` で設定したクラスの `execute()` が呼び出されます。配列で複数のクラスを指定でき、async/await で順次実行されます。 ```typescript import { app } from "@next2d/framework"; @@ -242,6 +274,8 @@ export class Background } ``` +--- + ## ビルドコマンド 環境を指定してビルド: @@ -265,6 +299,8 @@ npm run build -- --platform=ios npm run build -- --platform=android ``` +--- + ## 設定例 ### 完全な設定ファイルの例 @@ -320,11 +356,15 @@ npm run build -- --platform=android }, "gotoView": { "callback": ["callback.Background"] - } + }, + "align": "TL", + "scaleMode": "noScale" } } ``` +--- + ## 関連項目 - [ルーティング](/ja/reference/framework/routing)