duongdam

#Simple size about 298Mb. Bun v1.0.21

FROM oven/bun:latest as build-stage

WORKDIR /dist

COPY . .
COPY .env.production .env
COPY package.json package.json
COPY bun.lockb bun.lockb

duongdam

import {useEffect} from 'react'

const getDevices = (userAgent: NavigatorID['userAgent']) => {
    const isAndroid = () => Boolean(userAgent.match(/Android/i))
    const isIos = () => Boolean(userAgent.match(/iPhone|iPad|iPod/i))
    const isOpera = () => Boolean(userAgent.match(/Opera Mini/i))
    const isWindows = () => Boolean(userAgent.match(/IEMobile/i))
    const isSSR = () => Boolean(userAgent.match(/SSR/i))
    const isMobile = () => Boolean(isAndroid() || isIos() || isOpera() || isWindows())
    const isDesktop = () => Boolean(!isMobile() && !isSSR())

duongdam

import React from "react";

// use usePanter2D.js to drawing
interface Props {
  canvasRef?: React.MutableRefObject<HTMLCanvasElement | undefined>;
  width?: number;
}

export const Canvas: React.FC<Props> = ({ canvasRef, width }) => {
  const widthHalf = width ? width / 2 : 0;

duongdam

import { useCallback, useRef, useState } from "react";

export const usePainter = () => {
  const canvas = useRef<HTMLCanvasElement>();
  const [isReady, setIsReady] = useState(false);
  const [isRegularMode, setIsRegularMode] = useState(true);
  const [isAutoWidth, setIsAutoWidth] = useState(false);
  const [isEraser, setIsEraser] = useState(false);

  const [currentColor, setCurrentColor] = useState("#000000");

duongdam

Firebase hosting

1. Kiểm tra, init firebase vào project của bạn

//install firebase cli
npm install -g firebase-tools

firebase login

firebase init hosting

duongdam

export function getPosition(el) {
    let xPos = el.offsetWidth || 0
    let yPos = 0
    while (el) {
        if (el.tagName === "BODY") {
            let xScroll = el.scrollLeft || document.documentElement.scrollLeft
            let yScroll = el.scrollTop || document.documentElement.scrollTop

            xPos += (el.offsetLeft - xScroll + el.clientLeft)
            yPos += (el.offsetTop - yScroll + el.clientTop)

duongdam

import React from 'react'
import styled from "styled-components";


function SVGFillCustom({
                           children,
                           color = '#F2685B',
                           stroke = null,
                           padding = null,
                           maxWidth = "28px",