@m2c2kit/addons 0.3.26 → 0.3.27

package/dist/index.d.ts

@@ -1252,4 +1252,118 @@ declare class LocalePicker extends Composite {
     duplicate(newName?: string): LocalePicker;
 }
 
-export { Button, type ButtonOptions, CountdownScene, type CountdownSceneOptions, CountdownTimer, type CountdownTimerEvent, type CountdownTimerOptions, Dialog, type DialogEvent, type DialogOptions, DialogResult, DrawPad, type DrawPadEvent, DrawPadEventType, type DrawPadItem, type DrawPadItemEvent, DrawPadItemEventType, type DrawPadOptions, type DrawPadStroke, Grid, type GridChild, type GridOptions, type InstructionScene, Instructions, type InstructionsOptions, type KeyConfiguration, type KeyTapMetadata, type LocaleOption, LocalePicker, type LocalePickerEvent, type LocalePickerIcon, type LocalePickerOptions, type LocalePickerResult, type StrokeInteraction, type TimerShape, VirtualKeyboard, type VirtualKeyboardEvent, type VirtualKeyboardOptions, type VirtualKeyboardRow };
+interface SliderOptions extends CompositeOptions {
+    /** The size of the track that the thumb moves along. */
+    trackSize?: Size;
+    /** The color of the track. */
+    trackColor?: RgbaColor;
+    /** The size of the thumb that the user drags. */
+    thumbSize?: Size;
+    /** The color of the thumb. */
+    thumbColor?: RgbaColor;
+    /** The minimum value of the slider. */
+    min?: number;
+    /** The maximum value of the slider. */
+    max?: number;
+    /** The initial value of the slider. */
+    value?: number;
+}
+interface SliderEvent extends CompositeEvent {
+    type: "Composite";
+    compositeType: "Slider";
+    compositeEventType: "SliderValueChanged";
+    target: Slider | string;
+    value: number;
+}
+declare class Slider extends Composite implements SliderOptions {
+    readonly compositeType = "Slider";
+    private originalOptions;
+    private _trackSize;
+    private _trackColor;
+    private _thumbSize;
+    private _thumbColor;
+    private _min;
+    private _max;
+    private _value;
+    private thumbLabel?;
+    private _thumbShape?;
+    private get thumbShape();
+    private set thumbShape(value);
+    /**
+     * A slider to select a value from a range by dragging a thumb along a track.
+     *
+     * @experimental Slider is a work in progress and will change in future versions.
+     *
+     * @param options - {@link SliderOptions}
+     */
+    constructor(options: SliderOptions);
+    get completeNodeOptions(): {
+        /** The size of the track that the thumb moves along. */
+        trackSize?: Size;
+        /** The color of the track. */
+        trackColor?: RgbaColor;
+        /** The size of the thumb that the user drags. */
+        thumbSize?: Size;
+        /** The color of the thumb. */
+        thumbColor?: RgbaColor;
+        /** The minimum value of the slider. */
+        min?: number;
+        /** The maximum value of the slider. */
+        max?: number;
+        /** The initial value of the slider. */
+        value?: number;
+        name?: string;
+        position?: _m2c2kit_core.Point;
+        scale?: number;
+        alpha?: number;
+        zRotation?: number;
+        isUserInteractionEnabled?: boolean;
+        draggable?: boolean;
+        hidden?: boolean;
+        layout?: _m2c2kit_core.Layout;
+        uuid?: string;
+        suppressEvents?: boolean;
+        anchorPoint?: _m2c2kit_core.Point;
+        zPosition?: number;
+    };
+    initialize(): void;
+    updateThumbLabel(): void;
+    /**
+     * Executes a callback when the slider value changes.
+     *
+     * @param callback - function to execute
+     * @param options
+     */
+    onValueChanged(callback: (sliderEvent: SliderEvent) => void, options?: CallbackOptions): void;
+    private addSliderEventListener;
+    get trackSize(): Size;
+    set trackSize(value: Size);
+    get trackColor(): RgbaColor;
+    set trackColor(value: RgbaColor);
+    get thumbSize(): Size;
+    set thumbSize(value: Size);
+    get thumbColor(): RgbaColor;
+    set thumbColor(value: RgbaColor);
+    get value(): number;
+    set value(value: number);
+    get min(): number;
+    set min(value: number);
+    get max(): number;
+    set max(value: number);
+    /**
+     * Duplicates a node using deep copy.
+     *
+     * @remarks This is a deep recursive clone (node and children).
+     * The uuid property of all duplicated nodes will be newly created,
+     * because uuid must be unique.
+     *
+     * @param newName - optional name of the new, duplicated node. If not
+     * provided, name will be the new uuid
+     */
+    duplicate(newName?: string | undefined): Slider;
+    update(): void;
+    draw(canvas: Canvas): void;
+    warmup(canvas: Canvas): void;
+}
+
+export { Button, type ButtonOptions, CountdownScene, type CountdownSceneOptions, CountdownTimer, type CountdownTimerEvent, type CountdownTimerOptions, Dialog, type DialogEvent, type DialogOptions, DialogResult, DrawPad, type DrawPadEvent, DrawPadEventType, type DrawPadItem, type DrawPadItemEvent, DrawPadItemEventType, type DrawPadOptions, type DrawPadStroke, Grid, type GridChild, type GridOptions, type InstructionScene, Instructions, type InstructionsOptions, type KeyConfiguration, type KeyTapMetadata, type LocaleOption, LocalePicker, type LocalePickerEvent, type LocalePickerIcon, type LocalePickerOptions, type LocalePickerResult, Slider, type SliderEvent, type SliderOptions, type StrokeInteraction, type TimerShape, VirtualKeyboard, type VirtualKeyboardEvent, type VirtualKeyboardOptions, type VirtualKeyboardRow };

package/dist/index.js

@@ -3453,7 +3453,299 @@ M2c2KitHelpers.registerM2NodeClass(
   CountdownTimer
 );
 
-console.log("\u26AA @m2c2kit/addons version 0.3.26 (1ed4ac2a)");
+class Slider extends Composite {
+  /**
+   * A slider to select a value from a range by dragging a thumb along a track.
+   *
+   * @experimental Slider is a work in progress and will change in future versions.
+   *
+   * @param options - {@link SliderOptions}
+   */
+  constructor(options) {
+    super(options);
+    this.compositeType = "Slider";
+    this._trackSize = { width: 250, height: 10 };
+    this._trackColor = WebColors.Black;
+    this._thumbSize = { width: 20, height: 40 };
+    this._thumbColor = WebColors.DarkGray;
+    this._min = 0;
+    this._max = 100;
+    this._value = (this.max - this.min) / 2;
+    this.originalOptions = JSON.parse(JSON.stringify(options));
+    if (options.trackSize) {
+      this.trackSize = options.trackSize;
+    }
+    if (options.trackColor) {
+      this.trackColor = options.trackColor;
+    }
+    if (options.thumbSize) {
+      this.thumbSize = options.thumbSize;
+    }
+    if (options.thumbColor) {
+      this.thumbColor = options.thumbColor;
+    }
+    if (options.min !== void 0) {
+      this.min = options.min;
+    }
+    if (options.max !== void 0) {
+      this.max = options.max;
+    }
+    if (options.value !== void 0) {
+      this.value = options.value;
+    }
+    this.saveNodeNewEvent();
+  }
+  get thumbShape() {
+    if (this._thumbShape === void 0) {
+      throw new Error("thumbShape is not defined.");
+    }
+    return this._thumbShape;
+  }
+  set thumbShape(value) {
+    this._thumbShape = value;
+  }
+  get completeNodeOptions() {
+    return {
+      ...this.options,
+      ...this.getNodeOptions(),
+      ...this.getDrawableOptions(),
+      ...this.originalOptions
+    };
+  }
+  initialize() {
+    this.removeAllChildren();
+    const trackShape = new Shape({
+      rect: {
+        width: this.trackSize.width,
+        height: this.trackSize.height
+      },
+      cornerRadius: 8,
+      fillColor: this.trackColor
+    });
+    this.addChild(trackShape);
+    this.thumbShape = new Shape({
+      rect: {
+        width: this.thumbSize.width,
+        height: this.thumbSize.height
+      },
+      cornerRadius: 8,
+      fillColor: this.thumbColor,
+      isUserInteractionEnabled: true,
+      draggable: true,
+      zPosition: 1,
+      position: {
+        x: this.value * this.trackSize.width / (this.max - this.min) - this.trackSize.width / 2,
+        y: 0
+      }
+    });
+    trackShape.addChild(this.thumbShape);
+    const trackZoneShape = new Shape({
+      rect: {
+        width: this.trackSize.width,
+        height: this.thumbSize.height
+      },
+      // during development, it is useful to make this visible
+      // fillColor: WebColors.Red,
+      // alpha: 0.05,
+      alpha: 0,
+      isUserInteractionEnabled: true,
+      zPosition: 0
+    });
+    trackShape.addChild(trackZoneShape);
+    trackZoneShape.onTapDown((e) => {
+      this.thumbShape.position.x = e.point.x - trackShape.size.width / 2;
+      this.updateThumbLabel();
+    });
+    const thumbZoneShape = new Shape({
+      rect: {
+        width: this.trackSize.width,
+        /**
+         * The thumbZoneShape is twice the height of the parent scene in case
+         * the slider is placed at the bottom or top of the screen. This
+         * ensures that thumbZoneShape is large enough to capture pointer
+         * events that are outside the bounds of the slider and on the parent
+         * scene.
+         */
+        height: this.parentSceneAsNode.size.height * 2
+      },
+      // during development, it is useful to make this visible
+      // fillColor: WebColors.Black,
+      // alpha: 0.008,
+      alpha: 0,
+      isUserInteractionEnabled: true
+    });
+    this.addChild(thumbZoneShape);
+    thumbZoneShape.onPointerMove(() => {
+      this.thumbShape.draggable = true;
+    });
+    thumbZoneShape.onPointerLeave(() => {
+      this.thumbShape.draggable = false;
+    });
+    this.thumbShape.onTapDown((e) => {
+      e.handled = true;
+      if (e.point.y !== 0) {
+        this.thumbShape.position.y = 0;
+      }
+      if (e.point.x < -this.trackSize.width / 2) {
+        this.thumbShape.position.x = -this.trackSize.width / 2;
+      }
+      if (e.point.x > this.trackSize.width / 2) {
+        this.thumbShape.position.x = this.trackSize.width / 2;
+      }
+      this.updateThumbLabel();
+    });
+    this.thumbShape.onDrag((e) => {
+      if (e.position.y !== 0) {
+        this.thumbShape.position.y = 0;
+      }
+      if (e.position.x < -this.trackSize.width / 2) {
+        this.thumbShape.position.x = -this.trackSize.width / 2;
+      }
+      if (e.position.x > this.trackSize.width / 2) {
+        this.thumbShape.position.x = this.trackSize.width / 2;
+      }
+      this.updateThumbLabel();
+    });
+    this.thumbShape.onDragEnd(() => {
+      const value = Math.round(
+        (this.thumbShape.position.x + this.trackSize.width / 2) / this.trackSize.width * (this.max - this.min)
+      );
+      this.thumbShape.position.x = value / (this.max - this.min) * this.trackSize.width - this.trackSize.width / 2;
+      this.updateThumbLabel();
+    });
+    this.needsInitialization = false;
+  }
+  updateThumbLabel() {
+    const value = (this.thumbShape.position.x + this.trackSize.width / 2) / this.trackSize.width * (this.max - this.min);
+    if (!this.thumbLabel) {
+      this.thumbLabel = new Label({
+        text: value.toString()
+      });
+      this.addChild(this.thumbLabel);
+    }
+    this.thumbLabel.text = Math.round(value).toString();
+    this.thumbLabel.position = {
+      x: this.thumbShape.position.x,
+      y: this.thumbShape.position.y - 30
+    };
+    if (this.thumbLabel) {
+      this.thumbLabel.position = {
+        x: this.thumbShape.position.x,
+        y: this.thumbShape.position.y - 30
+      };
+    }
+    const sliderEvent = {
+      type: M2EventType.Composite,
+      compositeType: "Slider",
+      compositeEventType: "SliderValueChanged",
+      target: this,
+      value,
+      ...M2c2KitHelpers.createTimestamps()
+    };
+    this.handleCompositeEvent(sliderEvent);
+    this.saveEvent(sliderEvent);
+    if (this.eventListeners.length > 0) {
+      this.eventListeners.filter(
+        (listener) => listener.type === M2EventType.Composite && listener.compositeType === this.compositeType && listener.compositeEventType === "SliderValueChanged"
+      ).forEach((listener) => {
+        listener.callback(sliderEvent);
+      });
+    }
+  }
+  /**
+   * Executes a callback when the slider value changes.
+   *
+   * @param callback - function to execute
+   * @param options
+   */
+  onValueChanged(callback, options) {
+    const eventListener = {
+      type: M2EventType.Composite,
+      compositeEventType: "SliderValueChanged",
+      compositeType: this.compositeType,
+      nodeUuid: this.uuid,
+      callback
+    };
+    this.addSliderEventListener(eventListener, options);
+  }
+  addSliderEventListener(eventListener, options) {
+    if (options?.replaceExisting) {
+      this.eventListeners = this.eventListeners.filter(
+        (listener) => !(listener.nodeUuid === eventListener.nodeUuid && listener.type === eventListener.type && listener.compositeType === eventListener.compositeType)
+      );
+    }
+    this.eventListeners.push(eventListener);
+  }
+  get trackSize() {
+    return this._trackSize;
+  }
+  set trackSize(value) {
+    this._trackSize = value;
+  }
+  get trackColor() {
+    return this._trackColor;
+  }
+  set trackColor(value) {
+    this._trackColor = value;
+  }
+  get thumbSize() {
+    return this._thumbSize;
+  }
+  set thumbSize(value) {
+    this._thumbSize = value;
+  }
+  get thumbColor() {
+    return this._thumbColor;
+  }
+  set thumbColor(value) {
+    this._thumbColor = value;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    this._value = value;
+  }
+  get min() {
+    return this._min;
+  }
+  set min(value) {
+    this._min = value;
+  }
+  get max() {
+    return this._max;
+  }
+  set max(value) {
+    this._max = value;
+  }
+  /**
+   * Duplicates a node using deep copy.
+   *
+   * @remarks This is a deep recursive clone (node and children).
+   * The uuid property of all duplicated nodes will be newly created,
+   * because uuid must be unique.
+   *
+   * @param newName - optional name of the new, duplicated node. If not
+   * provided, name will be the new uuid
+   */
+  duplicate(newName) {
+    throw new Error(`Method not implemented. ${newName}`);
+  }
+  update() {
+    super.update();
+  }
+  draw(canvas) {
+    super.drawChildren(canvas);
+  }
+  warmup(canvas) {
+    this.initialize();
+    this.children.filter((child) => child.isDrawable).forEach((child) => {
+      child.warmup(canvas);
+    });
+  }
+}
+
+console.log("\u26AA @m2c2kit/addons version 0.3.27 (622f7241)");
 
-export { Button, CountdownScene, CountdownTimer, Dialog, DialogResult, DrawPad, DrawPadEventType, DrawPadItemEventType, Grid, Instructions, LocalePicker, VirtualKeyboard };
+export { Button, CountdownScene, CountdownTimer, Dialog, DialogResult, DrawPad, DrawPadEventType, DrawPadItemEventType, Grid, Instructions, LocalePicker, Slider, VirtualKeyboard };
 //# sourceMappingURL=index.js.map