@tremolo-ui/react 0.1.0-alpha.2 → 0.1.1

package/dist/cjs/types/components/AnimationCanvas/index.d.ts

@@ -1,13 +1,33 @@
-import { ComponentPropsWithoutRef, ReactElement, RefObject } from 'react';
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
 /** @category AnimationCanvas */
-export type DrawFunction = (context: CanvasRenderingContext2D, width: RefObject<number>, height: RefObject<number>, count: number) => void;
+export type InitFunction = (context: CanvasRenderingContext2D, option: {
+    /** current canvas width */
+    width: number;
+    /** current canvas height */
+    height: number;
+}) => void;
+/** @category AnimationCanvas */
+export type DrawFunction = (context: CanvasRenderingContext2D, option: {
+    /** current canvas width */
+    width: number;
+    /** current canvas height */
+    height: number;
+    /** frame count */
+    count: number;
+    /** delta time (ms) */
+    deltaTime: number;
+    /** elapsed time (ms) */
+    elapsedTime: number;
+    /** frame per second */
+    fps: number;
+}) => void;
 /** @category AnimationCanvas */
 export interface CommonProps {
     /**
      * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
      */
     options?: CanvasRenderingContext2DSettings;
-    init?: DrawFunction;
+    init?: InitFunction;
     draw: DrawFunction;
 }
 /** @category AnimationCanvas */
@@ -21,11 +41,11 @@ export interface RelativeSizingProps {
     reduceFlickering?: boolean;
 }
 /** @category AnimationCanvas */
-export type AnimationCanvasProps = AbsoluteSizingProps & RelativeSizingProps & CommonProps;
+export type AnimationCanvasProps = CommonProps & AbsoluteSizingProps & RelativeSizingProps;
 /**
  * A simple animatable canvas with requestAnimationFrame()
  * @category AnimationCanvas
  */
-export declare function AnimationCanvas(props: AbsoluteSizingProps & CommonProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
-export declare function AnimationCanvas(props: RelativeSizingProps & CommonProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
+export declare function AnimationCanvas(props: CommonProps & AbsoluteSizingProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
+export declare function AnimationCanvas(pros: CommonProps & RelativeSizingProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/types/components/AnimationCanvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimationCanvas/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,wBAAwB,EACxB,YAAY,EACZ,SAAS,EAIV,MAAM,OAAO,CAAA;AAkBd,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG,CAGzB,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,EACxB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,EACzB,KAAK,EAAE,MAAM,KACV,IAAI,CAAA;AAET,gCAAgC;AAChC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,gCAAgC,CAAA;IAC1C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,IAAI,EAAE,YAAY,CAAA;CACnB;AAED,gCAAgC;AAChC,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,gCAAgC;AAChC,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,gCAAgC;AAChC,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GACpD,mBAAmB,GACnB,WAAW,CAAA;AAEb;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,mBAAmB,GACxB,WAAW,GACX,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,oBAAoB,CAAC,GACrE,YAAY,CAAA;AACf,wBAAgB,eAAe,CAC7B,KAAK,EAAE,mBAAmB,GACxB,WAAW,GACX,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,oBAAoB,CAAC,GACrE,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimationCanvas/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,wBAAwB,EACxB,YAAY,EAKb,MAAM,OAAO,CAAA;AA2Bd,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE;IACN,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAA;CACf,KACE,IAAI,CAAA;AAET,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG,CAGzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE;IACN,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,wBAAwB;IACxB,WAAW,EAAE,MAAM,CAAA;IACnB,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAA;CACZ,KACE,IAAI,CAAA;AAET,gCAAgC;AAChC,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,gCAAgC,CAAA;IAC1C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,IAAI,EAAE,YAAY,CAAA;CACnB;AAED,gCAAgC;AAChC,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,gCAAgC;AAChC,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,gCAAgC;AAChC,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAC5C,mBAAmB,GACnB,mBAAmB,CAAA;AAErB;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,GAChB,mBAAmB,GACnB,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,oBAAoB,CAAC,GACrE,YAAY,CAAA;AACf,wBAAgB,eAAe,CAC7B,IAAI,EAAE,WAAW,GACf,mBAAmB,GACnB,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,MAAM,oBAAoB,CAAC,GACrE,YAAY,CAAA"}

package/dist/cjs/types/components/AnimationKnob/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimationKnob/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,aAAa,EAKd,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,EAAmB,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAElE,8BAA8B;AAC9B,MAAM,MAAM,kBAAkB,GAAG;IAE/B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE5B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE9B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uBAAuB;IACvB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,IAAI,CAAC,EAAE,YAAY,CAAA;IAEnB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAKD;;;GAGG;AACH,eAAO,MAAM,aAAa,8NA4NzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/AnimationKnob/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,aAAa,EAKd,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,EAAmB,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAElE,8BAA8B;AAC9B,MAAM,MAAM,kBAAkB,GAAG;IAE/B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE5B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE9B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uBAAuB;IACvB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,IAAI,CAAC,EAAE,YAAY,CAAA;IAEnB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAKD;;;GAGG;AACH,eAAO,MAAM,aAAa,8NA0NzB,CAAA"}

package/dist/cjs/types/components/Piano/context.d.ts

@@ -16,7 +16,7 @@ type State = {
 type Action = {
     notePosition: (note: number) => number;
 };
-type PianoProviderProps = React.PropsWithChildren<Partial<State>>;
+type PianoProviderProps = React.PropsWithChildren<Partial<State> & Action>;
 export declare function PianoProvider({ children, ...props }: PianoProviderProps): import("react/jsx-runtime").JSX.Element;
 /** @category Piano */
 export declare function usePianoContext<T>(selector: (state: State & Action) => T): T;

package/dist/cjs/types/components/Piano/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAiC,MAAM,OAAO,CAAA;AAO/E,sBAAsB;AACtB,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,SAAS,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CAClD,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC,CAAA;AAsDD,KAAK,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;AAEjE,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAmBvE;AAED,sBAAsB;AACtB,wBAAgB,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAI5E"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAiC,MAAM,OAAO,CAAA;AAG/E,sBAAsB;AACtB,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,SAAS,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CAClD,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC,CAAA;AAyBD,KAAK,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAA;AAE1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAmBvE;AAED,sBAAsB;AACtB,wBAAgB,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAI5E"}

package/dist/cjs/types/components/Piano/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/index.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,wBAAwB,EAExB,aAAa,EACb,YAAY,EACZ,SAAS,EAOV,MAAM,OAAO,CAAA;AAad,OAAO,EAAE,SAAS,EAAiB,MAAM,WAAW,CAAA;AAQpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD;;;;;GAKG;AAEH,sBAAsB;AACtB,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,YAKrD;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IAEzB,SAAS,EAAE,SAAS,CAAA;IAGpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAElD;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,SAAgB,EAChB,OAAa,EACb,iBAAiB,EACjB,IAAY,EACZ,MAA4B,EAC5B,cAAc,EAAE,eAAsC,EACtD,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,UAAU,CAAC,2CA+MtE;AAED,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/index.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,wBAAwB,EAExB,aAAa,EACb,YAAY,EACZ,SAAS,EAOV,MAAM,OAAO,CAAA;AAad,OAAO,EAAE,SAAS,EAAiB,MAAM,WAAW,CAAA;AAQpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD;;;;;GAKG;AAEH,sBAAsB;AACtB,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,YAKrD;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IAEzB,SAAS,EAAE,SAAS,CAAA;IAGpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAElD;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAID;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,SAAgB,EAChB,OAAa,EACb,iBAAiB,EACjB,IAAY,EACZ,MAA4B,EAC5B,cAAc,EAAE,eAAsC,EACtD,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,UAAU,CAAC,2CAiNtE;AAED,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/esm/index.js

@@ -59,23 +59,52 @@ const drawingState = [
     'imageSmoothingEnabled',
 ];
 
+/*
+TODO
+AbsoluteSizingProps, RelativeSizingPropsの型付けを強くする
+AbsoluteSizingPropsの場合、width, heightは必須
+RelativeSizingPropsのの場合、relativeSizeは必須、reduceFlickeringはオプショナル
+*/
 function setDprConfig(canvas, context, width, height, dpr) {
     canvas.width = width * dpr;
     canvas.height = height * dpr;
+    // Reset current transformation matrix to the identity matrix
+    context.setTransform(1, 0, 0, 1, 0, 0);
     context.scale(dpr, dpr);
     canvas.style.width = `${width}px`;
     canvas.style.height = `${height}px`;
 }
 function AnimationCanvas(_a) {
-    var { width = 100, height = 100, relativeSize = false, reduceFlickering = true, options, init, draw, className, onContextMenu = (event) => event.preventDefault() } = _a, props = __rest(_a, ["width", "height", "relativeSize", "reduceFlickering", "options", "init", "draw", "className", "onContextMenu"]);
+    var { 
+    // common
+    options, init, draw, 
+    // absolute
+    width = 100, height = 100, 
+    // relative
+    relativeSize, reduceFlickering = true, 
+    // canvas props
+    className, onContextMenu = (event) => event.preventDefault() } = _a, props = __rest(_a, ["options", "init", "draw", "width", "height", "relativeSize", "reduceFlickering", "className", "onContextMenu"]);
     const canvasRef = useRef(null);
     const memoCanvasRef = useRef(null);
     const reqIdRef = useRef(-1);
     const widthRef = useRef(0);
     const heightRef = useRef(0);
+    const deltaMemoRef = useRef(-1);
+    const startTimeRef = useRef(-1);
     const loop = useCallback((context, width, height, count) => {
+        const now = performance.now();
+        const deltaTime = now - deltaMemoRef.current;
+        const elapsedTime = now - startTimeRef.current;
+        deltaMemoRef.current = now;
         reqIdRef.current = requestAnimationFrame(() => loop(context, width, height, count + 1));
-        draw(context, width, height, count + 1);
+        draw(context, {
+            width: width.current,
+            height: height.current,
+            count: count + 1,
+            deltaTime,
+            elapsedTime,
+            fps: 1000 / deltaTime,
+        });
     }, [draw]);
     useEffect(() => {
         if (!canvasRef.current)
@@ -84,26 +113,22 @@ function AnimationCanvas(_a) {
         const context = canvas.getContext('2d', options);
         if (!context)
             throw new Error('Cannot get canvas context.');
-        const dpr = globalThis.window.devicePixelRatio;
+        const dpr = globalThis.devicePixelRatio;
         if (relativeSize) {
             const parent = canvas.parentElement;
             if (!parent)
                 throw new Error("Canvas doesn't have a parent element.");
             const memoCanvas = memoCanvasRef.current;
             const memoContext = memoCanvas === null || memoCanvas === void 0 ? void 0 : memoCanvas.getContext('2d', options);
-            const resizeObserver = new ResizeObserver((entries) => {
-                // TODO: If the parent element has no absolute height, the height increases infinitely.
-                //     : 親要素に絶対的な高さを持たない場合、高さは無限に増加します。
-                // https://zenn.dev/megeton/articles/be1c677e174c84#%E6%A0%B9%E6%9C%AC%E7%9A%84%E3%81%AB-resizeobserver-loop-limit-exceeded-%E3%81%8C%E5%87%BA%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%AB%E5%90%91%E3%81%8D%E5%90%88%E3%81%86
+            const ro = new ResizeObserver((entries) => {
                 for (const entry of entries) {
                     // Prevents loss of some context when the canvas is resized
-                    // TODO: saving scale and translate
                     const contextMemo = {};
                     for (const prop of drawingState) {
                         contextMemo[prop] = context[prop];
                     }
-                    const w = Math.floor(entry.contentRect.width);
-                    const h = Math.floor(entry.contentRect.height);
+                    const w = entry.contentRect.width;
+                    const h = entry.contentRect.height;
                     if (reduceFlickering && memoCanvas && memoContext) {
                         memoCanvas.width = w * dpr;
                         memoCanvas.height = h * dpr;
@@ -127,17 +152,20 @@ function AnimationCanvas(_a) {
                     }
                 }
             });
-            resizeObserver.observe(parent);
-            const w = Math.floor(parent.clientWidth);
-            const h = Math.floor(parent.clientHeight);
+            ro.observe(parent);
+            const w = parent.clientWidth;
+            const h = parent.clientHeight;
             setDprConfig(canvas, context, w, h, dpr);
             if (init)
-                init(context, widthRef, heightRef, 0);
-            loop(context, widthRef, heightRef, 0);
+                init(context, { width: widthRef.current, height: heightRef.current });
+            const now = performance.now();
+            deltaMemoRef.current = now;
+            startTimeRef.current = now;
+            loop(context, widthRef, heightRef, -1);
             return () => {
                 if (reqIdRef.current)
                     cancelAnimationFrame(reqIdRef.current);
-                resizeObserver.unobserve(parent);
+                ro.disconnect();
             };
         }
         else {
@@ -146,8 +174,11 @@ function AnimationCanvas(_a) {
             widthRef.current = rect.width;
             heightRef.current = rect.height;
             if (init)
-                init(context, widthRef, heightRef, 0);
-            loop(context, widthRef, heightRef, 0);
+                init(context, { width: widthRef.current, height: heightRef.current });
+            const now = performance.now();
+            deltaMemoRef.current = now;
+            startTimeRef.current = now;
+            loop(context, widthRef, heightRef, -1);
             return () => {
                 if (reqIdRef.current)
                     cancelAnimationFrame(reqIdRef.current);
@@ -525,16 +556,16 @@ const AnimationKnob = forwardRef((_a, ref) => {
                 height: size !== null && size !== void 0 ? size : height,
             }), { draw: draw
                 ? draw
-                : (ctx, width, height) => {
+                : (ctx, { width, height }) => {
                     const p = normalizeValue(value, min, max, skew);
                     const startP = normalizeValue(startValue, min, max, skew);
-                    const w = width.current, cx = w / 2;
-                    const h = height.current, cy = h / 2;
+                    const cx = width / 2;
+                    const cy = height / 2;
                     const r = Math.min(cx, cy);
                     if (r <= 0)
                         return;
                     // reset
-                    ctx.clearRect(0, 0, w, h);
+                    ctx.clearRect(0, 0, width, height);
                     ctx.lineCap = 'butt';
                     // bg
                     ctx.beginPath();
@@ -717,14 +748,14 @@ const createStoreImpl = (createState) => {
   const initialState = state = createState(setState, getState, api);
   return api;
 };
-const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+const createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
 
 const identity = (arg) => arg;
 function useStore(api, selector = identity) {
   const slice = React.useSyncExternalStore(
     api.subscribe,
-    () => selector(api.getState()),
-    () => selector(api.getInitialState())
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
   );
   React.useDebugValue(slice);
   return slice;
@@ -904,7 +935,7 @@ const InternalInput = forwardRef((_a, ref) => {
         event.preventDefault();
         const x = key == 'ArrowUp' ? keyboard[1] : -keyboard[1];
         const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)));
-        console.log('key control');
+        // console.log('key control')
         onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
     }, [keyboard, readonly, onChange, updateValueByEvent]);
     const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
@@ -915,7 +946,7 @@ const InternalInput = forwardRef((_a, ref) => {
             return;
         const x = Math.sign(event.deltaY) * -wheel[1];
         const parsed = parseValue(String(updateValueByEvent(wheel[0], x)));
-        console.log('wheel control');
+        // console.log('wheel control')
         onChange === null || onChange === void 0 ? void 0 : onChange(parsed.rawValue, parsed.formatValue);
     }, { passive: false }, [wheel, readonly, onChange, updateValueByEvent]);
     useImperativeHandle(ref, () => {
@@ -1104,6 +1135,44 @@ function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd, })
     return [refHandler, pointerDownHandler];
 }
 
+const createPianoStore = (initProps) => {
+    // const noteRange = initProps.noteRange || { first: 0, last: 127 }
+    const DEFAULT_PROPS = {
+        noteRange: { first: 0, last: 127 },
+        glissando: true,
+        midiMax: 127,
+        fill: false,
+        label: () => undefined,
+        onPlayNote: () => { },
+        onStopNote: () => { },
+    };
+    return createStore()(() => (Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initProps), { notePosition: initProps.notePosition })));
+};
+const PianoContext = createContext(null);
+function PianoProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createPianoStore(props);
+    }
+    useEffect(() => {
+        if (storeRef.current) {
+            storeRef.current.setState(props);
+        }
+        else {
+            storeRef.current = createPianoStore(props);
+        }
+    }, [props]);
+    return (jsx(PianoContext.Provider, { value: storeRef.current, children: children }));
+}
+/** @category Piano */
+function usePianoContext(selector) {
+    const store = useContext(PianoContext);
+    if (!store)
+        throw new Error('Missing PianoContext.Provider in the tree');
+    return useStore(store, selector);
+}
+
 /** @category Piano */
 function KeyLabel(_a) {
     var { label, className, wrapperClassName, wrapperStyle, __note, __label } = _a, props = __rest(_a, ["label", "className", "wrapperClassName", "wrapperStyle", "__note", "__label"]);
@@ -1186,70 +1255,6 @@ const BlackKey = forwardRef((_a, ref) => {
     return (jsx(KeyImpl, Object.assign({ ref: ref, keyType: "black", width: width, height: height, onContextMenu: onContextMenu }, props)));
 });
 
-const createPianoStore = (initProps) => {
-    const noteRange = (initProps === null || initProps === void 0 ? void 0 : initProps.noteRange) || { first: 0};
-    const DEFAULT_PROPS = {
-        noteRange: { first: 0, last: 127 },
-        glissando: true,
-        midiMax: 127,
-        fill: false,
-        label: () => undefined,
-        onPlayNote: () => { },
-        onStopNote: () => { },
-    };
-    return createStore()(() => (Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initProps), { notePosition: (note) => {
-            const pitchPositions = {
-                C: 0,
-                'C#': 1,
-                D: 1,
-                'D#': 2,
-                E: 2,
-                F: 3,
-                'F#': 4,
-                G: 4,
-                'G#': 5,
-                A: 5,
-                'A#': 6,
-                B: 6,
-            };
-            const whiteNoteWidth = defaultWhiteKeyWidth;
-            const blackNoteWidth = defaultBlackKeyWidth;
-            const padding = 1;
-            const targetNoteKey = noteKey(note);
-            const firstNoteKey = noteKey(noteRange.first);
-            const octave = Math.floor((note - noteRange.first) / 12);
-            const octaveOffset = noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0;
-            const w = whiteNoteWidth + padding;
-            const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
-            const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0;
-            return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
-        } })));
-};
-const PianoContext = createContext(null);
-function PianoProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const storeRef = useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createPianoStore(props);
-    }
-    useEffect(() => {
-        if (storeRef.current) {
-            storeRef.current.setState(props);
-        }
-        else {
-            storeRef.current = createPianoStore(props);
-        }
-    }, [props]);
-    return (jsx(PianoContext.Provider, { value: storeRef.current, children: children }));
-}
-/** @category Piano */
-function usePianoContext(selector) {
-    const store = useContext(PianoContext);
-    if (!store)
-        throw new Error('Missing PianoContext.Provider in the tree');
-    return useStore(store, selector);
-}
-
 /** @category Piano */
 const SHORTCUTS = {
     HOME_ROW: {
@@ -1285,6 +1290,7 @@ const SHORTCUTS = {
 function getNoteRangeArray(noteRange) {
     return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
 }
+const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth; // 0.65
 /**
  * Customizable piano component.
  * @category Piano
@@ -1307,19 +1313,17 @@ function Piano(_a) {
     const padding = 1;
     const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
     // const blackNoteShiftPercent = 0.3
-    // TODO: if fill setWhiteNoteWidth
-    // useMemo
-    // __width
     const childrenWithProps = useMemo(() => {
         return (children &&
             React.Children.map(children, (child, index) => {
                 if (React.isValidElement(child)) {
-                    const props = { ref: keyRefs.current[index] };
+                    const __width = child.type == WhiteKey ? whiteNoteWidth : whiteNoteWidth * 0.65;
+                    const props = { ref: keyRefs.current[index], __width };
                     return React.cloneElement(child, props);
                 }
                 return child;
             }));
-    }, [children]);
+    }, [children, whiteNoteWidth]);
     // --- internal functions ---
     const notePosition = useCallback((note) => {
         const pitchPositions = {
@@ -1336,8 +1340,7 @@ function Piano(_a) {
             'A#': 6,
             B: 6,
         };
-        const whiteNoteWidth = defaultWhiteKeyWidth;
-        const blackNoteWidth = defaultBlackKeyWidth;
+        const blackNoteWidth = whiteNoteWidth * blackPerWhiteWidth;
         const padding = 1;
         const targetNoteKey = noteKey(note);
         const firstNoteKey = noteKey(noteRange.first);
@@ -1347,7 +1350,7 @@ function Piano(_a) {
         const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
         const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0;
         return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
-    }, [noteRange.first]);
+    }, [noteRange.first, whiteNoteWidth]);
     const getHitKeyIndex = useCallback((x, y) => {
         if (!pianoRef.current)
             return -1;
@@ -1356,14 +1359,16 @@ function Piano(_a) {
         for (let i = 0; i < notes.length; i++) {
             const note = notes[i];
             const pos = notePosition(note);
-            const w = isWhiteKey(note) ? defaultWhiteKeyWidth : defaultBlackKeyWidth;
+            const w = isWhiteKey(note)
+                ? whiteNoteWidth
+                : whiteNoteWidth * blackPerWhiteWidth;
             const h = isWhiteKey(note) ? containerHeight : containerHeight * 0.6;
             if (pos <= x && x < pos + w && 0 <= y && y < h) {
                 return note;
             }
         }
         return -1;
-    }, [blackNotes, notePosition, whiteNotes]);
+    }, [blackNotes, notePosition, whiteNoteWidth, whiteNotes]);
     // TODO: 単一のポインターに対しては、useDragで対応可能だが、
     // マルチタッチに対しては、TouchEventを使う必要がありそう
     // 取り敢えず、シングルタッチだけ対応
@@ -1438,14 +1443,14 @@ function Piano(_a) {
             (_b = (_a = keyRefs.current[index]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.stop();
         }
     });
-    return (jsx(PianoProvider, { noteRange: noteRange, glissando: glissando, midiMax: midiMax, fill: fill, onPlayNote: onPlayNote, onStopNote: onStopNote, label: label, children: jsx("div", Object.assign({ ref: (div) => {
+    return (jsx(PianoProvider, { notePosition: notePosition, noteRange: noteRange, glissando: glissando, midiMax: midiMax, fill: fill, onPlayNote: onPlayNote, onStopNote: onStopNote, label: label, children: jsx("div", Object.assign({ ref: (div) => {
                 pianoRef.current = div;
                 touchMoveRefCallback(div);
             }, className: clsx('tremolo-piano', className), style: Object.assign({ width: fill ? '100%' : staticWidth, height: height }, style), onPointerDown: (event) => {
                 pointerDownHandler(event);
                 onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
             } }, props, { children: childrenWithProps ||
-                getNoteRangeArray(noteRange).map((note, index) => isWhiteKey(note) ? (jsx(WhiteKey, { ref: keyRefs.current[index], noteNumber: note }, note)) : (jsx(BlackKey, { ref: keyRefs.current[index], noteNumber: note }, note))) })) }));
+                noteRangeArray.map((note, index) => isWhiteKey(note) ? (jsx(WhiteKey, { ref: keyRefs.current[index], noteNumber: note, __width: whiteNoteWidth }, note)) : (jsx(BlackKey, { ref: keyRefs.current[index], noteNumber: note, __width: whiteNoteWidth * blackPerWhiteWidth }, note))) })) }));
 }
 
 const createSliderStore = (initProps) => {