@needle-tools/engine 5.0.0 → 5.1.0-experimental.0

package/lib/engine-components/ui/Graphic.legacy.js

@@ -0,0 +1,268 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Color, LinearSRGBColorSpace, Texture } from 'three';
+import SimpleStateBehavior from "three-mesh-ui/examples/behaviors/states/SimpleStateBehavior.js";
+import { serializable } from '../../engine/engine_serialization_decorator.js';
+import { NEEDLE_progressive } from '../../engine/extensions/NEEDLE_progressive.js';
+import { RGBAColor } from "../../engine/js-extensions/index.js";
+import { GameObject } from '../Component.js';
+import { BaseUIComponent } from "./BaseUIComponent.js";
+import { Outline } from './Outline.js';
+import { RectTransform } from './RectTransform.js';
+import { onChange, scheduleAction } from "./Utils.js";
+const _colorStateObject = {
+    backgroundColor: new Color(1, 1, 1),
+    backgroundOpacity: 1,
+    borderColor: new Color(1, 1, 1),
+    borderOpacity: 1,
+};
+/**
+ * @category User Interface
+ * @group Components
+ */
+export class Graphic extends BaseUIComponent {
+    get isGraphic() { return true; }
+    get color() {
+        if (!this._color)
+            this._color = new RGBAColor(1, 1, 1, 1);
+        return this._color;
+    }
+    set color(col) {
+        const changed = !this._color || this._color.r !== col.r || this._color.g !== col.g || this._color.b !== col.b || this._color.alpha !== col.alpha;
+        if (!changed)
+            return;
+        if (!this._color) {
+            this._color = new RGBAColor(1, 1, 1, 1);
+        }
+        this._color.copy(col);
+        this.onColorChanged();
+    }
+    _alphaFactor = 1;
+    setAlphaFactor(factor) {
+        this._alphaFactor = factor;
+        this.onColorChanged();
+    }
+    get alphaFactor() {
+        return this._alphaFactor;
+    }
+    sRGBColor = new Color(1, 0, 1);
+    onColorChanged() {
+        if (this.uiObject) {
+            this.sRGBColor.copy(this._color);
+            this.sRGBColor.convertLinearToSRGB();
+            _colorStateObject.backgroundColor = this.sRGBColor;
+            _colorStateObject.backgroundOpacity = this._color.alpha;
+            // E.g. when a button is setting states, we need to merge the state color with the base color
+            const activeStateName = this.uiObject["_simpleState__activeStates"]?.[0];
+            if (activeStateName) {
+                const active = this.uiObject["_simpleState__states"]?.[activeStateName];
+                if (active) {
+                    if ("backgroundColor" in active)
+                        _colorStateObject.backgroundColor = active["backgroundColor"];
+                    if ("backgroundOpacity" in active)
+                        _colorStateObject.backgroundOpacity = active["backgroundOpacity"];
+                }
+            }
+            _colorStateObject.backgroundOpacity *= this._alphaFactor;
+            this.applyEffects(_colorStateObject, this._alphaFactor);
+            this.uiObject.set(_colorStateObject);
+            this.markDirty();
+        }
+    }
+    // used via animations
+    get m_Color() {
+        return this._color;
+    }
+    raycastTarget = true;
+    uiObject = null;
+    _color = null;
+    _rect = null;
+    _stateManager = null;
+    get rectTransform() {
+        if (!this._rect) {
+            this._rect = GameObject.getComponent(this.gameObject, RectTransform);
+        }
+        if (!this._rect)
+            throw new Error("Not Supported: Make sure to add a RectTransform component before adding a UI Graphic component.");
+        return this._rect;
+    }
+    onParentRectTransformChanged() {
+        this.uiObject?.set({ width: this.rectTransform.width, height: this.rectTransform.height });
+        this.markDirty();
+    }
+    __internalNewInstanceCreated(init) {
+        super.__internalNewInstanceCreated(init);
+        this._rect = null;
+        this.uiObject = null;
+        this._stateManager = null;
+        if (this._color)
+            this._color = this._color.clone();
+        return this;
+    }
+    setState(state) {
+        this.makePanel();
+        if (this.uiObject) {
+            //@ts-ignore
+            this.uiObject.setState(state);
+            this?.markDirty();
+        }
+    }
+    setupState(state) {
+        this.makePanel();
+        if (this.uiObject) {
+            // @marwie : v7.x now have a concurrent state management in core mimicking html/css
+            // ie : (::firstChild::hover::disabled) where firstchild, hover and disabled are all on different channels
+            // In order to keep needle Raycaster and EventSystem intact, I added in v7 a SimpleStateBehavior, which acts as previously
+            if (!this._stateManager)
+                this._stateManager = new SimpleStateBehavior(this.uiObject);
+            //@ts-ignore
+            this.uiObject.setupState(state.state, state.attributes);
+        }
+    }
+    setOptions(opts) {
+        this.makePanel();
+        if (this.uiObject) {
+            //@ts-ignore
+            this.uiObject.set(opts);
+            // if (opts["backgroundColor"] !== undefined || opts["backgroundOpacity"] !== undefined)
+            //     this.uiObject["updateBackgroundMaterial"]?.call(this.uiObject);
+        }
+    }
+    awake() {
+        super.awake();
+        this.makePanel();
+        // when _color is written to
+        onChange(this, "_color", () => scheduleAction(this, this.onColorChanged));
+    }
+    onEnable() {
+        super.onEnable();
+        if (this.uiObject) {
+            this.rectTransform.shadowComponent?.add(this.uiObject);
+            this.addShadowComponent(this.uiObject, this.rectTransform);
+        }
+    }
+    onDisable() {
+        super.onDisable();
+        if (this.uiObject)
+            this.removeShadowComponent();
+    }
+    _currentlyCreatingPanel = false;
+    makePanel() {
+        if (this.uiObject)
+            return;
+        if (this._currentlyCreatingPanel)
+            return;
+        this._currentlyCreatingPanel = true;
+        const offset = .015;
+        // if (this.Root) offset = .02 * (1 / this.Root.gameObject.scale.z);
+        const opts = {
+            backgroundColor: this.color,
+            backgroundOpacity: this.color.alpha,
+            offset: offset, // without a tiny offset we get z fighting
+        };
+        this.onBeforeCreate(opts);
+        this.applyEffects(opts);
+        this.onCreate(opts);
+        this.controlsChildLayout = false;
+        this._currentlyCreatingPanel = false;
+        this.onAfterCreated();
+        this.onColorChanged();
+    }
+    onBeforeCreate(_opts) { }
+    onCreate(opts) {
+        this.uiObject = this.rectTransform.createNewBlock(opts);
+        this.uiObject.name = this.name;
+    }
+    onAfterCreated() { }
+    applyEffects(opts, alpha = 1) {
+        const outline = this.gameObject?.getComponent(Outline);
+        if (outline) {
+            if (outline.effectDistance)
+                opts.borderWidth = Math.max(Math.abs(outline.effectDistance.x), Math.abs(outline.effectDistance.y));
+            if (outline.effectColor) {
+                opts.borderColor = outline.effectColor;
+                opts.borderOpacity = outline.effectColor.alpha * alpha;
+            }
+        }
+    }
+    /** used internally to ensure textures assigned to UI use linear encoding */
+    static textureCache = new Map();
+    async setTexture(tex) {
+        this.setOptions({ backgroundOpacity: 0 });
+        if (tex) {
+            // workaround for https://github.com/needle-tools/needle-engine-support/issues/109
+            // if (tex.colorSpace === SRGBColorSpace || !tex.colorSpace || true) {
+            if (Graphic.textureCache.has(tex)) {
+                tex = Graphic.textureCache.get(tex);
+            }
+            else {
+                if (tex.isRenderTargetTexture) {
+                    // we can not clone the texture if it's a render target
+                    // otherwise it won't be updated anymore in the UI
+                    // TODO: below maskable graphic is flipped but settings a rendertexture results in the texture being upside down. 
+                    // we should remove the flip below (scale.y *= -1) but this needs to be tested with all UI components
+                }
+                else {
+                    const clone = tex.clone();
+                    clone.colorSpace = LinearSRGBColorSpace;
+                    Graphic.textureCache.set(tex, clone);
+                    tex = clone;
+                }
+            }
+            // }
+            this.setOptions({ backgroundImage: tex, borderRadius: 0, backgroundOpacity: this.color.alpha, backgroundSize: "stretch" });
+            NEEDLE_progressive.assignTextureLOD(tex, 0).then(res => {
+                if (res instanceof Texture) {
+                    if (tex)
+                        Graphic.textureCache.set(tex, res);
+                    this.setOptions({ backgroundImage: res });
+                    this.markDirty();
+                }
+            });
+        }
+        else {
+            this.setOptions({ backgroundImage: undefined, borderRadius: 0, backgroundOpacity: this.color.alpha });
+        }
+        this.markDirty();
+    }
+    onAfterAddedToScene() {
+        super.onAfterAddedToScene();
+        if (this.shadowComponent) {
+            // @TODO: I think we dont even need this anymore and this leads to the offset being applied twice
+            //@ts-ignore
+            this.shadowComponent.offset = this.shadowComponent.position.z;
+            // console.log(this.shadowComponent);
+            // setTimeout(()=>{
+            //     this.shadowComponent?.traverse(c => {
+            //         console.log(c);
+            //         if(c.material) c.material.depthTest = false;
+            //     });
+            // },1000);
+        }
+    }
+}
+__decorate([
+    serializable(RGBAColor)
+], Graphic.prototype, "color", null);
+__decorate([
+    serializable()
+], Graphic.prototype, "raycastTarget", void 0);
+/**
+ * @category User Interface
+ * @group Components
+ */
+export class MaskableGraphic extends Graphic {
+    _flippedObject = false;
+    onAfterCreated() {
+        // flip image
+        if (this.uiObject && !this._flippedObject) {
+            this._flippedObject = true;
+            this.uiObject.scale.y *= -1;
+        }
+    }
+}
+//# sourceMappingURL=Graphic.legacy.js.map

package/lib/engine-components/ui/Graphic.legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graphic.legacy.js","sourceRoot":"","sources":["../../../src/engine-components/ui/Graphic.legacy.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/GraphicUikit.d.ts

@@ -0,0 +1,21 @@
+import { type ContainerProperties } from "@pmndrs/uikit";
+import { RGBAColor } from "../../engine/js-extensions/index.js";
+import { BaseUikitComponent } from "./BaseUikitComponent.js";
+/**
+ * GraphicUikit is a UI component that displays a colored rectangle using pmndrs/uikit.
+ * It's the uikit equivalent of the Graphic component.
+ *
+ * @summary Display a colored rectangle in the UI using uikit
+ * @category User Interface
+ * @group Components
+ */
+export declare class GraphicUikit extends BaseUikitComponent {
+    get color(): RGBAColor;
+    set color(col: RGBAColor);
+    raycastTarget: boolean;
+    private _color;
+    private _sRGBColor;
+    protected getUikitProperties(): ContainerProperties;
+    private onColorChanged;
+    private updateColorForUikit;
+}

package/lib/engine-components/ui/GraphicUikit.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Color } from "three";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { RGBAColor } from "../../engine/js-extensions/index.js";
+import { BaseUikitComponent } from "./BaseUikitComponent.js";
+/**
+ * GraphicUikit is a UI component that displays a colored rectangle using pmndrs/uikit.
+ * It's the uikit equivalent of the Graphic component.
+ *
+ * @summary Display a colored rectangle in the UI using uikit
+ * @category User Interface
+ * @group Components
+ */
+export class GraphicUikit extends BaseUikitComponent {
+    get color() {
+        if (!this._color)
+            this._color = new RGBAColor(1, 1, 1, 1);
+        return this._color;
+    }
+    set color(col) {
+        const changed = !this._color || this._color.r !== col.r || this._color.g !== col.g || this._color.b !== col.b || this._color.alpha !== col.alpha;
+        if (!changed)
+            return;
+        if (!this._color) {
+            this._color = new RGBAColor(1, 1, 1, 1);
+        }
+        this._color.copy(col);
+        this.onColorChanged();
+    }
+    raycastTarget = true;
+    _color = null;
+    _sRGBColor = new Color();
+    getUikitProperties() {
+        this.updateColorForUikit();
+        return {
+            backgroundColor: `#${this._sRGBColor.getHexString()}`,
+            backgroundOpacity: this._color?.alpha ?? 1,
+        };
+    }
+    onColorChanged() {
+        this.updateColorForUikit();
+        this.updateUikitProperties({
+            backgroundColor: `#${this._sRGBColor.getHexString()}`,
+            backgroundOpacity: this._color.alpha,
+        });
+    }
+    updateColorForUikit() {
+        if (this._color) {
+            this._sRGBColor.copy(this._color);
+            this._sRGBColor.convertLinearToSRGB();
+        }
+    }
+}
+__decorate([
+    serializable(RGBAColor)
+], GraphicUikit.prototype, "color", null);
+__decorate([
+    serializable()
+], GraphicUikit.prototype, "raycastTarget", void 0);
+//# sourceMappingURL=GraphicUikit.js.map

package/lib/engine-components/ui/GraphicUikit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphicUikit.js","sourceRoot":"","sources":["../../../src/engine-components/ui/GraphicUikit.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAG9B,OAAO,EAAE,YAAY,EAAE,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,kBAAkB;IAGhD,IAAI,KAAK;QACL,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAI,KAAK,CAAC,GAAc;QACpB,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,CAAC;QACjJ,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACd,IAAI,CAAC,MAAM,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;SAC3C;QACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAGD,aAAa,GAAY,IAAI,CAAC;IAEtB,MAAM,GAAc,IAAK,CAAC;IAC1B,UAAU,GAAU,IAAI,KAAK,EAAE,CAAC;IAE9B,kBAAkB;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,OAAO;YACH,eAAe,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,EAAE;YACrD,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC;SAC7C,CAAC;IACN,CAAC;IAEO,cAAc;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,qBAAqB,CAAC;YACvB,eAAe,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,EAAE;YACrD,iBAAiB,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK;SACvC,CAAC,CAAC;IACP,CAAC;IAEO,mBAAmB;QACvB,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAClC,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,CAAC;SACzC;IACL,CAAC;CACJ;AA1CG;IADC,YAAY,CAAC,SAAS,CAAC;yCAIvB;AAYD;IADC,YAAY,EAAE;mDACe"}

package/lib/engine-components/ui/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/engine-components/ui/Image.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/engine-components/ui/Image.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/Image.legacy.d.ts

@@ -0,0 +1,39 @@
+import { Texture } from 'three';
+import { MaskableGraphic } from './Graphic.js';
+declare class Sprite {
+    texture: Texture | null;
+    rect?: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Image is a UI component that displays a sprite (2D image) in the user interface.
+ * You can set the image property to assign a texture to be displayed.
+ * The sprite can be customized with various properties such as color tinting and pixel density.
+ * @summary Display a 2D image in the UI
+ * @category User Interface
+ * @group Components
+ */
+export declare class Image extends MaskableGraphic {
+    set image(img: Texture | null);
+    get image(): Texture | null;
+    get sprite(): Sprite | undefined;
+    set sprite(sprite: Sprite | undefined);
+    private _sprite?;
+    private pixelsPerUnitMultiplier;
+    private isBuiltinSprite;
+    protected onBeforeCreate(opts: any): void;
+    protected onAfterCreated(): void;
+}
+/**
+ * @category User Interface
+ * @group Components
+ */
+export declare class RawImage extends MaskableGraphic {
+    get mainTexture(): Texture | undefined;
+    set mainTexture(texture: Texture | undefined);
+    private _mainTexture?;
+    protected onAfterCreated(): void;
+}
+export {};

package/lib/engine-components/ui/Image.legacy.js

@@ -0,0 +1,121 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Texture } from 'three';
+import { serializable } from '../../engine/engine_serialization_decorator.js';
+import { MaskableGraphic } from './Graphic.js';
+class Sprite {
+    texture = null;
+    rect;
+}
+__decorate([
+    serializable(Texture)
+], Sprite.prototype, "texture", void 0);
+/**
+ * Image is a UI component that displays a sprite (2D image) in the user interface.
+ * You can set the image property to assign a texture to be displayed.
+ * The sprite can be customized with various properties such as color tinting and pixel density.
+ * @summary Display a 2D image in the UI
+ * @category User Interface
+ * @group Components
+ */
+export class Image extends MaskableGraphic {
+    set image(img) {
+        if (!this.sprite)
+            this.sprite = new Sprite();
+        this.sprite.texture = img;
+        this.onAfterCreated();
+    }
+    get image() {
+        if (this.sprite)
+            return this.sprite.texture;
+        return null;
+    }
+    get sprite() {
+        return this._sprite;
+    }
+    set sprite(sprite) {
+        if (this._sprite === sprite)
+            return;
+        this._sprite = sprite;
+        this.onAfterCreated();
+    }
+    _sprite;
+    pixelsPerUnitMultiplier = 1;
+    isBuiltinSprite() {
+        const sprite = this.sprite;
+        switch (sprite?.texture?.name) {
+            case "InputFieldBackground":
+            case "UISprite":
+            case "Background":
+            case "Knob":
+                return true;
+        }
+        // this is a hack/workaround for production builds where the name of the sprite is missing
+        // need to remove this!!!!
+        if (!sprite?.texture?.name?.length && sprite?.texture?.image?.width === 32 && sprite?.texture?.image?.height === 32)
+            return true;
+        return false;
+    }
+    onBeforeCreate(opts) {
+        super.onBeforeCreate(opts);
+        if (this.isBuiltinSprite()) {
+            opts.borderRadius = 5 / this.pixelsPerUnitMultiplier;
+            if (this.sprite?.texture?.name === "Knob") {
+                opts.borderRadius = 999;
+            }
+            // opts.borderColor = new Color(.4, .4, .4);
+            // opts.borderOpacity = this.color.alpha;
+            // opts.borderWidth = .3;
+        }
+    }
+    onAfterCreated() {
+        if (!this.__didAwake)
+            return;
+        super.onAfterCreated();
+        // TODO: @swingingtom setting a built-in sprite at runtime doesnt update the image
+        if (this.isBuiltinSprite())
+            return;
+        this.setTexture(this.sprite?.texture);
+    }
+}
+__decorate([
+    serializable(Sprite)
+], Image.prototype, "sprite", null);
+__decorate([
+    serializable()
+], Image.prototype, "pixelsPerUnitMultiplier", void 0);
+/**
+ * @category User Interface
+ * @group Components
+ */
+export class RawImage extends MaskableGraphic {
+    get mainTexture() {
+        return this._mainTexture;
+    }
+    set mainTexture(texture) {
+        if (this._mainTexture === texture)
+            return;
+        this._mainTexture = texture;
+        this.onAfterCreated();
+    }
+    _mainTexture;
+    onAfterCreated() {
+        if (!this.__didAwake)
+            return;
+        super.onAfterCreated();
+        // console.log(this);
+        // if (this.mainTexture) {
+        //     this.mainTexture.flipY = true;
+        //     this.mainTexture.needsUpdate = true;
+        // }
+        this.setTexture(this.mainTexture);
+    }
+}
+__decorate([
+    serializable(Texture)
+], RawImage.prototype, "mainTexture", null);
+//# sourceMappingURL=Image.legacy.js.map

package/lib/engine-components/ui/Image.legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.legacy.js","sourceRoot":"","sources":["../../../src/engine-components/ui/Image.legacy.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/ImageUikit.d.ts

@@ -0,0 +1,22 @@
+import { Texture } from "three";
+import { type ContainerProperties } from "@pmndrs/uikit";
+import { GraphicUikit } from "./GraphicUikit.js";
+/**
+ * ImageUikit is a UI component that displays an image using pmndrs/uikit.
+ * It's the uikit equivalent of the Image/RawImage component.
+ *
+ * @summary Display an image in the UI using uikit
+ * @category User Interface
+ * @group Components
+ */
+export declare class ImageUikit extends GraphicUikit {
+    get texture(): Texture | null;
+    set texture(tex: Texture | null);
+    private _texture;
+    private _uikitImageElement;
+    protected createUikitElement(): void;
+    protected getUikitProperties(): ContainerProperties;
+    private createImageElement;
+    private updateTexture;
+    onDestroy(): void;
+}