teableio/teable

View on GitHub
packages/sdk/src/components/grid/utils/measure.ts

Summary

Maintainability
A
0 mins
Test Coverage
export interface IAutoSize {
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: string;
  fontStyle?: string;
  lineHeight?: number;
}

export const MeasuredCanvas = (defaults: IAutoSize = {}) => {
  const {
    fontFamily = 'Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif',
  } = defaults;
  if (typeof window === 'undefined' || document?.fonts?.ready == null) return;
  const canvas = document.createElement('canvas');
  const ctx = canvas ? canvas.getContext('2d') : null;

  const setFontSize = (fontSize: number) => {
    if (ctx) {
      ctx.font = `${fontSize}px ${fontFamily}`;
    }
  };

  const reset = () => setFontSize(13);
  setFontSize(13);

  return {
    ctx,
    reset,
    setFontSize,
  };
};

export const measuredCanvas = MeasuredCanvas();