@zcomponent/core 1.1.0 → 1.3.0-beta

package/lib/behaviors/stream/SeekStream.js

@@ -0,0 +1,33 @@
+import { ActionBehavior, } from "../../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../../behavior";
+/**
+ * @zbehavior
+ * @zicon fast_forward
+ * @zgroup Stream Actions
+ */
+export class SeekStream extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+        /**
+         * @zprop
+         * @zgroup Stop Settings
+         * @zgrouppriority 20
+         * @zdefault 0
+         */
+        this.time = 0;
+    }
+    perform() {
+        if (!this.stream)
+            return;
+        const stream = this.zcomponent.resolveStreamID(this.stream);
+        if (!stream)
+            return;
+        stream.seek(this.time ?? 0);
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(SeekStream);

package/lib/behaviors/stream/StopStream.d.ts

@@ -0,0 +1,22 @@
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../../actionbehavior";
+import { Component } from "../../component";
+import { ContextManager } from "../../context";
+/**
+ * @zbehavior
+ * @zicon stop_circle
+ * @zgroup Stream Actions
+ */
+export declare class StopStream extends ActionBehavior {
+    private zcomponent;
+    /**
+     * @zprop
+     * @zgroup Stop Settings
+     * @zgrouppriority 20
+     * @zvalues streamids
+     */
+    stream: string | undefined;
+    constructor(contextManager: ContextManager, instance: Component, props: ActionBehaviorConstructorProps);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+}

package/lib/behaviors/stream/StopStream.js

@@ -0,0 +1,26 @@
+import { ActionBehavior, } from "../../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../../behavior";
+/**
+ * @zbehavior
+ * @zicon stop_circle
+ * @zgroup Stream Actions
+ */
+export class StopStream extends ActionBehavior {
+    constructor(contextManager, instance, props) {
+        super(contextManager, instance, props);
+        this.zcomponent = this.getZComponentInstance();
+    }
+    perform() {
+        if (!this.stream)
+            return;
+        const stream = this.zcomponent.resolveStreamID(this.stream);
+        if (!stream)
+            return;
+        stream.stop();
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+}
+registerBehaviorRunAtDesignTime(StopStream);

package/lib/components/Audio.d.ts

@@ -0,0 +1,59 @@
+import { PlayOptions, Stream } from "../animation";
+import { Component } from "../component";
+import { ContextManager } from "../context";
+import { Observable } from "../observable";
+export interface AudioConstructorProps {
+    /** @zprop
+     * @zvalues files *.+(mp3|wav)
+     */
+    source: string;
+    /**
+     * @zprop
+     * @zdefault default
+     */
+    audioLayer?: string;
+    /** @zprop
+     * @zdefault false
+     */
+    autoplay?: boolean;
+}
+/**
+ * @zcomponent
+ * @ztag core/audio
+ * @zgroup Media
+ * @zicon music_note
+ * @zstream
+ */
+export declare class Audio extends Component<undefined, AudioConstructorProps> implements Stream {
+    audioContext: AudioContext;
+    destination: AudioNode;
+    audioBuffer?: AudioBuffer;
+    private _gain;
+    private _playhead;
+    private _session?;
+    /** @zprop
+     * @zdefault false
+     * @zgroup Audio
+     * @zgrouppriority 20
+     */
+    muted: Observable<boolean, never>;
+    constructor(mgr: ContextManager, props: AudioConstructorProps);
+    private _load;
+    private _updateVolume;
+    /**
+     * @zprop
+     * @ztype proportion
+     * @zdefault 1
+     */
+    volume: Observable<number, never>;
+    /** @zprop */
+    play(opts?: PlayOptions): void;
+    /** @zprop */
+    pause(): void;
+    /** @zprop */
+    stop(): void;
+    /** @zprop */
+    seek(t: number): void;
+    length(): number | undefined;
+    dispose(): never;
+}

package/lib/components/Audio.js

@@ -0,0 +1,96 @@
+import { Component } from "../component";
+import { AudioContextContext, useAudioContext } from "../contexts/audiocontextcontext";
+import { isDesignTime } from "../contexts/environmentcontext";
+import { registerLoadable, started } from "../contexts/loadcontext";
+import { Observable } from "../observable";
+/**
+ * @zcomponent
+ * @ztag core/audio
+ * @zgroup Media
+ * @zicon music_note
+ * @zstream
+ */
+export class Audio extends Component {
+    constructor(mgr, props) {
+        super(mgr, props);
+        this._playhead = 0;
+        /** @zprop
+         * @zdefault false
+         * @zgroup Audio
+         * @zgrouppriority 20
+         */
+        this.muted = new Observable(false);
+        this._updateVolume = () => {
+            this._gain.gain.value = this.muted.value === true ? 0 : this.volume.value;
+        };
+        /**
+         * @zprop
+         * @ztype proportion
+         * @zdefault 1
+         */
+        this.volume = new Observable(1, this._updateVolume);
+        const audioContextContext = mgr.get(AudioContextContext);
+        this.audioContext = useAudioContext(mgr);
+        this._gain = this.audioContext.createGain();
+        this._gain.connect(audioContextContext.getLayer(props.audioLayer));
+        this.destination = this._gain;
+        registerLoadable(mgr, this._load());
+        if (!isDesignTime(this.contextManager) && props.autoplay)
+            started(mgr).then(() => this.play());
+    }
+    async _load() {
+        const source = this.constructorProps?.source;
+        if (!source)
+            return;
+        const data = await (await fetch(source)).arrayBuffer();
+        const audioContext = useAudioContext(this.contextManager);
+        this.audioBuffer = await audioContext.decodeAudioData(data);
+    }
+    /** @zprop */
+    play(opts) {
+        if (!this.audioBuffer)
+            return;
+        if (this._session)
+            this.stop();
+        if (this._playhead >= this.audioBuffer.duration)
+            this._playhead = 0;
+        const source = this.audioContext.createBufferSource();
+        source.buffer = this.audioBuffer;
+        source.playbackRate.value = opts?.speed ?? 1;
+        source.connect(this.destination);
+        const startedAt = this.audioContext.currentTime - (this._playhead / source.playbackRate.value);
+        source.start(0, this._playhead);
+        this._session = { source, startedAt };
+    }
+    /** @zprop */
+    pause() {
+        if (!this._session)
+            return;
+        this._playhead = this._session.source.playbackRate.value * (this.audioContext.currentTime - this._session.startedAt);
+        this._session.source.stop();
+        this._session.source.disconnect();
+        delete this._session;
+    }
+    /** @zprop */
+    stop() {
+        this.pause();
+        this._playhead = 0;
+    }
+    /** @zprop */
+    seek(t) {
+        let previousSession = this._session;
+        if (previousSession)
+            this.pause();
+        this._playhead = t / 1000;
+        if (previousSession)
+            this.play({ speed: previousSession.source.playbackRate.value });
+    }
+    length() {
+        return this.audioBuffer ? (this.audioBuffer.duration * 1000) : undefined;
+    }
+    dispose() {
+        this.stop();
+        this._gain.disconnect();
+        return super.dispose();
+    }
+}

package/lib/components/AudioLayerSettings.d.ts

@@ -0,0 +1,26 @@
+import { Component } from "../component";
+import { ContextManager } from "../context";
+import { Observable } from "../observable";
+interface AudioLayerSettingsConstuctorProps {
+    /**
+     * @zprop
+     * @zdefault default
+     */
+    layer?: string;
+}
+/**
+ * @zcomponent
+ * @ztag core/audiolayersettings
+ * @zgroup Media
+ * @zicon volume_up
+ */
+export declare class AudioLayerSettings extends Component<undefined, AudioLayerSettingsConstuctorProps> {
+    constructor(contextManager: ContextManager, props: AudioLayerSettingsConstuctorProps);
+    /**
+     * @zprop
+     * @ztype proportion
+     * @zdefault 1
+     */
+    volume: Observable<number, never>;
+}
+export {};

package/lib/components/AudioLayerSettings.js

@@ -0,0 +1,22 @@
+import { Component } from "../component";
+import { AudioContextContext } from "../contexts/audiocontextcontext";
+import { Observable } from "../observable";
+/**
+ * @zcomponent
+ * @ztag core/audiolayersettings
+ * @zgroup Media
+ * @zicon volume_up
+ */
+export class AudioLayerSettings extends Component {
+    constructor(contextManager, props) {
+        super(contextManager, props);
+        /**
+         * @zprop
+         * @ztype proportion
+         * @zdefault 1
+         */
+        this.volume = new Observable(1, v => {
+            this.contextManager.get(AudioContextContext).setVolumeForLayer(this.constructorProps?.layer, v);
+        });
+    }
+}

package/lib/contexts/audiocontextcontext.d.ts

@@ -0,0 +1,14 @@
+import { ContextManager, Context } from '../context';
+/** @zcontext */
+export declare class AudioContextContext extends Context {
+    constructorProps: {};
+    audioContext: AudioContext;
+    private _layers;
+    layers: Map<string, AudioNode>;
+    constructor(contextManager: ContextManager, constructorProps: {});
+    private _getLayer;
+    getLayer(name?: string): AudioNode;
+    setVolumeForLayer(name: string | undefined, v: number): void;
+    dispose(): never;
+}
+export declare function useAudioContext(ctx: ContextManager): AudioContext;

package/lib/contexts/audiocontextcontext.js

@@ -0,0 +1,38 @@
+import { Context } from '../context';
+import { nextUserEvent } from './usereventcontext';
+/** @zcontext */
+export class AudioContextContext extends Context {
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.constructorProps = constructorProps;
+        this.audioContext = new AudioContext();
+        this._layers = new Map();
+        this.layers = this._layers;
+        nextUserEvent(contextManager).then(() => {
+            this.audioContext.resume();
+        });
+    }
+    _getLayer(name) {
+        let existing = this._layers.get(name ?? 'default');
+        if (!existing) {
+            existing = new GainNode(this.audioContext);
+            existing.connect(this.audioContext.destination);
+            this._layers.set(name ?? 'default', existing);
+        }
+        return existing;
+    }
+    getLayer(name) {
+        return this._getLayer(name);
+    }
+    setVolumeForLayer(name, v) {
+        const layer = this._getLayer(name);
+        layer.gain.value = v;
+    }
+    dispose() {
+        this.audioContext.close();
+        return super.dispose();
+    }
+}
+export function useAudioContext(ctx) {
+    return ctx.get(AudioContextContext).audioContext;
+}

package/lib/data/animation.d.ts

@@ -119,12 +119,15 @@ export interface ClipTrackEntity {
 }
 export interface StreamTrack extends BaseTrack {
     type: TrackType.Stream;
+    name: string;
     data: ByID<StreamTrackEntity>;
     weight: ByID<Keyframe>;
+    property: (string | number)[];
 }
-export interface StreamTrackEntity extends BaseTrack {
+export interface StreamTrackEntity {
+    id: string;
     t0: number;
-    t1: number;
+    t1?: number;
     s0: number;
     rate: number;
 }
@@ -134,7 +137,8 @@ export interface FunctionTrack extends BaseTrack {
 }
 export type FunctionTrackEntity = EntityFunctionTrackEntity | ImportFunctionTrackEntity;
 export interface BaseFunctionTrackEntity {
-    order: string;
+    id: string;
+    t0: number;
     type: 'entity' | 'import';
     args: ByID<any>;
 }

package/lib/data/change.js

@@ -368,9 +368,20 @@ export function forEachNodeAncestor(zcomp, id, fn) {
     fn(node.parent.id);
     forEachNodeAncestor(zcomp, node.parent.id, fn);
 }
+const lastNumberRegex = new RegExp(/[0-9]*$/);
 export function getUniqueLabel(zcomp, label) {
+    lastNumberRegex.lastIndex = 0;
+    let startIndex = 1;
+    const result = lastNumberRegex.exec(label);
+    if (result && result.length === 1) {
+        const num = parseInt(result[0]);
+        if (!isNaN(num)) {
+            startIndex = num + 1;
+            label = label.substring(0, result.index);
+        }
+    }
     const existingLabels = zcomp.entitiesByLabel ?? {};
-    for (let i = 1; i < 10000; i++) {
+    for (let i = startIndex; i < 10000; i++) {
         const testName = i === 1 ? label : `${label} ${i.toString()}`;
         if (!Object.prototype.hasOwnProperty.call(existingLabels, testName)) {
             label = testName;

package/lib/index.d.ts

@@ -14,4 +14,5 @@ export * from './contexts/tagcontext';
 export * from './contexts/gamepadcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';
+export * from './contexts/audiocontextcontext';
 export * from './animation';

package/lib/index.js

@@ -14,6 +14,7 @@ export * from './contexts/tagcontext';
 export * from './contexts/gamepadcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';
+export * from './contexts/audiocontextcontext';
 export * from './animation';
 const link = document.createElement('link');
 link.setAttribute('rel', 'stylesheet');

package/lib/inflate.js

@@ -5,6 +5,7 @@ import { LayerClip } from './animation/layerclip';
 import { Layer } from './animation/layer';
 import { ClipTrack } from './animation/tracks/cliptrack';
 import { Bezier } from './animation/bezier';
+import { StreamTrack } from './animation/tracks/streamtrack';
 export function createTrackFromData(zcomp, anim, data) {
     switch (data.type) {
         case Data.TrackType.Property: {
@@ -27,6 +28,15 @@ export function createTrackFromData(zcomp, anim, data) {
             ret.setWeightsById(processKeyframes(data.weight, anim.curves));
             return ret;
         }
+        case Data.TrackType.Stream: {
+            const entity = zcomp.entityByID.get(data.entityID);
+            if (!entity)
+                return;
+            const ret = new StreamTrack(anim, entity, data.property);
+            ret.setBlocksById(data.data);
+            ret.setWeightsById(processKeyframes(data.weight, anim.curves));
+            return ret;
+        }
     }
     return undefined;
 }
@@ -84,7 +94,7 @@ export function createClipFromData(zcomp, anim, data) {
                         if (!keyframe)
                             continue;
                         length = Math.max(length, keyframe.t0);
-                        length = Math.max(length, keyframe.t1);
+                        length = Math.max(length, keyframe.t1 ?? length);
                     }
                     break;
                 case Data.TrackType.Stream:
@@ -92,7 +102,8 @@ export function createClipFromData(zcomp, anim, data) {
                         if (!keyframe)
                             continue;
                         length = Math.max(length, keyframe.t0);
-                        length = Math.max(length, keyframe.t1);
+                        if (keyframe.t1)
+                            length = Math.max(length, keyframe.t1);
                     }
                     break;
             }

package/lib/types.d.ts

@@ -71,10 +71,15 @@ export type Type = StringPrimitiveType | NumberPrimitiveType | BooleanPrimitiveT
 export declare enum TypeHint {
     'proportion' = "proportion",
     'color-norm-rgb' = "color-norm-rgb",
+    'color-norm-rgba' = "color-norm-rgba",
     'color-unnorm-rgb' = "color-unnorm-rgb",
+    'color-unnorm-rgba' = "color-unnorm-rgba",
     'color-hex' = "color-hex",
+    'color-hexa' = "color-hexa",
     'color-css' = "color-css",
-    'text-multiline' = "text-multiline"
+    'text-multiline' = "text-multiline",
+    'angle-degrees' = "angle-degrees",
+    'angle-radians' = "angle-radians"
 }
 export declare enum ValuesType {
     'files' = "files",
@@ -86,7 +91,8 @@ export declare enum ValuesType {
     'nodeids' = "nodeids",
     'layerclipids' = "layerclipids",
     'easings' = "easings",
-    'layerids' = "layerids"
+    'layerids' = "layerids",
+    'streamids' = "streamids"
 }
 export interface Values {
     type: ValuesType;
@@ -102,6 +108,7 @@ export interface Prop {
     values?: Values[];
     order?: number;
     priority?: number;
+    optional?: boolean;
 }
 export interface DefaultChild {
     label: string;
@@ -129,6 +136,10 @@ export interface ComponentInfo {
     allowedChildren: string[];
     allowedParents?: string[];
     defaultChildren?: DefaultChild[];
+    streams: StreamInfo[];
+    streamsObjects: {
+        [id: string]: string;
+    };
 }
 export interface ValueInfo {
     name: string;
@@ -144,6 +155,9 @@ export interface PreviewInfo {
     comments?: string[];
     filePattern: string;
 }
+export interface StreamInfo {
+    property: (string | number)[];
+}
 export interface SourceFileTypeInfo {
     components: {
         [id: string]: ComponentInfo;

package/lib/types.js

@@ -19,10 +19,15 @@ export var TypeHint;
 (function (TypeHint) {
     TypeHint["proportion"] = "proportion";
     TypeHint["color-norm-rgb"] = "color-norm-rgb";
+    TypeHint["color-norm-rgba"] = "color-norm-rgba";
     TypeHint["color-unnorm-rgb"] = "color-unnorm-rgb";
+    TypeHint["color-unnorm-rgba"] = "color-unnorm-rgba";
     TypeHint["color-hex"] = "color-hex";
+    TypeHint["color-hexa"] = "color-hexa";
     TypeHint["color-css"] = "color-css";
     TypeHint["text-multiline"] = "text-multiline";
+    TypeHint["angle-degrees"] = "angle-degrees";
+    TypeHint["angle-radians"] = "angle-radians";
 })(TypeHint || (TypeHint = {}));
 export var ValuesType;
 (function (ValuesType) {
@@ -36,6 +41,7 @@ export var ValuesType;
     ValuesType["layerclipids"] = "layerclipids";
     ValuesType["easings"] = "easings";
     ValuesType["layerids"] = "layerids";
+    ValuesType["streamids"] = "streamids";
 })(ValuesType || (ValuesType = {}));
 function valuesCompatible(l, r) {
     if (!l && !r)
@@ -99,7 +105,7 @@ export function areTypesCompatible(a, b) {
             }
             if (a.ret && !bt.ret)
                 return false;
-            if (!a.ret && !bt.ret)
+            if (!a.ret && bt.ret)
                 return false;
             if (a.ret && bt.ret)
                 return areTypesCompatible(a.ret, bt.ret);

package/lib/zcomponent.d.ts

@@ -1,4 +1,4 @@
-import { Animation } from './animation/index';
+import { Animation, Stream } from './animation/index';
 import { Component, ComponentChildren, ConstructorForComponent, ConstructorProps } from './component';
 import { ContextManager, Context } from './context';
 import { Entity } from './entity';
@@ -44,6 +44,12 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     constructed: Promise<void>;
     isConstructed: boolean;
     animation: Animation;
+    /**
+     * @zstreams layerclipids
+     */
+    streams: {
+        [id: string]: Stream;
+    };
     private _nodesById;
     private _behaviorsToInitialize;
     private _constructorPropOverridesByEntityID;
@@ -63,5 +69,6 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     private _setEntityProp;
     private _setEntityPropPath;
     _getNodeById(id: string): Component | undefined;
+    resolveStreamID(id: string): Stream | undefined;
     dispose(): never;
 }

package/lib/zcomponent.js

@@ -31,6 +31,10 @@ export class ZComponent extends Component {
         this.constructed = new Promise(resolve => this._constructedResolve = resolve);
         this.isConstructed = false;
         this.animation = new Animation(false);
+        /**
+         * @zstreams layerclipids
+         */
+        this.streams = {};
         this._nodesById = new Map();
         this._behaviorsToInitialize = [];
         this._constructorPropOverridesByEntityID = new Map();
@@ -60,6 +64,10 @@ export class ZComponent extends Component {
         if (this._opts.data.animation)
             populateAnimationTracksFromData(this, this.animation, this._opts.data.animation);
         this.animation.initialize();
+        for (const layerClip of this.animation.layerClipByID.values()) {
+            if (layerClip.id)
+                this.streams[layerClip.id] = layerClip;
+        }
         this.isConstructed = true;
         this._constructedResolve();
         started(contextManager).then(() => {
@@ -372,6 +380,18 @@ export class ZComponent extends Component {
     _getNodeById(id) {
         return this._nodesById.get(id);
     }
+    resolveStreamID(id) {
+        const parts = id.split('.');
+        let obj = this.entityByID.get(parts[0]);
+        if (!obj)
+            return undefined;
+        for (let i = 1; i < parts.length; i++) {
+            if (!obj)
+                return undefined;
+            obj = obj[parts[i]];
+        }
+        return obj;
+    }
     dispose() {
         this.animation.dispose();
         for (const entity of this.entityByID.values()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "1.1.0",
+  "version": "1.3.0-beta",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",