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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0",
   "description": "React component library for audio app",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AnimationCanvas/index.tsx

@@ -10,6 +10,13 @@ import {
 
 import { DrawingContext, drawingState, DrawingStateValue } from './canvas'
 
+/*
+TODO
+AbsoluteSizingProps, RelativeSizingPropsの型付けを強くする
+AbsoluteSizingPropsの場合、width, heightは必須
+RelativeSizingPropsのの場合、relativeSizeは必須、reduceFlickeringはオプショナル
+*/
+
 function setDprConfig(
   canvas: HTMLCanvasElement,
   context: CanvasRenderingContext2D,
@@ -19,19 +26,43 @@ function setDprConfig(
 ) {
   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`
 }
 
+/** @category AnimationCanvas */
+export type InitFunction = (
+  context: CanvasRenderingContext2D,
+  option: {
+    /** current canvas width */
+    width: number
+    /** current canvas height */
+    height: number
+  },
+) => void
+
 /** @category AnimationCanvas */
 export type DrawFunction = (
   // TODO: saving scale and translate
   // context: Omit<CanvasRenderingContext2D, 'save' | 'restore' | 'scale'>,
   context: CanvasRenderingContext2D,
-  width: RefObject<number>,
-  height: RefObject<number>,
-  count: number,
+  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 */
@@ -40,7 +71,7 @@ export interface CommonProps {
    * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
    */
   options?: CanvasRenderingContext2DSettings
-  init?: DrawFunction
+  init?: InitFunction
   draw: DrawFunction
 }
 
@@ -57,32 +88,36 @@ export interface RelativeSizingProps {
 }
 
 /** @category AnimationCanvas */
-export type AnimationCanvasProps = AbsoluteSizingProps &
-  RelativeSizingProps &
-  CommonProps
+export type AnimationCanvasProps = CommonProps &
+  AbsoluteSizingProps &
+  RelativeSizingProps
 
 /**
  * A simple animatable canvas with requestAnimationFrame()
  * @category AnimationCanvas
  */
 export function AnimationCanvas(
-  props: AbsoluteSizingProps &
-    CommonProps &
+  props: CommonProps &
+    AbsoluteSizingProps &
     Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>,
 ): ReactElement
 export function AnimationCanvas(
-  props: RelativeSizingProps &
-    CommonProps &
+  pros: CommonProps &
+    RelativeSizingProps &
     Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>,
 ): ReactElement
 export function AnimationCanvas({
-  width = 100,
-  height = 100,
-  relativeSize = false,
-  reduceFlickering = true,
+  // common
   options,
   init,
   draw,
+  // absolute
+  width = 100,
+  height = 100,
+  // relative
+  relativeSize,
+  reduceFlickering = true,
+  // canvas props
   className,
   onContextMenu = (event) => event.preventDefault(),
   ...props
@@ -96,6 +131,8 @@ export function AnimationCanvas({
   const reqIdRef = useRef(-1)
   const widthRef = useRef(0)
   const heightRef = useRef(0)
+  const deltaMemoRef = useRef(-1)
+  const startTimeRef = useRef(-1)
 
   const loop = useCallback(
     (
@@ -104,10 +141,21 @@ export function AnimationCanvas({
       height: RefObject<number>,
       count: number,
     ) => {
+      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],
   )
@@ -117,7 +165,7 @@ export function AnimationCanvas({
     const canvas = canvasRef.current
     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
@@ -125,20 +173,16 @@ export function AnimationCanvas({
       const memoCanvas = memoCanvasRef.current
       const memoContext = 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 = {} as DrawingContext
           for (const prop of drawingState) {
             ;(contextMemo[prop] as DrawingStateValue) = 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
@@ -168,18 +212,22 @@ export function AnimationCanvas({
           }
         }
       })
-      resizeObserver.observe(parent)
+      ro.observe(parent)
 
-      const w = Math.floor(parent.clientWidth)
-      const h = Math.floor(parent.clientHeight)
+      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)
+      if (init)
+        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 {
       const rect = canvas.getBoundingClientRect()
@@ -187,8 +235,12 @@ export function AnimationCanvas({
       widthRef.current = rect.width
       heightRef.current = rect.height
 
-      if (init) init(context, widthRef, heightRef, 0)
-      loop(context, widthRef, heightRef, 0)
+      if (init)
+        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)

package/src/components/AnimationKnob/index.tsx

@@ -245,18 +245,16 @@ export const AnimationKnob = forwardRef<AnimationKnobMethods, Props>(
           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

package/src/components/NumberInput/InternalInput.tsx

@@ -117,7 +117,7 @@ export const InternalInput = forwardRef<
         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?.(parsed.rawValue, parsed.formatValue)
       },
       [keyboard, readonly, onChange, updateValueByEvent],
@@ -131,7 +131,7 @@ export const InternalInput = forwardRef<
         if (!onChange || event.deltaY == 0) 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?.(parsed.rawValue, parsed.formatValue)
       },
       { passive: false },

package/src/components/Piano/context.tsx

@@ -1,10 +1,6 @@
 import { createContext, ReactNode, useContext, useEffect, useRef } from 'react'
 import { createStore, useStore } from 'zustand'
 
-import { isBlackKey, noteKey, NoteKey, noteKeys } from '@tremolo-ui/functions'
-
-import { defaultBlackKeyWidth, defaultWhiteKeyWidth } from './key'
-
 /** @category Piano */
 export type NoteRange = {
   first: number
@@ -27,8 +23,8 @@ type Action = {
 
 type PianoStore = ReturnType<typeof createPianoStore>
 
-const createPianoStore = (initProps?: Partial<State>) => {
-  const noteRange = initProps?.noteRange || { first: 0, last: 127 }
+const createPianoStore = (initProps: Partial<State> & Action) => {
+  // const noteRange = initProps.noteRange || { first: 0, last: 127 }
   const DEFAULT_PROPS: State = {
     noteRange: { first: 0, last: 127 },
     glissando: true,
@@ -42,42 +38,13 @@ const createPianoStore = (initProps?: Partial<State>) => {
   return createStore<State & Action>()(() => ({
     ...DEFAULT_PROPS,
     ...initProps,
-    notePosition: (note: number) => {
-      const pitchPositions: Record<NoteKey, number> = {
-        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
-    },
+    notePosition: initProps.notePosition,
   }))
 }
 
 const PianoContext = createContext<PianoStore | null>(null)
 
-type PianoProviderProps = React.PropsWithChildren<Partial<State>>
+type PianoProviderProps = React.PropsWithChildren<Partial<State> & Action>
 
 export function PianoProvider({ children, ...props }: PianoProviderProps) {
   const storeRef = useRef<PianoStore>(null)

package/src/components/Piano/index.tsx

@@ -76,6 +76,8 @@ export interface PianoProps {
   children?: ReactElement | ReactElement[]
 }
 
+const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth // 0.65
+
 /**
  * Customizable piano component.
  * @category Piano
@@ -115,21 +117,20 @@ export function Piano({
   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(
@@ -149,10 +150,8 @@ export function Piano({
         B: 6,
       }
 
-      const whiteNoteWidth = defaultWhiteKeyWidth
-      const blackNoteWidth = defaultBlackKeyWidth
+      const blackNoteWidth = whiteNoteWidth * blackPerWhiteWidth
       const padding = 1
-
       const targetNoteKey = noteKey(note)
       const firstNoteKey = noteKey(noteRange.first)
       const octave = Math.floor((note - noteRange.first) / 12)
@@ -163,7 +162,7 @@ export function Piano({
       const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0
       return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset
     },
-    [noteRange.first],
+    [noteRange.first, whiteNoteWidth],
   )
 
   const getHitKeyIndex = useCallback(
@@ -174,7 +173,9 @@ export function Piano({
       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
@@ -182,7 +183,7 @@ export function Piano({
       }
       return -1
     },
-    [blackNotes, notePosition, whiteNotes],
+    [blackNotes, notePosition, whiteNoteWidth, whiteNotes],
   )
 
   // TODO: 単一のポインターに対しては、useDragで対応可能だが、
@@ -259,6 +260,7 @@ export function Piano({
 
   return (
     <PianoProvider
+      notePosition={notePosition}
       noteRange={noteRange}
       glissando={glissando}
       midiMax={midiMax}
@@ -285,18 +287,20 @@ export function Piano({
         {...props}
       >
         {childrenWithProps ||
-          getNoteRangeArray(noteRange).map((note, index) =>
+          noteRangeArray.map((note, index) =>
             isWhiteKey(note) ? (
               <WhiteKey
                 ref={keyRefs.current[index]}
                 key={note}
                 noteNumber={note}
+                __width={whiteNoteWidth}
               />
             ) : (
               <BlackKey
                 ref={keyRefs.current[index]}
                 key={note}
                 noteNumber={note}
+                __width={whiteNoteWidth * blackPerWhiteWidth}
               />
             ),
           )}