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

package/dist/cjs/index.js

@@ -61,23 +61,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 = React.useRef(null);
     const memoCanvasRef = React.useRef(null);
     const reqIdRef = React.useRef(-1);
     const widthRef = React.useRef(0);
     const heightRef = React.useRef(0);
+    const deltaMemoRef = React.useRef(-1);
+    const startTimeRef = React.useRef(-1);
     const loop = React.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]);
     React.useEffect(() => {
         if (!canvasRef.current)
@@ -86,26 +115,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;
@@ -129,17 +154,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 {
@@ -148,8 +176,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);
@@ -527,16 +558,16 @@ const AnimationKnob = React.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();
@@ -719,14 +750,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;
@@ -906,7 +937,7 @@ const InternalInput = React.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) => {
@@ -917,7 +948,7 @@ const InternalInput = React.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]);
     React.useImperativeHandle(ref, () => {
@@ -1106,6 +1137,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 = React.createContext(null);
+function PianoProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const storeRef = React.useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createPianoStore(props);
+    }
+    React.useEffect(() => {
+        if (storeRef.current) {
+            storeRef.current.setState(props);
+        }
+        else {
+            storeRef.current = createPianoStore(props);
+        }
+    }, [props]);
+    return (jsxRuntime.jsx(PianoContext.Provider, { value: storeRef.current, children: children }));
+}
+/** @category Piano */
+function usePianoContext(selector) {
+    const store = React.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"]);
@@ -1188,70 +1257,6 @@ const BlackKey = React.forwardRef((_a, ref) => {
     return (jsxRuntime.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 = React.createContext(null);
-function PianoProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const storeRef = React.useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createPianoStore(props);
-    }
-    React.useEffect(() => {
-        if (storeRef.current) {
-            storeRef.current.setState(props);
-        }
-        else {
-            storeRef.current = createPianoStore(props);
-        }
-    }, [props]);
-    return (jsxRuntime.jsx(PianoContext.Provider, { value: storeRef.current, children: children }));
-}
-/** @category Piano */
-function usePianoContext(selector) {
-    const store = React.useContext(PianoContext);
-    if (!store)
-        throw new Error('Missing PianoContext.Provider in the tree');
-    return useStore(store, selector);
-}
-
 /** @category Piano */
 const SHORTCUTS = {
     HOME_ROW: {
@@ -1287,6 +1292,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
@@ -1309,19 +1315,17 @@ function Piano(_a) {
     const padding = 1;
     const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
     // const blackNoteShiftPercent = 0.3
-    // TODO: if fill setWhiteNoteWidth
-    // useMemo
-    // __width
     const childrenWithProps = React.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 = React.useCallback((note) => {
         const pitchPositions = {
@@ -1338,8 +1342,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);
@@ -1349,7 +1352,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 = React.useCallback((x, y) => {
         if (!pianoRef.current)
             return -1;
@@ -1358,14 +1361,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を使う必要がありそう
     // 取り敢えず、シングルタッチだけ対応
@@ -1440,14 +1445,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 (jsxRuntime.jsx(PianoProvider, { noteRange: noteRange, glissando: glissando, midiMax: midiMax, fill: fill, onPlayNote: onPlayNote, onStopNote: onStopNote, label: label, children: jsxRuntime.jsx("div", Object.assign({ ref: (div) => {
+    return (jsxRuntime.jsx(PianoProvider, { notePosition: notePosition, noteRange: noteRange, glissando: glissando, midiMax: midiMax, fill: fill, onPlayNote: onPlayNote, onStopNote: onStopNote, label: label, children: jsxRuntime.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) ? (jsxRuntime.jsx(WhiteKey, { ref: keyRefs.current[index], noteNumber: note }, note)) : (jsxRuntime.jsx(BlackKey, { ref: keyRefs.current[index], noteNumber: note }, note))) })) }));
+                noteRangeArray.map((note, index) => isWhiteKey(note) ? (jsxRuntime.jsx(WhiteKey, { ref: keyRefs.current[index], noteNumber: note, __width: whiteNoteWidth }, note)) : (jsxRuntime.jsx(BlackKey, { ref: keyRefs.current[index], noteNumber: note, __width: whiteNoteWidth * blackPerWhiteWidth }, note))) })) }));
 }
 
 const createSliderStore = (initProps) => {