@tremolo-ui/react 0.0.6 → 0.0.8

package/dist/styles/index.css

@@ -6,3 +6,244 @@
 .tremolo-no-select {
   user-select: none;
 }
+
+.tremolo-knob {
+  display: inline-block;
+  cursor: pointer;
+  overflow: visible;
+  outline: 0;
+
+  &:focus,
+  &:hover {
+    > .tremolo-knob-active-line {
+      color: #4e76e6;
+    }
+
+    > .tremolo-knob-inactive-line {
+      color: #ddd;
+    }
+
+    > .tremolo-knob-thumb {
+      color: #ccc;
+    }
+  }
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
+
+  &[aria-disabled='true'] {
+    > .tremolo-knob-active-line {
+      color: #5d6478;
+    }
+  }
+}
+
+.tremolo-knob-active-line {
+  overflow: visible;
+  color: #7998ec;
+}
+
+.tremolo-knob-inactive-line {
+  color: #eee;
+}
+
+.tremolo-knob-thumb {
+  color: #d0d0d0;
+}
+
+.tremolo-knob-thumb-line {
+  color: #eee;
+}
+
+.tremolo-number-input {
+  display: inline-block;
+  font: inherit;
+  margin: 0px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #bbb;
+  border-radius: 4px;
+  outline: 0px;
+  transition: all 0.1s linear;
+  appearance: textfield;
+
+  &:hover {
+    border-color: var(--tremolo-theme-color);
+  }
+
+  &:focus {
+    border-color: var(--tremolo-theme-color);
+    box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
+  }
+}
+
+.tremolo-piano {
+  display: inline-block;
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+}
+
+.tremolo-piano-white-key {
+  position: absolute;
+  background-color: white;
+  color: black;
+  border: 1px solid #555;
+  border-radius: 0px 0px 8px 8px;
+  cursor: pointer;
+  z-index: 1;
+
+  &[data-active='true'] {
+    background-color: #ccc;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-piano-black-key {
+  position: absolute;
+  background-color: #333;
+  color: white;
+  border: 1px solid #555;
+  border-radius: 0px 0px 8px 8px;
+  cursor: pointer;
+  z-index: 2;
+
+  &[data-active='true'] {
+    background-color: #666;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-piano-key-label-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  height: 100%;
+}
+
+.tremolo-piano-key-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.6rem;
+  height: 10px;
+  margin-bottom: 10px;
+  padding: 4px;
+  border-radius: 4px;
+  border: 1px solid #888;
+  aspect-ratio: 1;
+  max-width: calc(100% - 16px);
+}
+
+.tremolo-slider {
+  display: inline-block;
+  cursor: pointer;
+  outline: 0;
+  -webkit-tap-highlight-color: transparent;
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-slider-thumb-wrapper {
+  position: absolute;
+  translate: -50% -50%;
+  z-index: 100;
+}
+
+.tremolo-slider-thumb {
+  background: #4e76e6;
+  border-radius: 50%;
+  outline: none;
+
+  &[aria-disabled='true'] {
+    background: #5d6478;
+  }
+
+  &[aria-readonly='false']:focus {
+    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+  }
+}
+
+.tremolo-slider-track {
+  --active: #7998ec;
+  --inactive: #eee;
+
+  position: relative;
+
+  &:hover {
+    --active: #6387e9;
+    --inactive: #e0e0e0;
+  }
+
+  &[aria-disabled='true'] {
+    --active: #858890;
+    --inactive: #ddd;
+  }
+}
+
+.tremolo-slider-scale {
+  display: block;
+  position: relative;
+}
+
+.tremolo-slider-scale-option {
+  display: flex;
+  color: #222;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  translate: -50% 0;
+  z-index: 10;
+
+  &[data-vertical='true'] {
+    flex-direction: row;
+    translate: 0 -50%;
+  }
+}
+
+.tremolo-slider-scale-option-mark {
+  background-color: currentColor;
+}
+
+.tremolo-slider-scale-option-label {
+  text-align: right;
+}
+
+.tremolo-xy-pad {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.tremolo-xy-pad-thumb-wrapper {
+  position: absolute;
+  translate: -50% -50%;
+  z-index: 100;
+}
+
+.tremolo-xy-pad-thumb {
+  border-radius: 50%;
+  outline: none;
+  background-color: #4e76e6;
+
+  &[aria-disabled='true'] {
+    background-color: #5d6478;
+  }
+
+  &:focus {
+    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "React component library for audio app",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -54,11 +54,9 @@
     "react-components",
     "ui",
     "components",
-    "web-audio",
-    "emotion"
+    "web-audio"
   ],
   "devDependencies": {
-    "@emotion/react": "^11.13.0",
     "@storybook/addon-essentials": "^8.3.3",
     "@storybook/addon-interactions": "^8.3.3",
     "@storybook/addon-links": "^8.3.3",
@@ -75,7 +73,6 @@
     "tone": "^15.0.4"
   },
   "peerDependencies": {
-    "@emotion/react": "11.x",
     "react": "18.x",
     "react-dom": "18.x"
   },

package/src/components/AnimationCanvas/index.tsx

@@ -1,6 +1,12 @@
-import { css, CSSObject } from '@emotion/react'
-import { ComponentPropsWithRef, MutableRefObject, useEffect, useRef } from 'react'
 import clsx from 'clsx'
+import {
+  ComponentPropsWithoutRef,
+  MutableRefObject,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react'
 
 import { DrawingContext, drawingState, DrawingStateValue } from './canvas'
 
@@ -25,25 +31,45 @@ export type DrawFunction = (
   count: number,
 ) => void
 
-export interface AnimationCanvasProps {
+interface CommonProps {
+  /**
+   * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
+   */
+  options?: CanvasRenderingContext2DSettings
+  init?: DrawFunction
+  draw: DrawFunction
+}
+
+interface AbsoluteSizingProps {
   width?: number
   height?: number
+}
+
+interface RelativeSizingProps {
   relativeSize?: boolean
-  /** only available relativeSize=true */
   reduceFlickering?: boolean
-  options?: CanvasRenderingContext2DSettings
-  style?: CSSObject
-  init?: DrawFunction
-  draw: DrawFunction
 }
 
+export type AnimationCanvasProps = AbsoluteSizingProps &
+  RelativeSizingProps &
+  CommonProps
+
 /**
  * A simple animatable canvas with requestAnimationFrame()
  */
+export function AnimationCanvas(
+  props: AbsoluteSizingProps &
+    CommonProps &
+    Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>,
+): ReactElement
+export function AnimationCanvas(
+  props: RelativeSizingProps &
+    CommonProps &
+    Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>,
+): ReactElement
 export function AnimationCanvas({
   width = 100,
   height = 100,
-  style,
   relativeSize = false,
   reduceFlickering = true,
   options,
@@ -52,24 +78,30 @@ export function AnimationCanvas({
   className,
   ...props
 }: AnimationCanvasProps &
-  Omit<ComponentPropsWithRef<'canvas'>, keyof AnimationCanvasProps>) {
+  Omit<
+    ComponentPropsWithoutRef<'canvas'>,
+    keyof AnimationCanvasProps
+  >): ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const memoCanvasRef = useRef<HTMLCanvasElement>(null)
   const reqIdRef = useRef<number>()
   const widthRef = useRef(0)
   const heightRef = useRef(0)
 
-  const loop = (
-    context: CanvasRenderingContext2D,
-    width: MutableRefObject<number>,
-    height: MutableRefObject<number>,
-    count: number,
-  ) => {
-    reqIdRef.current = requestAnimationFrame(() =>
-      loop(context, width, height, count + 1),
-    )
-    draw(context, width, height, count + 1)
-  }
+  const loop = useCallback(
+    (
+      context: CanvasRenderingContext2D,
+      width: MutableRefObject<number>,
+      height: MutableRefObject<number>,
+      count: number,
+    ) => {
+      reqIdRef.current = requestAnimationFrame(() =>
+        loop(context, width, height, count + 1),
+      )
+      draw(context, width, height, count + 1)
+    },
+    [draw],
+  )
 
   useEffect(() => {
     if (!canvasRef.current) return
@@ -84,34 +116,38 @@ export function AnimationCanvas({
       const memoCanvas = memoCanvasRef.current
       const memoContext = memoCanvas?.getContext('2d', options)
 
-      const resizeObserver = new ResizeObserver(() => {
-        // console.log('resize')
-        // Prevents loss of some context when the canvas is resized
-        const contextMemo = {} as DrawingContext
-        for (const prop of drawingState) {
-          (contextMemo[prop] as DrawingStateValue) = context[prop]
-        }
-
-        const w = Math.floor(parent.clientWidth)
-        const h = Math.floor(parent.clientHeight)
-
-        if (reduceFlickering && memoCanvas && memoContext) {
-          memoCanvas.width = w * dpr
-          memoCanvas.height = h * dpr
-          memoContext.scale(1 / dpr, 1 / dpr)
-          memoContext.drawImage(context.canvas, 0, 0)
-        }
-
-        setDprConfig(canvas, context, w, h, dpr)
-        widthRef.current = w
-        heightRef.current = h
-
-        for (const prop of drawingState) {
-          (context[prop] as DrawingStateValue) = contextMemo[prop]
-        }
-
-        if (reduceFlickering && memoContext) {
-          context.drawImage(memoContext.canvas, 0, 0)
+      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
+        for (const entry of entries) {
+          // Prevents loss of some context when the canvas is resized
+          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)
+
+          if (reduceFlickering && memoCanvas && memoContext) {
+            memoCanvas.width = w * dpr
+            memoCanvas.height = h * dpr
+            memoContext.scale(1 / dpr, 1 / dpr)
+            memoContext.drawImage(context.canvas, 0, 0)
+          }
+
+          setDprConfig(canvas, context, w, h, dpr)
+          widthRef.current = w
+          heightRef.current = h
+
+          for (const prop of drawingState) {
+            ;(context[prop] as DrawingStateValue) = contextMemo[prop]
+          }
+
+          if (reduceFlickering && memoContext) {
+            context.drawImage(memoContext.canvas, 0, 0)
+          }
         }
       })
       resizeObserver.observe(parent)
@@ -140,7 +176,7 @@ export function AnimationCanvas({
         if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
       }
     }
-  }, [loop])
+  }, [loop, init, options, reduceFlickering, relativeSize])
 
   return (
     <>
@@ -148,17 +184,11 @@ export function AnimationCanvas({
         className={clsx('tremolo-animation-canvas', className)}
         width={relativeSize ? 0 : width}
         height={relativeSize ? 0 : height}
-        css={css(style)}
         ref={canvasRef}
         {...props}
       ></canvas>
       {relativeSize && reduceFlickering && (
-        <canvas
-          style={{ display: 'none' }}
-          width={relativeSize ? 0 : width}
-          height={relativeSize ? 0 : height}
-          ref={memoCanvasRef}
-        ></canvas>
+        <canvas style={{ display: 'none' }} ref={memoCanvasRef}></canvas>
       )}
     </>
   )