@wonderlandengine/editor-api 1.2.0-dev.0 → 1.2.0-dev.1

package/dist/data.d.ts

@@ -624,7 +624,7 @@ export declare class LanguageResource {
     };
 }
 /**
- * @brief Access to Wonderland Editor's data
+ * Access to Wonderland Editor's data.
  *
  * Hold control and hover any field in Wonderland Editor to see its JSON path.
  * The path is equivalent to how you find the matching chain of properties.

package/dist/data.js

@@ -622,7 +622,7 @@ export class LanguageResource {
     strings = {};
 }
 /**
- * @brief Access to Wonderland Editor's data
+ * Access to Wonderland Editor's data.
  *
  * Hold control and hover any field in Wonderland Editor to see its JSON path.
  * The path is equivalent to how you find the matching chain of properties.

package/dist/native.d.ts

@@ -7,14 +7,19 @@ interface NativeToolsAPI {
 }
 interface NativeUiAPI {
     freeImage(id: number): void;
-    loadImage(path: string, cb: (id: number) => void): void;
+    loadImage(data: ArrayBuffer): [number, number];
     text(text: string): void;
     label(text: string): void;
     button(label: string): boolean;
     image(id: number, width: number, height: number): boolean;
     inputText(label: string, value: string): string | null;
+    checkbox(label: string, value: boolean): boolean | null;
+    colorEdit4(label: string, value: Float32Array): boolean;
     dummy(width: number, height: number): void;
     sameLine(offset: number): void;
+    separator(): void;
+    beginGroup(): void;
+    endGroup(): void;
 }
 declare global {
     function _wl_internalBinding(moduleName: 'tools'): NativeToolsAPI;

package/dist/tools.d.ts

@@ -1,3 +1,5 @@
+/** @hidden */
+export declare function awaitJob(jobId: number): Promise<void>;
 /**
  * Package the current project
  * @param destDir Destination directory into which to package, default `'<project-root>/deploy'`.

package/dist/tools.js

@@ -1,5 +1,6 @@
 const tools = _wl_internalBinding('tools');
-function awaitJob(jobId) {
+/** @hidden */
+export function awaitJob(jobId) {
     return new Promise((resolve, reject) => {
         tools.awaitJob(jobId, (success) => {
             if (success)

package/dist/ui.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" resolution-mode="require"/>
 /** Image to be used in the {@ref Ui}. */
 export declare class UiImage {
     _id: number;
@@ -17,7 +18,7 @@ export declare const label: (text: string) => void;
  * @example
  * In a draw function of a plugin, use as follows:
  * ```ts
- * if(WLE.button('Click me!')) {
+ * if(ui.button('Click me!')) {
  *     console.log('You clicked the button.');
  * }
  * ```
@@ -33,21 +34,67 @@ export declare const button: (label: string) => boolean;
  * In a draw function of a plugin, use as follows:
  * ```ts
  * this.thumbnail = null;
- * loadUiImage("cache/plugins/my-plugin/downloads/thumbnail.png")
+ * loadImage(fs.readFileSync("cache/plugins/my-plugin/downloads/thumbnail.png"))
  *     .then((img) => this.thumbnail = img);
  * ```
  *
  * @see image()
  */
-export declare function loadUiImage(filepath: string): Promise<UiImage>;
+export declare function loadImage(data: ArrayBuffer | Buffer): Promise<UiImage>;
 export declare function image(image: UiImage, width: number, height: number): boolean;
 /**
  * Text input field.
  *
- * @usage
- * s = ui.inputText("change this:", s) || s;
+ * @param label Label to display next to the field.
+ * @param value Current value to set the field to.
+ * @returns The new string value when changed by the user this frame, otherwise `null`.
+ *
+ * @example
+ *     s = ui.inputText("change this:", s) || s;
  */
 export declare const inputText: (label: string, value: string) => string | null;
-export declare function inputColor4(label: string, value: ArrayLike<number>): boolean;
+/**
+ * Checkbox.
+ *
+ * @param label Label to display next to the checkbox.
+ * @param value Current value to set the checkbox to.
+ * @returns The new boolean value when changed by the user this frame, otherwise `null`.
+ *
+ * @example
+ *     const n = ui.checkbox("change this:", myBool);
+ *     if(n !== null) myBool = n;
+ */
+export declare const checkbox: (label: string, value: boolean) => boolean | null;
+/**
+ * Color picker for RGBA color.
+ *
+ * @param label Label to display next to the picker.
+ * @param value Value to be in-place edited.
+ * @returns `true` if changed by the user this frame, `false` otherwise.
+ *
+ * @example
+ *     const col = new Float32Array(4);
+ *     if(ui.colorEdit4("My color:", col)) {
+ *         console.log("Changed!");
+ *     }
+ */
+export declare const colorEdit4: (label: string, value: Float32Array) => boolean;
+/**
+ * Dummy element (space).
+ *
+ * @param width Width of the dummy element
+ * @param height Height of the dummy element
+ */
 export declare const dummy: (width: number, height: number) => void;
+/**
+ * Draw next widget on the same line.
+ *
+ * @param offset Offset on the x axis.
+ */
 export declare const sameLine: (offset: number) => void;
+/** Separator line. */
+export declare const separator: () => void;
+/** Begin a widget group. */
+export declare const beginGroup: () => void;
+/** End a widget group. */
+export declare const endGroup: () => void;

package/dist/ui.js

@@ -1,3 +1,4 @@
+import { awaitJob } from './tools.js';
 const ui = _wl_internalBinding('ui');
 /** Image to be used in the {@ref Ui}. */
 export class UiImage {
@@ -23,7 +24,7 @@ export const label = ui.label.bind(ui);
  * @example
  * In a draw function of a plugin, use as follows:
  * ```ts
- * if(WLE.button('Click me!')) {
+ * if(ui.button('Click me!')) {
  *     console.log('You clicked the button.');
  * }
  * ```
@@ -39,41 +40,85 @@ export const button = ui.button.bind(ui);
  * In a draw function of a plugin, use as follows:
  * ```ts
  * this.thumbnail = null;
- * loadUiImage("cache/plugins/my-plugin/downloads/thumbnail.png")
+ * loadImage(fs.readFileSync("cache/plugins/my-plugin/downloads/thumbnail.png"))
  *     .then((img) => this.thumbnail = img);
  * ```
  *
  * @see image()
  */
-export function loadUiImage(filepath) {
-    // Wrapper around a GL::Texture. People will be tempted calling
-    // this in weird places, so better just throw it on the JobSystem
-    // for the MainThread and spread it over time.
-    return new Promise((resolve, reject) => {
-        ui.loadImage(filepath, (id) => {
-            if (id < 0) {
-                reject();
-                return;
-            }
-            resolve(new UiImage(id));
-        });
-    });
+export async function loadImage(data) {
+    if (!(data instanceof ArrayBuffer)) {
+        const converted = new Uint8Array(data.byteLength);
+        for (let i = 0; i < data.byteLength; ++i) {
+            converted[i] = data[i];
+        }
+        data = converted.buffer;
+    }
+    /* Wrapper around a GL::Texture. People will be tempted calling
+     * this in weird places, so better just throw it on the JobSystem
+     * for the MainThread and spread it over time. */
+    const [job, imageId] = ui.loadImage(data);
+    await awaitJob(job);
+    return new UiImage(imageId);
 }
 export function image(image, width, height) {
-    // Since ImGui expects GL::Texture, we load the image for the user
-    // from filepath. Avoids them pulling in pngjs and other mistakes
+    /* Since ImGui expects GL::Texture, we load the image for the user
+     * from filepath. Avoids them pulling in pngjs and other mistakes */
     return ui.image(image._id, width, height);
 }
 /**
  * Text input field.
  *
- * @usage
- * s = ui.inputText("change this:", s) || s;
+ * @param label Label to display next to the field.
+ * @param value Current value to set the field to.
+ * @returns The new string value when changed by the user this frame, otherwise `null`.
+ *
+ * @example
+ *     s = ui.inputText("change this:", s) || s;
  */
 export const inputText = ui.inputText.bind(ui);
-export function inputColor4(label, value) {
-    // We can in-place edit Float32Array, probably even number array
-    return false;
-}
+/**
+ * Checkbox.
+ *
+ * @param label Label to display next to the checkbox.
+ * @param value Current value to set the checkbox to.
+ * @returns The new boolean value when changed by the user this frame, otherwise `null`.
+ *
+ * @example
+ *     const n = ui.checkbox("change this:", myBool);
+ *     if(n !== null) myBool = n;
+ */
+export const checkbox = ui.checkbox.bind(ui);
+/**
+ * Color picker for RGBA color.
+ *
+ * @param label Label to display next to the picker.
+ * @param value Value to be in-place edited.
+ * @returns `true` if changed by the user this frame, `false` otherwise.
+ *
+ * @example
+ *     const col = new Float32Array(4);
+ *     if(ui.colorEdit4("My color:", col)) {
+ *         console.log("Changed!");
+ *     }
+ */
+export const colorEdit4 = ui.colorEdit4.bind(ui);
+/**
+ * Dummy element (space).
+ *
+ * @param width Width of the dummy element
+ * @param height Height of the dummy element
+ */
 export const dummy = ui.dummy.bind(ui);
+/**
+ * Draw next widget on the same line.
+ *
+ * @param offset Offset on the x axis.
+ */
 export const sameLine = ui.sameLine.bind(ui);
+/** Separator line. */
+export const separator = ui.separator.bind(ui);
+/** Begin a widget group. */
+export const beginGroup = ui.beginGroup.bind(ui);
+/** End a widget group. */
+export const endGroup = ui.endGroup.bind(ui);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wonderlandengine/editor-api",
-  "version": "1.2.0-dev.0",
+  "version": "1.2.0-dev.1",
   "description": "Wonderland Engine's Editor API for plugins - very experimental.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -31,7 +31,7 @@
     "pretty": "prettier --config ./prettierrc.json --write ./src",
     "doc": "typedoc --entryPoints ./src/index.ts --tsconfig tsconfig.json --json ./doc.json",
     "json-diff": "npm run defaults && npx json-diff ../../src/WonderlandEditor/defaults.json defaults.json",
-    "prepublishOnly": "npm run build"
+    "prepack": "npm run build"
   },
   "peerDependencies": {},
   "devDependencies": {