File PaintCanvas.tsx has 359 lines of code (exceeds 250 allowed). Consider refactoring.

Open

import { Color } from 'csstype';
import * as React from 'react';
import { AnimationFrameId, appSpace, between, emptyPos, IPos, IPosPair, Ratio } from '../../misc';
import MultiPointerHandler from '../../services/MultiPointerHandler';
import './PaintCanvas.css';

PaintCanvas has 34 functions (exceeds 20 allowed). Consider refactoring.

Open

class PaintCanvas extends React.Component<IPaintCanvasProps, IPaintCanvasState> {
  protected refCanvas = React.createRef<HTMLCanvasElement>();
  protected tmPressing: AnimationFrameId = 0;
  protected lastPos: IPos = emptyPos;
  protected lined = false;

File PaintPage.tsx has 302 lines of code (exceeds 250 allowed). Consider refactoring.

Open

// import * as firebase from 'firebase';
import { Color } from 'csstype';
import * as React from 'react';
import { connect } from 'react-redux';
import BubbleButton from '../../components/BubbleButton';

Function getOrientation has 76 lines of code (exceeds 25 allowed). Consider refactoring.

Open

export async function getOrientation (file: File): Promise<ExifOrientation> {
  // TODO check why this is called twice

  const jpeg = 0xffd8;
  const exifMarker = 0xffe1;

PointerHandler has 25 functions (exceeds 20 allowed). Consider refactoring.

Open

export default class PointerHandler {
  protected props: IPointerHandlerProps;
  protected state: IPointerHandlerState;
  protected el: HTMLElement | null = null;
  protected pointStartedPos: IPos = emptyPos;

Function render has 63 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  public render () {
    const onChange = this.onChange.bind(this);
    const onSubmitNew = this.onSubmitNew.bind(this);
    const onFileChange = this.onFileChange.bind(this);
    const records = this.state.imageRecords;

PaintPage has 22 functions (exceeds 20 allowed). Consider refactoring.

Open

class PaintPage extends React.Component<IPaintPagePros, IPaintPageState> {
  protected currentUser: firebase.User | null = null;
  protected elCanvas: HTMLCanvasElement | null = null;
  protected storageRef = firebase.storage().ref('v1-images');
  protected canvasType = '';

Function applyImageOrientation has 48 lines of code (exceeds 25 allowed). Consider refactoring.

Open

function applyImageOrientation (image: HTMLImageElement, orientation: ExifOrientation): Promise<HTMLImageElement> {
  const width = image.naturalWidth;
  const height = image.naturalHeight;

  const canvas = document.createElement('canvas');

Function render has 45 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  public render () {
    const s = this.state;
    const onEditClick = this.onEditClick.bind(this);
    const onScaleChange = this.onScaleChange.bind(this);
    const onFileChange = this.onFileChange.bind(this);

Function getOrientation has a Cognitive Complexity of 14 (exceeds 5 allowed). Consider refactoring.

Open

export async function getOrientation (file: File): Promise<ExifOrientation> {
  // TODO check why this is called twice

  const jpeg = 0xffd8;
  const exifMarker = 0xffe1;

• Read up
  Read up

Function render has 38 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  public render () {
    return (
      <div className="PaintPage">
        {!this.state.imageLoading && <PaintCanvas
          height={this.state.height}

Function render has 38 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  public render () {
    const records = this.state.imageRecords;

    return (
      <div className="HistoryPage">

Function calculateProperPos has 37 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  protected calculateProperPos (pos: IPos): IPos {
    const el = this.el.current;
    if (!el || !el.offsetParent) {
      throw new Error('Element has to be mounted');
    }

Function render has 35 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  public render () {
    return (
      <div className="HomePage">
        <AppHeader/>
        <div className="container" lang="ja">

Function renderMainContent has 35 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  protected renderMainContent () {
    return (
      <PaintMenuContent>
        <PaintMenuBody>
          <div className="PaintMenu-close">

Function render has 33 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  public render () {
    const title = this.props.title || 'Sorry, something went wrong... X(';

    const ignoreBlock = !this.props.onIgnore ? undefined : (
      <p className="ErrorOverlay-ignoreBlock">

Function setUpSizes has 33 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  protected setUpSizes () {
    // this is called only from `componentWillMount()`

    const el = document.documentElement!;
    const screenHeight = el.clientHeight;

Function applyImageOrientation has a Cognitive Complexity of 11 (exceeds 5 allowed). Consider refactoring.

Open

function applyImageOrientation (image: HTMLImageElement, orientation: ExifOrientation): Promise<HTMLImageElement> {
  const width = image.naturalWidth;
  const height = image.naturalHeight;

  const canvas = document.createElement('canvas');

• Read up
  Read up

Function render has 30 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  public render () {
    return (
      <div className="AboutPage">
        <AppHeader/>
        <div className="container" lang="ja">

Function constructor has 28 lines of code (exceeds 25 allowed). Consider refactoring.

Open

  constructor (props: IPaintCanvasProps) {
    super(props);
    this.state = {
      dScale: 1,
      dTranslation: emptyPos,