@effijs/templates 0.0.0-stage → 1.0.0-alpha.1

package/platforms/react-native/solutions/components/Ruler/files/Track.tsx

@@ -0,0 +1,686 @@
+import { Canvas, Group, Line, Path, Skia, Text as SkiaText, useFont } from '@shopify/react-native-skia';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { type LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+import {
+  cancelAnimation,
+  clamp,
+  type SharedValue,
+  useDerivedValue,
+  useSharedValue,
+  withDecay,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useRuler } from './Context';
+import {
+  CAPTION_TIER_HIGH,
+  CAPTION_TIER_MID,
+  DEFAULT_CAPTION_ALIGN,
+  DEFAULT_CAPTION_COLOR,
+  DEFAULT_CAPTION_FONT_SIZE,
+  DEFAULT_CAPTION_INTERVALS,
+  DEFAULT_CAPTION_PADDING,
+  DEFAULT_DECELERATION_RATE,
+  DEFAULT_GAP_BETWEEN_STEPS,
+  DEFAULT_INDICATOR_COLOR,
+  DEFAULT_INDICATOR_SIZE,
+  DEFAULT_LONG_STEP_COLOR,
+  DEFAULT_LONG_STEP_HEIGHT,
+  DEFAULT_MINOR_STEP_COLOR,
+  DEFAULT_MINOR_STEP_HEIGHT,
+  DEFAULT_SHORT_STEP_COLOR,
+  DEFAULT_SHORT_STEP_HEIGHT,
+  DEFAULT_SHOW_CAPTIONS,
+  DEFAULT_STEP_WIDTH,
+  DEFAULT_TRACK_ALIGN,
+  RULER_MIN_FLING_VELOCITY,
+  RULER_SNAP_TIMING_CONFIG,
+  resolveDeceleration,
+} from './ruler.constants';
+import type { IRulerTrackProps, TRulerOrientation, TRulerTrackAlign } from './ruler.types';
+import {
+  formatRulerValue,
+  getCaptionIndices,
+  getCaptionTier,
+  getSubStepsPerMainStep,
+  getVisibleTickRange,
+  indexToValue,
+  isLongStep,
+  isOffsetAligned,
+  resolveCrossAxisOrigin,
+  resolveLongStepInterval,
+  resolveTrackBandLayout,
+  snapOffset,
+  validateSubStep,
+} from './ruler.utils';
+
+const SF_PRO_REGULAR_FONT_SOURCE = require('@ui/fonts/SFProRegular.ttf');
+
+type SkiaFont = NonNullable<ReturnType<typeof useFont>>;
+
+export default function RulerTrack({
+  orientation = 'horizontal',
+  indicatorColor = DEFAULT_INDICATOR_COLOR,
+  shortStepColor = DEFAULT_SHORT_STEP_COLOR,
+  longStepColor = DEFAULT_LONG_STEP_COLOR,
+  gapBetweenSteps = DEFAULT_GAP_BETWEEN_STEPS,
+  shortStepHeight = DEFAULT_SHORT_STEP_HEIGHT,
+  longStepHeight = DEFAULT_LONG_STEP_HEIGHT,
+  stepWidth = DEFAULT_STEP_WIDTH,
+  longStepInterval,
+  indicatorSize = DEFAULT_INDICATOR_SIZE,
+  decelerationRate = DEFAULT_DECELERATION_RATE,
+  showCaptions = DEFAULT_SHOW_CAPTIONS,
+  captionIntervals = DEFAULT_CAPTION_INTERVALS,
+  captionColor = DEFAULT_CAPTION_COLOR,
+  captionFontSize = DEFAULT_CAPTION_FONT_SIZE,
+  trackAlign = DEFAULT_TRACK_ALIGN,
+  captionAlign = DEFAULT_CAPTION_ALIGN,
+  subStep,
+  minorStepHeight = DEFAULT_MINOR_STEP_HEIGHT,
+  minorStepColor = DEFAULT_MINOR_STEP_COLOR,
+  style,
+}: IRulerTrackProps) {
+  const {
+    offset,
+    isDragging,
+    min,
+    max,
+    step,
+    fractionDigits,
+    stepCount,
+    stepSize,
+    maxOffset,
+    viewportWidth,
+    viewportHeight,
+    updateTrackVisual,
+  } = useRuler();
+
+  const resolvedLongStepInterval = useMemo(
+    () => resolveLongStepInterval(longStepInterval, captionIntervals, step),
+    [captionIntervals, longStepInterval, step],
+  );
+
+  useEffect(() => {
+    if (subStep !== undefined) {
+      validateSubStep(step, subStep);
+    }
+  }, [step, subStep]);
+
+  const subStepsPerMainStep = useMemo(
+    () => (subStep !== undefined ? getSubStepsPerMainStep(step, subStep) : 0),
+    [step, subStep],
+  );
+
+  useEffect(() => {
+    updateTrackVisual({
+      orientation,
+      indicatorColor,
+      shortStepColor,
+      longStepColor,
+      gapBetweenSteps,
+      shortStepHeight,
+      longStepHeight,
+      stepWidth,
+      longStepInterval: resolvedLongStepInterval,
+      indicatorSize,
+      decelerationRate,
+    });
+  }, [
+    decelerationRate,
+    gapBetweenSteps,
+    indicatorColor,
+    indicatorSize,
+    longStepColor,
+    longStepHeight,
+    longStepInterval,
+    orientation,
+    resolvedLongStepInterval,
+    shortStepColor,
+    shortStepHeight,
+    stepWidth,
+    updateTrackVisual,
+  ]);
+
+  const deceleration = resolveDeceleration(decelerationRate);
+
+  const isSettling = useSharedValue(false);
+
+  const finishSettle = useCallback(() => {
+    'worklet';
+
+    isSettling.value = true;
+    offset.value = withTiming(
+      snapOffset(offset.value, {
+        min,
+        max,
+        step,
+        stepCount,
+        stepSize: stepSize.value,
+      }),
+      RULER_SNAP_TIMING_CONFIG,
+      finished => {
+        'worklet';
+
+        if (finished) {
+          isSettling.value = false;
+          isDragging.value = false;
+        }
+      },
+    );
+  }, [isDragging, isSettling, max, min, offset, step, stepCount, stepSize]);
+
+  const pan = usePanGesture({
+    onBegin: () => {
+      cancelAnimation(offset);
+      isSettling.value = false;
+      isDragging.value = true;
+    },
+    onUpdate: event => {
+      const delta = orientation === 'horizontal' ? event.changeX : event.changeY;
+      offset.value = clamp(offset.value - delta, 0, maxOffset.value);
+    },
+    onDeactivate: event => {
+      const velocity = orientation === 'horizontal' ? -event.velocityX : -event.velocityY;
+
+      if (Math.abs(velocity) < RULER_MIN_FLING_VELOCITY) {
+        finishSettle();
+        return;
+      }
+
+      isSettling.value = true;
+
+      offset.value = withDecay(
+        {
+          velocity,
+          deceleration,
+          clamp: [0, maxOffset.value],
+        },
+        () => {
+          'worklet';
+
+          finishSettle();
+        },
+      );
+    },
+    onFinalize: () => {
+      if (isSettling.value) {
+        return;
+      }
+
+      if (!isOffsetAligned(offset.value, stepSize.value)) {
+        finishSettle();
+        return;
+      }
+
+      isDragging.value = false;
+    },
+  });
+
+  const [crossAxisSize, setCrossAxisSize] = useState(0);
+
+  const onLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      viewportWidth.value = layout.width;
+      viewportHeight.value = layout.height;
+      setCrossAxisSize(orientation === 'horizontal' ? layout.height : layout.width);
+    },
+    [orientation, viewportHeight, viewportWidth],
+  );
+
+  const fontBase = useFont(SF_PRO_REGULAR_FONT_SOURCE, captionFontSize);
+  const fontMid = useFont(SF_PRO_REGULAR_FONT_SOURCE, captionFontSize + 1);
+  const fontHigh = useFont(SF_PRO_REGULAR_FONT_SOURCE, captionFontSize + 2);
+
+  const captionBandSize = useMemo(() => {
+    if (!fontHigh) {
+      return 0;
+    }
+
+    return Math.ceil(Math.abs(fontHigh.getMetrics().ascent));
+  }, [fontHigh]);
+
+  const bandLayout = useMemo(
+    () =>
+      resolveTrackBandLayout(
+        crossAxisSize,
+        longStepHeight,
+        captionBandSize,
+        DEFAULT_CAPTION_PADDING,
+        trackAlign,
+        captionAlign,
+        showCaptions,
+      ),
+    [captionAlign, captionBandSize, crossAxisSize, longStepHeight, showCaptions, trackAlign],
+  );
+
+  const tickGroupTransform = useMemo(
+    () => getBandTransform(bandLayout.tickBandOrigin, orientation),
+    [bandLayout.tickBandOrigin, orientation],
+  );
+
+  const captionGroupTransform = useMemo(
+    () => getBandTransform(bandLayout.captionBandOrigin, orientation),
+    [bandLayout.captionBandOrigin, orientation],
+  );
+
+  const shortTicksPath = useDerivedValue(() => {
+    return buildTicksPath({
+      offset: offset.value,
+      viewportWidth: viewportWidth.value,
+      viewportHeight: viewportHeight.value,
+      orientation,
+      min,
+      step,
+      max,
+      stepSize: stepSize.value,
+      stepCount,
+      stepWidth,
+      longStepInterval: resolvedLongStepInterval,
+      shortStepHeight,
+      longStepHeight,
+      trackAlign,
+      drawLong: false,
+    });
+  });
+
+  const longTicksPath = useDerivedValue(() => {
+    return buildTicksPath({
+      offset: offset.value,
+      viewportWidth: viewportWidth.value,
+      viewportHeight: viewportHeight.value,
+      orientation,
+      min,
+      step,
+      max,
+      stepSize: stepSize.value,
+      stepCount,
+      stepWidth,
+      longStepInterval: resolvedLongStepInterval,
+      shortStepHeight,
+      longStepHeight,
+      trackAlign,
+      drawLong: true,
+    });
+  });
+
+  const minorTicksPath = useDerivedValue(() => {
+    if (subStep === undefined || subStepsPerMainStep <= 1) {
+      return Skia.Path.Make();
+    }
+
+    return buildMinorTicksPath({
+      offset: offset.value,
+      viewportWidth: viewportWidth.value,
+      viewportHeight: viewportHeight.value,
+      orientation,
+      step,
+      subStep,
+      stepSize: stepSize.value,
+      stepCount,
+      stepWidth,
+      subStepsPerMainStep,
+      minorStepHeight,
+      longStepHeight,
+      trackAlign,
+    });
+  });
+
+  const indicatorP1 = useDerivedValue(() => {
+    return getIndicatorPoints(
+      viewportWidth.value,
+      viewportHeight.value,
+      orientation,
+      indicatorSize,
+      bandLayout.tickBandOrigin,
+      longStepHeight,
+      trackAlign,
+    ).p1;
+  });
+
+  const indicatorP2 = useDerivedValue(() => {
+    return getIndicatorPoints(
+      viewportWidth.value,
+      viewportHeight.value,
+      orientation,
+      indicatorSize,
+      bandLayout.tickBandOrigin,
+      longStepHeight,
+      trackAlign,
+    ).p2;
+  });
+
+  const captionEntries = useMemo(() => {
+    if (!showCaptions || !fontBase || !fontMid || !fontHigh) {
+      return [];
+    }
+
+    const indices = getCaptionIndices(min, max, step, captionIntervals);
+
+    return indices.map(index => {
+      const value = indexToValue(index, min, step, max);
+      const delta = value - min;
+      const tier = getCaptionTier(delta, captionIntervals) ?? captionIntervals[0];
+      const font = getCaptionFont(tier, fontBase, fontMid, fontHigh);
+      const text = formatRulerValue(value, fractionDigits);
+      const width = font.measureText(text).width;
+      const opacity = getCaptionOpacity(tier);
+      const ascent = Math.ceil(Math.abs(font.getMetrics().ascent));
+
+      return { index, text, width, font, opacity, ascent };
+    });
+  }, [captionIntervals, fontBase, fontHigh, fontMid, fractionDigits, max, min, showCaptions, step]);
+
+  useEffect(
+    () => () => {
+      shortTicksPath.value?.dispose();
+      longTicksPath.value?.dispose();
+    },
+    [shortTicksPath],
+  );
+
+  return (
+    <GestureDetector gesture={pan}>
+      <View style={[styles.container, style]} onLayout={onLayout}>
+        <Canvas style={StyleSheet.absoluteFill}>
+          <Group transform={tickGroupTransform}>
+            {subStep !== undefined ? <Path path={minorTicksPath} color={minorStepColor} /> : null}
+            <Path path={shortTicksPath} color={shortStepColor} />
+            <Path path={longTicksPath} color={longStepColor} />
+          </Group>
+
+          {showCaptions ? (
+            <Group transform={captionGroupTransform}>
+              {captionEntries.map(entry => (
+                <CaptionLabel
+                  key={entry.index}
+                  index={entry.index}
+                  text={entry.text}
+                  textWidth={entry.width}
+                  ascent={entry.ascent}
+                  font={entry.font}
+                  color={captionColor}
+                  opacity={entry.opacity}
+                  orientation={orientation}
+                  offset={offset}
+                  stepSize={stepSize}
+                  viewportWidth={viewportWidth}
+                  viewportHeight={viewportHeight}
+                />
+              ))}
+            </Group>
+          ) : null}
+
+          <Line p1={indicatorP1} p2={indicatorP2} color={indicatorColor} strokeWidth={2} />
+        </Canvas>
+      </View>
+    </GestureDetector>
+  );
+}
+
+function getCaptionFont(tier: number, fontBase: SkiaFont, fontMid: SkiaFont, fontHigh: SkiaFont): SkiaFont {
+  if (tier >= CAPTION_TIER_HIGH) {
+    return fontHigh;
+  }
+
+  if (tier >= CAPTION_TIER_MID) {
+    return fontMid;
+  }
+
+  return fontBase;
+}
+
+function getCaptionOpacity(tier: number): number {
+  if (tier >= CAPTION_TIER_HIGH) {
+    return 0.95;
+  }
+
+  if (tier >= CAPTION_TIER_MID) {
+    return 0.8;
+  }
+
+  return 0.6;
+}
+
+interface ICaptionLabelProps {
+  index: number;
+  text: string;
+  textWidth: number;
+  ascent: number;
+  font: SkiaFont;
+  color: string;
+  opacity: number;
+  orientation: TRulerOrientation;
+  offset: SharedValue<number>;
+  stepSize: SharedValue<number>;
+  viewportWidth: SharedValue<number>;
+  viewportHeight: SharedValue<number>;
+}
+
+function CaptionLabel({
+  index,
+  text,
+  textWidth,
+  ascent,
+  font,
+  color,
+  opacity,
+  orientation,
+  offset,
+  stepSize,
+  viewportWidth,
+  viewportHeight,
+}: ICaptionLabelProps) {
+  const x = useDerivedValue(() => {
+    if (orientation === 'horizontal') {
+      const center = viewportWidth.value / 2;
+      const position = center + index * stepSize.value - offset.value;
+      return position - textWidth / 2;
+    }
+
+    return 0;
+  });
+
+  const y = useDerivedValue(() => {
+    if (orientation === 'horizontal') {
+      return ascent;
+    }
+
+    const center = viewportHeight.value / 2;
+    const position = center + index * stepSize.value - offset.value;
+    return position + ascent / 2;
+  });
+
+  return <SkiaText x={x} y={y} text={text} font={font} color={color} opacity={opacity} />;
+}
+
+function getBandTransform(origin: number, orientation: TRulerOrientation) {
+  'worklet';
+
+  return orientation === 'horizontal' ? [{ translateY: origin }] : [{ translateX: origin }];
+}
+
+function getIndicatorPoints(
+  width: number,
+  height: number,
+  orientation: TRulerOrientation,
+  indicatorSize: number,
+  tickBandOrigin: number,
+  tickBandSize: number,
+  trackAlign: TRulerTrackAlign,
+) {
+  'worklet';
+
+  const effectiveSize = Math.min(indicatorSize, tickBandSize);
+  const indicatorOffset = resolveCrossAxisOrigin(tickBandSize, effectiveSize, trackAlign);
+  const indicatorOrigin = tickBandOrigin + indicatorOffset;
+  const indicatorEnd = indicatorOrigin + effectiveSize;
+
+  if (orientation === 'horizontal') {
+    const centerX = width / 2;
+
+    return {
+      p1: { x: centerX, y: indicatorOrigin },
+      p2: { x: centerX, y: indicatorEnd },
+    };
+  }
+
+  const centerY = height / 2;
+
+  return {
+    p1: { x: indicatorOrigin, y: centerY },
+    p2: { x: indicatorEnd, y: centerY },
+  };
+}
+
+function buildTicksPath({
+  offset,
+  viewportWidth,
+  viewportHeight,
+  orientation,
+  min,
+  step,
+  max,
+  stepSize,
+  stepCount,
+  stepWidth,
+  longStepInterval,
+  shortStepHeight,
+  longStepHeight,
+  trackAlign,
+  drawLong,
+}: {
+  offset: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  orientation: TRulerOrientation;
+  min: number;
+  step: number;
+  max: number;
+  stepSize: number;
+  stepCount: number;
+  stepWidth: number;
+  longStepInterval: number;
+  shortStepHeight: number;
+  longStepHeight: number;
+  trackAlign: TRulerTrackAlign;
+  drawLong: boolean;
+}) {
+  'worklet';
+
+  const path = Skia.Path.Make();
+
+  if (viewportWidth <= 0 || viewportHeight <= 0 || stepSize <= 0) {
+    return path;
+  }
+
+  const viewport = orientation === 'horizontal' ? viewportWidth : viewportHeight;
+  const center = viewport / 2;
+  const range = getVisibleTickRange(offset, viewport, stepSize, stepCount);
+
+  for (let index = range.start; index <= range.end; index += 1) {
+    const isLong = isLongStep(index, min, step, max, longStepInterval);
+
+    if (drawLong !== isLong) {
+      continue;
+    }
+
+    const tickSize = isLong ? longStepHeight : shortStepHeight;
+    const tickOrigin = isLong ? 0 : resolveCrossAxisOrigin(longStepHeight, shortStepHeight, trackAlign);
+    const position = center + index * stepSize - offset;
+
+    if (orientation === 'horizontal') {
+      path.addRect({
+        x: position - stepWidth / 2,
+        y: tickOrigin,
+        width: stepWidth,
+        height: tickSize,
+      });
+    } else {
+      path.addRect({
+        x: tickOrigin,
+        y: position - stepWidth / 2,
+        width: tickSize,
+        height: stepWidth,
+      });
+    }
+  }
+
+  return path;
+}
+
+function buildMinorTicksPath({
+  offset,
+  viewportWidth,
+  viewportHeight,
+  orientation,
+  step,
+  subStep,
+  stepSize,
+  stepCount,
+  stepWidth,
+  subStepsPerMainStep,
+  minorStepHeight,
+  longStepHeight,
+  trackAlign,
+}: {
+  offset: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  orientation: TRulerOrientation;
+  step: number;
+  subStep: number;
+  stepSize: number;
+  stepCount: number;
+  stepWidth: number;
+  subStepsPerMainStep: number;
+  minorStepHeight: number;
+  longStepHeight: number;
+  trackAlign: TRulerTrackAlign;
+}) {
+  'worklet';
+
+  const path = Skia.Path.Make();
+
+  if (viewportWidth <= 0 || viewportHeight <= 0 || stepSize <= 0 || subStepsPerMainStep <= 1) {
+    return path;
+  }
+
+  const viewport = orientation === 'horizontal' ? viewportWidth : viewportHeight;
+  const center = viewport / 2;
+  const range = getVisibleTickRange(offset, viewport, stepSize, stepCount);
+  const tickOrigin = resolveCrossAxisOrigin(longStepHeight, minorStepHeight, trackAlign);
+
+  for (let index = range.start; index < range.end && index < stepCount; index += 1) {
+    for (let j = 1; j < subStepsPerMainStep; j += 1) {
+      const fraction = (j * subStep) / step;
+      const position = center + (index + fraction) * stepSize - offset;
+
+      if (orientation === 'horizontal') {
+        path.addRect({
+          x: position - stepWidth / 2,
+          y: tickOrigin,
+          width: stepWidth,
+          height: minorStepHeight,
+        });
+      } else {
+        path.addRect({
+          x: tickOrigin,
+          y: position - stepWidth / 2,
+          width: minorStepHeight,
+          height: stepWidth,
+        });
+      }
+    }
+  }
+
+  return path;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    minHeight: 64,
+  },
+});