@m2c2kit/addons 0.3.26 → 0.3.28

package/LICENSE

@@ -1,21 +1,13 @@
-MIT License
+Copyright 2023 Scott T. Yabiku
 
-Copyright (c) 2023 Scott T. Yabiku
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+    http://www.apache.org/licenses/LICENSE-2.0
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -1,6 +1,6 @@
 # @m2c2kit/addons
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![License: Apache-2.0](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://opensource.org/license/apache-2-0)
 [![CI/CD](https://github.com/m2c2-project/m2c2kit/actions/workflows/ci.yml/badge.svg)](https://github.com/m2c2-project/m2c2kit/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/@m2c2kit/addons.svg)](https://www.npmjs.com/package/@m2c2kit/addons)
 

package/dist/index.d.ts

@@ -1252,4 +1252,119 @@ 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, CountdownScene, CountdownTimer, Dialog, DialogResult, DrawPad, DrawPadEventType, DrawPadItemEventType, Grid, Instructions, LocalePicker, Slider, VirtualKeyboard };
+export type { ButtonOptions, CountdownSceneOptions, CountdownTimerEvent, CountdownTimerOptions, DialogEvent, DialogOptions, DrawPadEvent, DrawPadItem, DrawPadItemEvent, DrawPadOptions, DrawPadStroke, GridChild, GridOptions, InstructionScene, InstructionsOptions, KeyConfiguration, KeyTapMetadata, LocaleOption, LocalePickerEvent, LocalePickerIcon, LocalePickerOptions, LocalePickerResult, SliderEvent, SliderOptions, StrokeInteraction, TimerShape, VirtualKeyboardEvent, VirtualKeyboardOptions, 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.28 (d1ad307f)");
 
-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