Forem: Leo Song

OneTerm: The Open-Source Bastion Host I Refactored in Three Months

Leo Song — Thu, 04 Sep 2025 11:51:37 +0000

Introduction

Let me introduce OneTerm, an open-source web-based bastion host built with Go and Vue, designed around the 4A principles: Authentication, Authorization, Account, and Audit.

In modern IT operations, a bastion host is a critical security gateway. It sits between internal and external networks, acting as the single entry point for all access, handling unified authentication, authorization, and auditing. Bastion hosts not only prevent unauthorized access but also record and trace all operational activities, ensuring security and compliance.

By centralizing account management, permissions, and operation auditing, bastion hosts solve the problems of scattered accounts, chaotic permissions, and untraceable actions in traditional operations. This greatly enhances both security and operational efficiency.

Previously, OneTerm only provided core bastion host features. Over the past few months, I dedicated most of my time to this project, collecting feedback from friends and the community, and iteratively refactoring and improving it. After about three months of on-and-off development, OneTerm is now feature-rich, with significant improvements in user experience and performance.

GitHub: https://github.com/veops/oneterm

If you find it useful, please give us a Star ⭐️. Your Star is the greatest encouragement to us.

What's New

WorkStation

Completely redesigned UI with improved interaction details and real-time status updates for assets and terminals.
New sidebar for quick access to productivity tools:
- Fullscreen Mode: Focus on your current workspace with one click.
- Recent Sessions: View and switch between recent session logins.
- Batch Execution: Run commands across multiple assets simultaneously.
- Display Settings: Customize terminal and remote desktop appearance.
- Theme Settings: 100+ built-in terminal themes, switchable with one click.
- Quick Commands: Predefine frequently used commands for one-click execution.
- File Management: Visual file management for SSH and RDP sessions.
- Clipboard: Easily copy and paste content in remote desktop sessions.
- Resolution Settings: Flexible remote desktop resolution options.
- Asset Sharing: Instantly create temporary connections for asset sharing.

Multi-Protocol Support

New support for Database and Web protocols:

Protocol	Authentication	Session Recording	File Transfer	Multi-User
SSH	Password/Key	✅	✅	✅
RDP	Password	✅	✅	✅
VNC	Password	✅	❌	✅
Telnet	Password	✅	✅	✅
Redis	Password	✅	❌	✅
MySQL	Password	✅	❌	✅
MongoDB	Password	✅	❌	✅
PostgreSQL	Password	✅	❌	✅
HTTP/HTTPS	Password	❌	✅	✅

Terminal UI & Command Interaction Improvements

OneTerm supports SSH login, so you can use your favorite terminal tools (like Xshell, MobaXterm, etc.) to connect via SSH. The terminal UI and interactions have been greatly improved, with new themes, command suggestions, and quick command features to make asset switching and operations more efficient.

Access Control Redesign

Completely redesigned access control system, supporting nodes, assets, and accounts with six types of permissions (connect, share, upload, download, copy, paste).
Flexible security policies with time templates (multi-timezone, multi-period), command templates, and IP whitelisting.
New "Resource Management - Access Control" module, including access authorization, command interception, and access time management.

Access Authorization

Centralized management of access permissions for all nodes, assets, and accounts. Supports batch authorization and quick configuration, with all permissions displayed in one place.

Command Interception

Configure interception rules for individual commands or templates.
Automatically block high-risk or sensitive commands based on rules, preventing misoperations and risky behavior.

Access Time Management

Manage time templates for access authorization, supporting flexible multi-timezone and multi-period configurations.

System Settings

New system settings module for default configurations:
- Public Key: For passwordless SSH login to the bastion host.
- Quick Commands: Predefine commands for one-click execution in terminal or batch mode.
- Terminal Display: Customize font, theme, resolution, and more.
- Access Control: Set default access control policies.
- Storage Settings: Configure session recording storage for easy cleanup, archiving, and management.
- Tip: All sessions in OneTerm are recorded for playback and auditing—who did what, when, and where is fully traceable.

Conclusion

In addition to the above features, OneTerm has undergone significant performance optimizations and code refactoring. For more details, check out the latest CHANGELOG.

If you have any questions or suggestions—whether about features, documentation, or user experience—please feel free to reach out or open an issue! Let’s work together to make OneTerm

Exploring the Canvas Series: combined with Transformers.js to achieve intelligent image processing

Leo Song — Mon, 25 Nov 2024 00:43:34 +0000

Introduction

I am currently maintaining a powerful open source creative drawing board. This drawing board integrates a lot of interesting brushes and auxiliary drawing functions, which allows users to experience a new drawing effect. Whether on mobile or PC, you can enjoy a better interactive experience and effect display.

In this article, I will explain in detail how to combine Transformers.js to achieve background removal and image marking segmentation. The result is as follows

Link: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board Welcome to Star ⭐️

Transformers.js

Transformers.js is a powerful JavaScript library based on Hugging Face's Transformers that can be run directly in the browser without relying on server-side computation. This means that you can run your models locally, increasing efficiency and reducing deployment and maintenance costs.

Currently Transformers.js has provided 1000+ models on Hugging Face, covering various domains, which can satisfy most of your needs, such as image processing, text generation, translation, sentiment analysis and other tasks processing, you can easily achieve through Transformers.js. Search for models as follows.

The current major version of Transformers.js has been updated to V3, which adds a lot of great features, details: Transformers.js v3: WebGPU Support, New Models & Tasks, and More….

Both of the features I've added to this post use WebGpu support, which is only available in V3, and has greatly improved processing speed, with parsing now in the milliseconds. However, it should be noted that there are not many browsers that support WebGPU, so it is recommended to use the latest version of Google to visit.

Function 1: Remove background

To remove the background I use the Xenova/modnet model, which looks like this

The processing logic can be divided into three steps

initialise the state, and load the model and processor.
the display of the interface, this is based on your own design, not on mine.
Show the effect, this is based on your own design, not mine. Nowadays it is more popular to use a border line to dynamically display the contrast effect before and after removing the background.

The code logic is as follows, React + TS , see my project's source code for details, the source code is located in src/components/boardOperation/uploadImage/index.tsx

import { useState, FC, useRef, useEffect, useMemo } from 'react'
import {
  env,
  AutoModel,
  AutoProcessor,
  RawImage,
  PreTrainedModel,
  Processor
} from '@huggingface/transformers'

const REMOVE_BACKGROUND_STATUS = {
  LOADING: 0,
  NO_SUPPORT_WEBGPU: 1,
  LOAD_ERROR: 2,
  LOAD_SUCCESS: 3,
  PROCESSING: 4,
  PROCESSING_SUCCESS: 5
}

type RemoveBackgroundStatusType =
  (typeof REMOVE_BACKGROUND_STATUS)[keyof typeof REMOVE_BACKGROUND_STATUS]

const UploadImage: FC<{ url: string }> = ({ url }) => {
  const [removeBackgroundStatus, setRemoveBackgroundStatus] =
    useState<RemoveBackgroundStatusType>()
  const [processedImage, setProcessedImage] = useState('')

  const modelRef = useRef<PreTrainedModel>()
  const processorRef = useRef<Processor>()

  const removeBackgroundBtnTip = useMemo(() => {
    switch (removeBackgroundStatus) {
      case REMOVE_BACKGROUND_STATUS.LOADING:
        return 'Remove background function loading'
      case REMOVE_BACKGROUND_STATUS.NO_SUPPORT_WEBGPU:
        return 'WebGPU is not supported in this browser, to use the remove background function, please use the latest version of Google Chrome'
      case REMOVE_BACKGROUND_STATUS.LOAD_ERROR:
        return 'Remove background function failed to load'
      case REMOVE_BACKGROUND_STATUS.LOAD_SUCCESS:
        return 'Remove background function loaded successfully'
      case REMOVE_BACKGROUND_STATUS.PROCESSING:
        return 'Remove Background Processing'
      case REMOVE_BACKGROUND_STATUS.PROCESSING_SUCCESS:
        return 'Remove Background Processing Success'
      default:
        return ''
    }
  }, [removeBackgroundStatus])

  useEffect(() => {
    ;(async () => {
      try {
        if (removeBackgroundStatus === REMOVE_BACKGROUND_STATUS.LOADING) {
          return
        }
        setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.LOADING)

        // Checking WebGPU Support
        if (!navigator?.gpu) {
          setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.NO_SUPPORT_WEBGPU)
          return
        }
        const model_id = 'Xenova/modnet'
        if (env.backends.onnx.wasm) {
          env.backends.onnx.wasm.proxy = false
        }

        // Load model and processor
        modelRef.current ??= await AutoModel.from_pretrained(model_id, {
          device: 'webgpu'
        })
        processorRef.current ??= await AutoProcessor.from_pretrained(model_id)
        setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.LOAD_SUCCESS)
      } catch (err) {
        console.log('err', err)
        setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.LOAD_ERROR)
      }
    })()
  }, [])

  const processImages = async () => {
    const model = modelRef.current
    const processor = processorRef.current

    if (!model || !processor) {
      return
    }

    setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.PROCESSING)

    // load image
    const img = await RawImage.fromURL(url)

    // Pre-processed image
    const { pixel_values } = await processor(img)

    // Generate image mask
    const { output } = await model({ input: pixel_values })
    const maskData = (
      await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(
        img.width,
        img.height
      )
    ).data

    // Create a new canvas
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D

    // Draw the original image
    ctx.drawImage(img.toCanvas(), 0, 0)

    // Updating the mask area
    const pixelData = ctx.getImageData(0, 0, img.width, img.height)
    for (let i = 0; i < maskData.length; ++i) {
      pixelData.data[4 * i + 3] = maskData[i]
    }
    ctx.putImageData(pixelData, 0, 0)

    // Save new image
    setProcessedImage(canvas.toDataURL('image/png'))
    setRemoveBackgroundStatus(REMOVE_BACKGROUND_STATUS.PROCESSING_SUCCESS)
  }

  return (
    <div className="card shadow-xl">
      <button
        className={`btn btn-primary btn-sm ${
          ![
            REMOVE_BACKGROUND_STATUS.LOAD_SUCCESS,
            REMOVE_BACKGROUND_STATUS.PROCESSING_SUCCESS,
            undefined
          ].includes(removeBackgroundStatus)
            ? 'btn-disabled'
            : ''
        }`}
        onClick={processImages}
      >
        Remove background
      </button>
      <div className="text-xs text-base-content mt-2 flex">
        {removeBackgroundBtnTip}
      </div>
      <div className="relative mt-4 border border-base-content border-dashed rounded-lg overflow-hidden">
        <img
          className={`w-[50vw] max-w-[400px] h-[50vh] max-h-[400px] object-contain`}
          src={url}
        />
        {processedImage && (
          <img
            className={`w-full h-full absolute top-0 left-0 z-[2] object-contain`}
            src={processedImage}
          />
        )}
      </div>
    </div>
  )
}

export default UploadImage

Function 2: Image Marker Segmentation

The image marker segmentation is implemented using the Xenova/slimsam-77-uniform model. The effect is as follows, you can click on the image after it is loaded, and the segmentation is generated according to the coordinates of your click.

The processing logic can be divided into five steps

initialise the state, and load the model and processor
Get the image and load it, then save the image loading data and embedding data.
listen to the image click event, record the click data, divided into positive markers and negative markers, after each click according to the click data decoded to generate the mask data, and then according to the mask data to draw the segmentation effect.
interface display, this to your own design arbitrary play, not my prevail
click to save the image, according to the mask pixel data, match the original image data, and then exported through the canvas drawing

The code logic is as follows, React + TS , see my project's source code for details, the source code is located in src/components/boardOperation/uploadImage/imageSegmentation.tsx

import { useState, useRef, useEffect, useMemo, MouseEvent, FC } from 'react'
import {
  SamModel,
  AutoProcessor,
  RawImage,
  PreTrainedModel,
  Processor,
  Tensor,
  SamImageProcessorResult
} from '@huggingface/transformers'

import LoadingIcon from '@/components/icons/loading.svg?react'
import PositiveIcon from '@/components/icons/boardOperation/image-segmentation-positive.svg?react'
import NegativeIcon from '@/components/icons/boardOperation/image-segmentation-negative.svg?react'

interface MarkPoint {
  position: number[]
  label: number
}

const SEGMENTATION_STATUS = {
  LOADING: 0,
  NO_SUPPORT_WEBGPU: 1,
  LOAD_ERROR: 2,
  LOAD_SUCCESS: 3,
  PROCESSING: 4,
  PROCESSING_SUCCESS: 5
}

type SegmentationStatusType =
  (typeof SEGMENTATION_STATUS)[keyof typeof SEGMENTATION_STATUS]

const ImageSegmentation: FC<{ url: string }> = ({ url }) => {
  const [markPoints, setMarkPoints] = useState<MarkPoint[]>([])
  const [segmentationStatus, setSegmentationStatus] =
    useState<SegmentationStatusType>()
  const [pointStatus, setPointStatus] = useState<boolean>(true)

  const maskCanvasRef = useRef<HTMLCanvasElement>(null) // Segmentation mask
  const modelRef = useRef<PreTrainedModel>() // model
  const processorRef = useRef<Processor>() // processor
  const imageInputRef = useRef<RawImage>() // original image
  const imageProcessed = useRef<SamImageProcessorResult>() // Processed image
  const imageEmbeddings = useRef<Tensor>() // Embedding data

  const segmentationTip = useMemo(() => {
    switch (segmentationStatus) {
      case SEGMENTATION_STATUS.LOADING:
        return 'Image Segmentation function Loading'
      case SEGMENTATION_STATUS.NO_SUPPORT_WEBGPU:
        return 'WebGPU is not supported in this browser, to use the image segmentation function, please use the latest version of Google Chrome.'
      case SEGMENTATION_STATUS.LOAD_ERROR:
        return 'Image Segmentation function failed to load'
      case SEGMENTATION_STATUS.LOAD_SUCCESS:
        return 'Image Segmentation function loaded successfully'
      case SEGMENTATION_STATUS.PROCESSING:
        return 'Image Processing...'
      case SEGMENTATION_STATUS.PROCESSING_SUCCESS:
        return 'The image has been processed successfully, you can click on the image to mark it, the green mask area is the segmentation area.'
      default:
        return ''
    }
  }, [segmentationStatus])

  // 1. load model and processor
  useEffect(() => {
    ;(async () => {
      try {
        if (segmentationStatus === SEGMENTATION_STATUS.LOADING) {
          return
        }

        setSegmentationStatus(SEGMENTATION_STATUS.LOADING)
        if (!navigator?.gpu) {
          setSegmentationStatus(SEGMENTATION_STATUS.NO_SUPPORT_WEBGPU)
          return
        }
        const model_id = 'Xenova/slimsam-77-uniform'
        modelRef.current ??= await SamModel.from_pretrained(model_id, {
          dtype: 'fp16', // or "fp32"
          device: 'webgpu'
        })
        processorRef.current ??= await AutoProcessor.from_pretrained(model_id)

        setSegmentationStatus(SEGMENTATION_STATUS.LOAD_SUCCESS)
      } catch (err) {
        console.log('err', err)
        setSegmentationStatus(SEGMENTATION_STATUS.LOAD_ERROR)
      }
    })()
  }, [])

  // 2. process image
  useEffect(() => {
    ;(async () => {
      try {
        if (
          !modelRef.current ||
          !processorRef.current ||
          !url ||
          segmentationStatus === SEGMENTATION_STATUS.PROCESSING
        ) {
          return
        }
        setSegmentationStatus(SEGMENTATION_STATUS.PROCESSING)
        clearPoints()

        imageInputRef.current = await RawImage.fromURL(url)
        imageProcessed.current = await processorRef.current(
          imageInputRef.current
        )
        imageEmbeddings.current = await (
          modelRef.current as any
        ).get_image_embeddings(imageProcessed.current)

        setSegmentationStatus(SEGMENTATION_STATUS.PROCESSING_SUCCESS)
      } catch (err) {
        console.log('err', err)
      }
    })()
  }, [url, modelRef.current, processorRef.current])

  // Updating the mask effect
  function updateMaskOverlay(mask: RawImage, scores: Float32Array) {
    const maskCanvas = maskCanvasRef.current
    if (!maskCanvas) {
      return
    }
    const maskContext = maskCanvas.getContext('2d') as CanvasRenderingContext2D

    // Update canvas dimensions (if different)
    if (maskCanvas.width !== mask.width || maskCanvas.height !== mask.height) {
      maskCanvas.width = mask.width
      maskCanvas.height = mask.height
    }

    // Allocate buffer for pixel data
    const imageData = maskContext.createImageData(
      maskCanvas.width,
      maskCanvas.height
    )

    // Select best mask
    const numMasks = scores.length // 3
    let bestIndex = 0
    for (let i = 1; i < numMasks; ++i) {
      if (scores[i] > scores[bestIndex]) {
        bestIndex = i
      }
    }

    // Fill mask with colour
    const pixelData = imageData.data
    for (let i = 0; i < pixelData.length; ++i) {
      if (mask.data[numMasks * i + bestIndex] === 1) {
        const offset = 4 * i
        pixelData[offset] = 101 // r
        pixelData[offset + 1] = 204 // g
        pixelData[offset + 2] = 138 // b
        pixelData[offset + 3] = 255 // a
      }
    }

    // Draw image data to context
    maskContext.putImageData(imageData, 0, 0)
  }

  // 3. Decoding based on click data
  const decode = async (markPoints: MarkPoint[]) => {
    if (
      !modelRef.current ||
      !imageEmbeddings.current ||
      !processorRef.current ||
      !imageProcessed.current
    ) {
      return
    }

    // No click on the data directly clears the segmentation effect
    if (!markPoints.length && maskCanvasRef.current) {
      const maskContext = maskCanvasRef.current.getContext(
        '2d'
      ) as CanvasRenderingContext2D
      maskContext.clearRect(
        0,
        0,
        maskCanvasRef.current.width,
        maskCanvasRef.current.height
      )
      return
    }

    // Prepare inputs for decoding
    const reshaped = imageProcessed.current.reshaped_input_sizes[0]
    const points = markPoints
      .map((x) => [x.position[0] * reshaped[1], x.position[1] * reshaped[0]])
      .flat(Infinity)
    const labels = markPoints.map((x) => BigInt(x.label)).flat(Infinity)

    const num_points = markPoints.length
    const input_points = new Tensor('float32', points, [1, 1, num_points, 2])
    const input_labels = new Tensor('int64', labels, [1, 1, num_points])

    // Generate the mask
    const { pred_masks, iou_scores } = await modelRef.current({
      ...imageEmbeddings.current,
      input_points,
      input_labels
    })

    // Post-process the mask
    const masks = await (processorRef.current as any).post_process_masks(
      pred_masks,
      imageProcessed.current.original_sizes,
      imageProcessed.current.reshaped_input_sizes
    )

    updateMaskOverlay(RawImage.fromTensor(masks[0][0]), iou_scores.data)
  }

  const clamp = (x: number, min = 0, max = 1) => {
    return Math.max(Math.min(x, max), min)
  }

  const clickImage = (e: MouseEvent) => {
    if (segmentationStatus !== SEGMENTATION_STATUS.PROCESSING_SUCCESS) {
      return
    }

    const { clientX, clientY, currentTarget } = e
    const { left, top } = currentTarget.getBoundingClientRect()

    const x = clamp(
      (clientX - left + currentTarget.scrollLeft) / currentTarget.scrollWidth
    )
    const y = clamp(
      (clientY - top + currentTarget.scrollTop) / currentTarget.scrollHeight
    )

    const existingPointIndex = markPoints.findIndex(
      (point) =>
        Math.abs(point.position[0] - x) < 0.01 &&
        Math.abs(point.position[1] - y) < 0.01 &&
        point.label === (pointStatus ? 1 : 0)
    )

    const newPoints = [...markPoints]
    if (existingPointIndex !== -1) {
      // If there is a marker in the currently clicked area, it is deleted.
      newPoints.splice(existingPointIndex, 1)
    } else {
      newPoints.push({
        position: [x, y],
        label: pointStatus ? 1 : 0
      })
    }

    setMarkPoints(newPoints)
    decode(newPoints)
  }

  const clearPoints = () => {
    setMarkPoints([])
    decode([])
  }

  return (
    <div className="card shadow-xl overflow-auto">
      <div className="flex items-center gap-x-3">
        <button className="btn btn-primary btn-sm" onClick={clearPoints}>
          Clear Points
        </button>

        <button
          className="btn btn-primary btn-sm"
          onClick={() => setPointStatus(true)}
        >
          {pointStatus ? 'Positive' : 'Negative'}
        </button>
      </div>
      <div className="text-xs text-base-content mt-2">{segmentationTip}</div>
      <div
        id="test-image-container"
        className="relative mt-4 border border-base-content border-dashed rounded-lg h-[60vh] max-h-[500px] w-fit max-w-[60vw] overflow-x-auto overflow-y-hidden"
        onClick={clickImage}
      >
        {segmentationStatus !== SEGMENTATION_STATUS.PROCESSING_SUCCESS && (
          <div className="absolute z-[3] top-0 left-0 w-full h-full bg-slate-400 bg-opacity-70 flex justify-center items-center">
            <LoadingIcon className="animate-spin" />
          </div>
        )}
        <div className="h-full w-max relative overflow-hidden">
          <img className="h-full max-w-none" src={url} />

          <canvas
            ref={maskCanvasRef}
            className="absolute top-0 left-0 h-full w-full z-[1] opacity-60"
          ></canvas>

          {markPoints.map((point, index) => {
            switch (point.label) {
              case 1:
                return (
                  <PositiveIcon
                    key={index}
                    className="w-[24px] h-[24px] absolute z-[2] -ml-[13px] -mt-[14px] fill-[#FFD401]"
                    style={{
                      top: `${point.position[1] * 100}%`,
                      left: `${point.position[0] * 100}%`
                    }}
                  />
                )
              case 0:
                return (
                  <NegativeIcon
                    key={index}
                    className="w-[24px] h-[24px] absolute z-[2] -ml-[13px] -mt-[14px] fill-[#F44237]"
                    style={{
                      top: `${point.position[1] * 100}%`,
                      left: `${point.position[0] * 100}%`
                    }}
                  />
                )
              default:
                return null
            }
          })}
        </div>
      </div>
    </div>
  )
}

export default ImageSegmentation

Conclusion

Thank you for reading. This is the whole content of this article, I hope this article is helpful to you, welcome to like and favourite. If you have any questions, please feel free to discuss in the comment section!

Exploring the Canvas Series: Creative Brushes Part 3

Leo Song — Sun, 21 Apr 2024 12:15:37 +0000

Introduction

I am currently developing a powerful open source creative drawing board. This drawing board contains a variety of creative brushes, which allows users to experience a new drawing effect. Whether on mobile or PC , you can enjoy a better interactive experience and effect display . And this project has many powerful auxiliary painting functions, including but not limited to forward and backward, copy and delete, upload and download, multiple boards and layers and so on. I'm not going to list all the detailed features, looking forward to your exploration.

Link: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board Welcome to Star ⭐️

In the gradual development of the project, I plan to write some articles, on the one hand, to record the technical details, which is my habit all the time. On the other hand, I'd like to promote the project, and I hope to get your use and feedback, and of course, a Star would be my greatest support.

I'm going to explain the implementation of the Creative Brush in 3 articles, this is the third one, and I'll upload all the source code to my Github.

Github Source Code Demo

Multi Point Connection

The effect of multipoint connection is as follows

Multi-point connection is through the mouse in the coordinates of the movement of the randomly generated nearby points, and then the random points of the circle drawing, and each time will record the last movement of the point, and the two points of the line segment connection, you will have the above effect.

interface Point {
  x: number
  y: number
}

let isMouseDown = false
let lastPoints: Point[] = [] // Previous Array of random circular points

/**
 * Generate random points within a rectangle
 */
const generateRandomCoordinates = (
  centerX: number, // Rectangle Centre Point X
  centerY: number, // Rectangle Centre Point Y
  size: number, // Rectangle Size
  count: number // Number of generation
) => {
  const halfSize = size / 2
  const points = []

  for (let i = 0; i < count; i++) {
    const randomX = Math.floor(centerX - halfSize + Math.random() * size)
    const randomY = Math.floor(centerY - halfSize + Math.random() * size)
    points.push({ x: randomX, y: randomY })
  }

  return points
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.fillStyle = '#000000';
        context2D.strokeStyle = '#000000';
        context2D.lineWidth = 1;
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }

    if (isMouseDown) {
      const { clientX, clientY } = event
      // Generate random points
      const points = generateRandomCoordinates(clientX, clientY, 50, 3)
      draw(points)
      lastPoints = points
    }
  }

  const draw = (points: Point[]) => {
    if (!context2D) {
      return
    }

    // If there is a previous random point, connect it.
    if (lastPoints.length) {
      lastPoints.forEach(({ x, y }, index) => {
        context2D.beginPath();
        context2D.save();
        context2D.moveTo(x, y);
        context2D.lineTo(points[index].x, points[index].y);
        context2D.stroke();
        context2D.restore();
      })
    }

    // Circular drawing of the current point
    points.map((curPoint) => {
      context2D.beginPath();
      context2D.save();
      context2D.arc(curPoint.x, curPoint.y, 7, 0, 2 * Math.PI, false);
      context2D.fill();
      context2D.restore();
    })
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    lastPoints = []
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Wave Brush

The wave curve effect is as follows

Wave curve is in the mouse movement, according to the mouse to move the distance and angle of the two points for the semicircle drawing, and then the semicircle is every time will be flipped, so there will be a kind of wave effect

interface Point {
  x: number
  y: number
}

let isMouseDown = false
let movePoint: Point = { x: 0, y: 0 } // Moving Coordinate Recording
let flip = 1 // flip flag

/**
 * Get the distance between two points
 */
const getDistance = (start: Point, end: Point) => {
  return Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2))
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.strokeStyle = '#000'
        context2D.lineJoin = 'round'
        context2D.lineCap = 'round'
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
    const { clientX, clientY } = event
    movePoint = {
      x: clientX,
      y: clientY
    }
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }

    if (isMouseDown) {
      const { clientX, clientY } = event

      // Get the distance between two points
      const distance = getDistance(movePoint, { x: clientX, y: clientY })

      // Get the middle point of the two points, which is also the centre of the semicircle.
      const midX = (movePoint.x + clientX) / 2
      const midY = (movePoint.y + clientY) / 2

      context2D.beginPath();
      context2D.save();

      // Calculate the angle between two points
      const angle = Math.atan2(clientY - movePoint.y, clientX - movePoint.x)

      // Calculating whether to flip up or down
      const flipAngle = (flip % 2) * Math.PI

      // Drawing a semicircle
      context2D.arc(
        midX,
        midY,
        distance / 2,
        angle + flipAngle,
        angle + flipAngle + Math.PI
      );
      context2D.stroke();
      context2D.restore();

      // update data
      flip++;
      movePoint = {
        x: clientX,
        y: clientY
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = { x: 0, y: 0 }
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Thorn Brush

The thorn brush effect is as follows

Thorn brush is in the mouse movement, through the movement of the two points of the distance and angle of the ellipse drawing, because the height of the ellipse is relatively small, coupled with the width is calculated by the distance of movement, so there will be a kind of sharp effect

interface Point {
  x: number
  y: number
}

let isMouseDown = false
let movePoint: Point = { x: 0, y: 0 } // Moving Coordinate Recording
const minSize = 3 // Minimum width and height of ellipse 

/**
 * Get the distance between two points
 */
const getDistance = (start: Point, end: Point) => {
  return Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2))
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.fillStyle = '#000'
        context2D.lineJoin = 'round'
        context2D.lineCap = 'round'
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
    const { clientX, clientY } = event
    movePoint = {
      x: clientX,
      y: clientY
    }
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }

    if (isMouseDown) {
      const { clientX, clientY } = event
      // Get the distance between two points
      const distance = getDistance(movePoint, point)

      // Get the middle point of the two points, which is also the centre of the ellipse.
      const midX = (movePoint.x + clientX) / 2
      const midY = (movePoint.y + clientY) / 2

      context2D.beginPath();
      context2D.save();

      // Calculate the angle between two points
      const angle = Math.atan2(clientY - movePoint.y, clientX - movePoint.x)

      /**
       * Drawing ellipse
       * height:  minSize
       * width: distance * 5 + minSize
       */
      context2D.ellipse(
        midX,
        midY,
        distance * 5 + minSize,
        minSize,
        angle,
        0,
        2 * Math.PI
      );
      context2D.fill();
      context2D.restore();

      movePoint = {
        x: clientX,
        y: clientY
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = { x: 0, y: 0 }
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Conclusion

Exploring the Canvas Series: Creative Brushes Part 2

Leo Song — Fri, 19 Apr 2024 09:10:58 +0000

Introduction

Link: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board Welcome to Star ⭐️

I'm going to explain the implementation of the Creative Brush in 3 articles, this is the second one, and I'll upload all the source code to my Github.

Github Source Code Demo

Multi Colour Brush

The multicolour brush effect is as follows

Multi-colour brushes are similar to material brushes in that they receive a CanvasPattern object via strokeStyle.
We can create a new canvas, then draw the effect you want on this canvas, and finally create a pattern from this canvas and assign it to the strokeStyle to get a multicolour brush effect.

import { useEffect, useRef, useState, MouseEvent } from 'react'
import './index.css'

let isMouseDown = false
let movePoint: { x: number, y: number } | null = null
const COLOR_WIDTH = 5 // width of each colour

/**
 * get multicolour brush pattern
 * @param colors Colour array, colours to be painted
 */
const getPattern = async (colors: string[]) => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  renderRow(canvas, context, colors)
  return context.createPattern(canvas, 'repeat')
}

/**
 * row effect drawing
 */
const renderRow = (
  canvas: HTMLCanvasElement,
  context: CanvasRenderingContext2D,
  colors: string[]
) => {
  canvas.width = 20
  canvas.height = colors.length * COLOR_WIDTH
  colors.forEach((color, i) => {
    context.fillStyle = color
    context.fillRect(0, COLOR_WIDTH * i, 20, COLOR_WIDTH)
  })
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    initDraw()
  }, [canvasRef])

  const initDraw = async () => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.lineCap = 'round'
        context2D.lineJoin = 'round'
        context2D.lineWidth = 10
        // Assigns a value to strokeStyle based on the generated pattern
        const pattern = await getPattern(['blue', 'red', 'black'])
        if (pattern) {
          context2D.strokeStyle = pattern
        }

        setContext2D(context2D)
      }
    }
  }

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event
      if (movePoint) {
        context2D.beginPath()
        context2D.moveTo(movePoint.x, movePoint.y)
        context2D.lineTo(clientX, clientY)
        context2D.stroke()
      }
      movePoint = {
        x: clientX,
        y: clientY
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = null
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Text Brush

The text brush will follow the mouse movement to draw the text, the effect is as follows

The text brush is drawn in three steps:
- 1. The distance between the two moves is the distance, then the width of the text is determined by measureText, if the distance is greater than the width of the text, then it can be drawn.
- 2. Then we take the vector of the two points, get the angle according to Math.atan2, and draw the current text according to this angle.
- 3. Finally, update the track coordinates, while drawing the text coordinates to the next one, and start again if the drawing is finished.

interface Point {
  x: number
  y: number
}

let isMouseDown = false
let movePoint: Point = { x: 0, y: 0 }

let counter = 0 // currently drawing text
const textValue = 'PaintBoard' // Drawing text content
const minFontSize = 5 // min fontsize

/**
 * Get the distance between two points
 */
const getDistance = (start: Point, end: Point) => {
  return Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2))
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.fillStyle = '#000'
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
    const { clientX, clientY } = event
    movePoint = {
      x: clientX,
      y: clientY
    }
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event

      // Get the distance between two points
      const distance = getDistance(movePoint, { x: clientX, y: clientY })
      const fontSize = minFontSize + distance
      const letter = textValue[counter]
      context2D.font = `${fontSize}px Georgia`

      // Get text width
      const textWidth = context2D.measureText(letter).width

      if (distance > textWidth) {
        // Calculate the current movement angle
        const angle = Math.atan2(clientY - movePoint.y, clientX - movePoint.x)

        context2D.save();
        context2D.translate(movePoint.x, movePoint.y)
        context2D.rotate(angle);
        context2D.fillText(letter, 0, 0);
        context2D.restore();

        // Update the position of the text after drawing
        movePoint = {
          x: movePoint.x + Math.cos(angle) * textWidth,
          y: movePoint.y + Math.sin(angle) * textWidth
        }

        // Update data
        counter++
        if (counter > textValue.length - 1) {
          counter = 0
        }
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = { x: 0, y: 0 }
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Multi Line Connection

The effect of multi-line connection is as follows:

Multiline connectivity is the process of connecting previous trajectory points twice during normal plotting, and then adjusting the number of points or the number of points to be connected to achieve different effects.

interface Point {
  x: number
  y: number
}

let isMouseDown = false
let movePoints: Point[] = [] // Mouse movement track point recording

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.lineCap = 'round'
        context2D.lineJoin = 'round'
        context2D.lineWidth = 3

        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event
      const length = movePoints.length
      if (length) {
        // Normal line segment connection
        context2D.beginPath()
        context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)
        context2D.lineTo(clientX, clientY)
        context2D.stroke()

        /**
         * Linking of previous mouse points
         * Currently, connections are made at intervals of 5 points, and the number of connections is 3.
         */
        if (length % 5 === 0) {
          for (
            let i = movePoints.length - 5, count = 0;
            i >= 0 && count < 3;
            i = i - 5, count++
          ) {
            context2D.save()
            context2D.beginPath()
            context2D.lineWidth = 1
            context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)
            context2D.lineTo(movePoints[i].x, movePoints[i].y)
            context2D.stroke()
            context2D.restore()
          }
        }
      }
      movePoints.push({
        x: clientX,
        y: clientY
      })
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoints = []
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Reticulate Brush

The reticulate brush effect is as follows

Reticulate brush is in the normal drawing process, will be traversed on the previous track points, if certain conditions are met, it will be judged as similar, and then the similar points for the second connection, multiple connections will achieve the effect of the net!

interface Point {
  x: number
  y: number
}

let isMouseDown = false
let movePoints: Point[] = [] // Mouse point recording

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.lineCap = 'round'
        context2D.lineJoin = 'round'
        context2D.lineWidth = 3

        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event
      const length = movePoints.length
      if (length) {
        // Normal Drawing Connection
        context2D.beginPath()
        context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)
        context2D.lineTo(clientX, clientY)
        context2D.stroke()

        if (length % 2 === 0) {
          const limitDistance = 1000
          /**
           * If dx * dx + dy * dy < 1000, then the two points are considered to be close, and the line is quadratically connected.
           * limitDistance can be adjusted by yourself
           */
          for (let i = 0; i < length; i++) {
            const dx = movePoints[i].x - movePoints[length - 1].x
            const dy = movePoints[i].y - movePoints[length - 1].y
            const d = dx * dx + dy * dy

            if (d < limitDistance) {
              context2D.save()
              context2D.beginPath()
              context2D.lineWidth = 1
              context2D.moveTo(movePoints[length - 1].x, movePoints[length - 1].y)
              context2D.lineTo(movePoints[i].x, movePoints[i].y)
              context2D.stroke()
              context2D.restore()
            }
          }
        }
      }
      movePoints.push({
        x: clientX,
        y: clientY
      })
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoints = []
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Conclusion

Exploring the Canvas Series: Creative Brushes Part 1

Leo Song — Wed, 17 Apr 2024 12:44:46 +0000

Introduction

Link: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board Welcome to Star ⭐️

I'm going to explain the implementation of the Creative Brush in 3 articles, this is the first one, and I'll upload all the source code to my Github.

Github Source Code Demo

Rainbow Brush

The rainbow brush changes colour as it is being drawn, the effect is as follows.

This effect is just an extra colour shift compared to a normal brush, which as we know is implemented by connecting line segments one by one, whether they are curves or straight lines. So in order to achieve the rainbow effect, we need to change the colour of each line segment, which is done by modifying strokeStyle.
Then to change the strokeStyle colour, we can't simply express it as a regular colour, we need to know about HSL.
- HSL is a colour expression that describes colours by means of a cylindrical coordinate system, divided into Hue (H), Saturation (S), Luminance (L).
- Hue (H): Indicates the position of the colour on the colour ring.
- Saturation (S): It indicates the purity or degree of greyness of a colour. A saturation of 100% indicates a fully saturated colour, while 0% indicates a greyish colour.
- Luminance (L): It indicates the brightness of the colour. Adjusting the Luminance changes the lightness or darkness of the colour.
- MDN Detailed description
- HSL Online Showcase Website: https://mothereffinghsl.com/
Instead, we just need to keep adjusting the hue in the HSL expression to achieve the effect of constantly changing colours.

let hue = 0 // Record the current hue
let isMouseDown = false
let movePoint: { x: number, y: number } | null = null // Record mouse point

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.lineCap = 'round'
        context2D.lineJoin = 'round'
        context2D.lineWidth = 10
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event
      if (movePoint) {
        /**
         * Gradually increases by 1 in the range 0 to 360, but resets to 0 when greater than or equal to 360.
         */
        hue = hue < 360 ? hue + 1 : 0
        context2D.beginPath()
        // Change colours via HSL
        context2D.strokeStyle = `hsl(${hue}, 90%, 50%)`
        context2D.moveTo(movePoint.x, movePoint.y)
        context2D.lineTo(clientX, clientY)
        context2D.stroke()
      }
      movePoint = {
        x: clientX,
        y: clientY
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = null
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Multi Shape Brush

Multi-shape brush will move with the mouse, in the path of the move to generate random points for shape drawing, the effect is as follows

Implementation method, through each mouse movement coordinates, in the coordinates of the surrounding range of a few randomly generated points, and then in these points through the new Path2D() for the generation of graphical path, and then draw the

let isMouseDown = false

// Music Symbol Shape Path
const musicPath = '***'

/**
 * Generate random points within a rectangle
 */
const generateRandomCoordinates = (
  centerX: number, // Rectangle Centre Point X
  centerY: number, // Rectangle Centre Point Y
  size: number, // Rectangle Size
  count: number // Number of generation
) => {
  const halfSize = size / 2
  const points = []

  for (let i = 0; i < count; i++) {
    const randomX = Math.floor(centerX - halfSize + Math.random() * size)
    const randomY = Math.floor(centerY - halfSize + Math.random() * size)
    points.push({ x: randomX, y: randomY })
  }

  return points
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.fillStyle = '#000'
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }

    if (isMouseDown) {
      const { clientX, clientY } = event
      const points = generateRandomCoordinates(clientX, clientY, 30, 3)
      points.map((curPoint) => {
        createShape(curPoint.x, curPoint.y)
      })
    }
  }

  const createShape = (x: number, y: number) => {
    if (!context2D) {
      return
    }
    // Path creation
    const path = new Path2D(musicPath);
    context2D.beginPath();

    context2D.save();
    context2D.translate(x, y);

    // Shape random scaling
    const scale = Math.random() * 1.5 + 0.5
    context2D.scale(scale, scale);

    context2D.fill(path);
    context2D.restore();
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    moveDate = 0
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Material Brush

The effect of the material brush is as follows

The first thing you need is a transparent picture of the material, this picture is used as a base, if you use a picture made of crayon material, it will have a crayon effect, if you use a picture made of frosted material, it will have a frosted effect.
The strokeStyle property can then take a CanvasPattern object, MDN
We can create a new canvas, then draw an image on this canvas, then draw a colour you want, and finally create a pattern from this canvas and assign it to strokeStyle to get the effect of the material's brush.

let isMouseDown = false
let movePoint: { x: number, y: number } | null = null

// Load the required material image
const materialImage = new Promise<HTMLImageElement>((resolve) => {
  const image = new Image()
  image.src = 'Material image URL'
  image.onload = () => {
    resolve(image)
  }
})

/**
 * Get pattern object
 * @param color background colour
 */
const getPattern = async (color: string) => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  canvas.width = 100
  canvas.height = 100
  context.fillStyle = color

  // Draw a rectangle as the background colour
  context.fillRect(0, 0, 100, 100)
  const image = await materialImage

  // Drawing of material
  if (image) {
    context.drawImage(image, 0, 0, 100, 100)
  }
  return context.createPattern(canvas, 'repeat')
}

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    initDraw()
  }, [canvasRef])

  const initDraw = async () => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.lineCap = 'round'
        context2D.lineJoin = 'round'
        context2D.lineWidth = 10
        // get pattern material
        const pattern = await getPattern('blue')
        if (pattern) {
          context2D.strokeStyle = pattern
        }
        setContext2D(context2D)
      }
    }
  }

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    if (isMouseDown) {
      const { clientX, clientY } = event
      if (movePoint) {
        // Brush Drawing
        context2D.beginPath()
        context2D.moveTo(movePoint.x, movePoint.y)
        context2D.lineTo(clientX, clientY)
        context2D.stroke()
      }
      movePoint = {
        x: clientX,
        y: clientY
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
    movePoint = null
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Pixel Brush

The pixel brush effect is as follows

Pixel Paintbrush is through the mouse to move, in the path of the mouse to move, randomly point according to the position of the rectangle drawing, multiple rectangles combined to have a similar effect to the pixel dot

let isMouseDown = false
const drawWidth = 15 // Pixel Brush Size
const step = 5 // Size of each pixel point

function PaintBoard() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)
  const [context2D, setContext2D] = useState<CanvasRenderingContext2D | null>(null)

  useEffect(() => {
    if (canvasRef?.current) {
      const context2D = canvasRef?.current.getContext('2d')
      if (context2D) {
        context2D.fillStyle = '#000';
        setContext2D(context2D)
      }
    }
  }, [canvasRef])

  const onMouseDown = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = true
  }

  const onMouseMove = (event: MouseEvent) => {
    if (!canvasRef?.current || !context2D) {
      return
    }

    if (isMouseDown) {
      const { clientX, clientY } = event

      /**
       * Iterate over the current pixel brush size, and determine whether to draw based on a random number.
       */
      for (let i = -drawWidth; i < drawWidth; i += step) {
        for (let j = -drawWidth; j < drawWidth; j += step) {
          if (Math.random() > 0.5) {
            context2D.save();
            context2D.fillRect(clientX + i, clientY + j, step, step);
            context2D.fill();
            context2D.restore();
          }
        }
      }
    }
  }

  const onMouseUp = () => {
    if (!canvasRef?.current || !context2D) {
      return
    }
    isMouseDown = false
  }

  return (
    <div>
      <canvas
        ref={canvasRef}
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
      />
    </div>
  )
}

Conclusion

Exploring the Canvas Series: The Art of Time Reversal in the Canvas

Leo Song — Wed, 10 Jan 2024 15:18:59 +0000

Introduction

After more than a month of restructuring, I have successfully crafted a powerful multi-platform and entertaining drawing board. This drawing board integrates various creative brushes, providing users with a completely new painting experience. Whether on mobile or PC, users can enjoy a seamless interactive experience and impressive visual displays. Furthermore, this project incorporates many popular drawing board features found online, including but not limited to undo/redo, copy/delete, upload/download, multiple boards, and multiple layers. I won't list all the detailed functionalities here, but I look forward to your exploration.

Link: https://songlh.top/paint-board/

Github: https://github.com/LHRUN/paint-board

After completing the refactoring, I plan to write a series of articles. On one hand, it is to document technical details, a habit I have maintained over time. On the other hand, it is to promote the project, hoping to gain your usage and feedback. Of course, giving it a "Star" would be the greatest support for me.

This article is the first installment of the "Exploring the Drawing Board" series, where I will delve into the details of the undo and redo functionality. Examples will be provided using Fabric.js syntax, but the concepts are applicable across various frameworks.

Solution One: Canvas-level Caching

The first approach is canvas-level caching, which is the simplest. In this approach, there is no need to be concerned about the specific modifications made to elements, and there is no need to differentially process the entire canvas data. Simply put, whenever an effect needs to be changed (such as adding, deleting, or modifying elements), just push the current canvas data push the history operation stack, and then undo and redo by reloading the corresponding data.

The advantage of this approach lies in its simplicity and straightforwardness; there is no need to consider details, as the history operation stack records every step of the changes. However, it is important to note that due to the indiscriminate caching of the entire canvas data, memory usage can be relatively high.

There are generally two popular approaches to maintaining this kind of history stack:

Single operation stack:

Utilize a single operation stack to record each step of the operations.
Use an index to specify the current state, facilitating undo and redo operations.
When a new operation is performed, push it onto the stack and update the index of the current state.

Dual-stack maintenance:

Maintain two stacks, one for undo operations and the other for redo operations.
When a user performs a new operation, push it onto the undo stack and clear the redo stack.
During an undo operation, pop the latest state from the undo stack and save it to the redo stack.
During a redo operation, pop the state from the redo stack and push it onto the undo stack.

Here is a simple example of a single operation stack:

class History {
  constructor() {
    this.stack = []; // An array used to hold the history state
    this.currentIndex = -1; // A subscript pointing to the current state
  }

  // Adding the current state to the history
  saveState(state) {
    // If there are currently states that have not been redone, remove all states after the current subscript.
    if (this.currentIndex < this.stack.length - 1) {
      this.stack = this.stack.slice(0, this.currentIndex + 1);
    }
    this.stack.push(state);
    this.currentIndex++;
  }

  // Undo, return to previous state
  undo() {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      return this.stack[this.currentIndex];
    }
    return null;
  }

  // Redo, return to next state
  redo() {
    if (this.currentIndex < this.stack.length - 1) {
      this.currentIndex++;
      return this.stack[this.currentIndex];
    }
    return null;
  }

  canUndo() {
    return this.currentIndex > 0;
  }

  canRedo() {
    return this.currentIndex < this.stack.length - 1;
  }

  clear() {
    this.stack = [];
    this.currentIndex = -1;
  }
}

Solution Two: Cache Current Operation Commands

When employing canvas-level caching, the large memory footprint and the presence of significant redundant data lead to the second approach – caching only the current operation commands. This strategy is more flexible and memory-efficient, as it records each specific operation step, avoiding the redundancy of storing the entire canvas state. In complex projects, judicious use of this approach can result in significant performance improvements.

For example:

When adding an element, store an "add" command along with the currently drawn object. To undo, simply delete the current element.
When deleting an element, store a "delete" command and the identifier of the deleted element. To undo, restore the deleted element.
When modifying an element, store a "modify" command and the current changed element data. For simple operations like position movement, only store changes in position coordinates. For complex operations like scaling, store changes in current scaling ratios and other relevant data. To undo, perform the corresponding operation based on the command type.

This approach not only reduces memory usage in complex projects but also enhances flexibility by controlling each operation step effectively. However, the implementation process can be complex, requiring significant effort in the diff algorithm to accurately track state changes and ensure precise data recording.

Here is a simple example, with a strong association with the drawing logic in a specific project:

class Command {
  constructor(execute, undo, value) {
    this.execute = execute; // execute command
    this.undo = undo;       // undo command
    this.value = value;     // The parameter of the command, which can be the current drawing object
  }

  exec() {
    this.execute(this.value);
  }

  unexec() {
    this.undo(this.value);
  }
}

class History {
  constructor() {
    this.commands = []; // Save command stack
    this.index = -1;    // Pointer to the command's location on the stack
  }

  // Execute a new command and put it on the stack
  execute(command) {
    this.commands.slice(0, this.index)
    this.commands.push(command);
    command.exec();
    this.index++;
  }

  undo() {
    if (this.index < 0) return;
    const command = this.commands[this.index];
    if (command) {
      command.unexec();
      this.index--;
    }
  }

  redo() {
    const command = this.commands[this.index + 1];
    if (command) {
      command.exec();
      this.index++;
    }
  }
}

Canvas-level Caching Optimization

However, when dealing with complex drawing effects, the calculation of command-level caching can become intricate, making it challenging to accurately compute differences between multiple elements. In such situations, I recommend adopting an optimization strategy by refining the canvas-level caching from the first approach. The primary drawback of canvas-level caching is its significant memory consumption. However, by performing a diff operation on the canvas cache state after each operation and storing only the current differential data, the memory footprint can be significantly reduced.

For the diff operation, I recommend using jsondiffpatch

jsondiffpatch provides several commonly used APIs:

jsondiffpatch.diff(left, right[, delta])
- Compares the differences between two objects, left and right. The optional parameter delta is a known difference, enhancing performance.
jsondiffpatch.patch(obj, delta)
- Applies the given difference delta to the object obj, returning the updated object.
jsondiffpatch.unpatch(obj, delta)
- Removes the specified difference delta from the object obj`, returning the object to its pre-patched state.

Below is an example of applying jsondiffpatch to a History class, which is the approach I am currently using in my drawing board project.

`ts
class History {
diffs: Array = []
canvasData: Partial = {}
index = 0

constructor() {
const canvasJson = canvas.toDatalessJSON()
this.canvasData = canvasJson
}

saveState() {
this.diffs = this.diffs.slice(0, this.index)
const canvasJson = canvas.toDatalessJSON()
const delta = diff(canvasJson, this.canvasData)
this.diffs.push(delta)
this.index++
this.canvasData = canvasJson
}

undo() {
if (canvas && this.index > 0) {
const delta = this.diffs[this.index - 1]
this.index--
const canvasJson = patch(this.canvasData, delta)
canvas.loadFromJSON(canvasJson, () => {
canvas.requestRenderAll()
this.canvasData = canvasJson
})
}
}

redo() {
if (this.index < this.diffs.length && canvas) {
const delta = this.diffs[this.index]
this.index++
const canvasJson = unpatch(this.canvasData, delta)
canvas.loadFromJSON(canvasJson, () => {
canvas.requestRenderAll()
this.canvasData = canvasJson
})
}
}

clean() {
canvas.clear()
this.index = 0
this.diffs = []
this.canvasData = {}
}
}
`

Conclusion

Thank you for reading. This is the whole content of this article, I hope this article is helpful to you, welcome to like and favorite. If you have any questions, please feel free to discuss in the comment section!

Canvas Artistry：Drawing magic with multiple effects

Leo Song — Fri, 01 Dec 2023 14:52:19 +0000

Introduction

About half a year ago. I made a Canvas multifunctional drawing board with some of the following main features

Freestyle drawing
- Supports color changes and real-time adjustment of line width according to the drawing speed.
- Offers a multitude of effects such as fluorescent, multi-color, crayon, spray, bubbles and more.
Eraser.
- Linear erase function with mouse movement.
Drawing text
- By double clicking on the drawing board, the user can enter text and draw in the specified position.
Drawing board Drag & Drop
- Holding down the space bar allows the user to drag and drop the drawing board infinitely.
Select Mode
- Once in selection mode, the user can box in elements by clicking on them, zoom or move them by holding down the handle, and delete selected elements with the Backspace key.
Layer
- The content of the drawing board is displayed in the order of the layers, and users can add, delete and sort layers.
Provides undo and reverse undo features that allow users to clear the board or save the content as an image.

Then recently I had some free time and decided to write a series of articles documenting my design ideas and code. This is my second post. If you are interested in this project, feel free to visit and also feel free to give the project a Star ⭐️.

Github: https://github.com/LHRUN/paint-board

In this article, I'll detail the six drawing effects

Basic single-color
fluorescent
multi-color
sprayers
crayons
bubbles

Basic Single Color

There are two key points to consider when implementing the basic functionality of the brush:

Speed-aware line width adjustment: Dynamically calculates the current moving speed while the mouse is moving and adjusts the line width according to the speed. This design aims to narrow the line width when the mouse is moving fast and return to normal when it is moving slow to enhance the drawing effect.
To avoid poor results when connecting points in a straight line, a Bezier curve is used for the connection. This curved connection helps to smooth the transition and enhance the beauty and accuracy of the drawn lines.

/**
 * Add new positon on mouseover
 * @param position
 */
addPosition(position: MousePosition) {
  this.positions.push(position)
  if (this.positions.length > 1) {
    // Calculate movement speed
    const mouseSpeed = this._computedSpeed(
      this.positions[this.positions.length - 2],
      this.positions[this.positions.length - 1]
    )
    // // Calculate the current line width
    const lineWidth = this._computedLineWidth(mouseSpeed)
    this.lineWidths.push(lineWidth)
  }
}

/**
 * Calculate movement speed
 * @param start start position
 * @param end end position
 */
_computedSpeed(start: MousePosition, end: MousePosition) {
  // get distance
  const moveDistance = getDistance(start, end)

  const curTime = Date.now()
  // Get move interval
  const moveTime = curTime - this.lastMoveTime
  // calculation speed
  const mouseSpeed = moveDistance / moveTime
  // Update last move time
  this.lastMoveTime = curTime
  return mouseSpeed
}

/**
 * Calculate width
 * @param speed Mouse Move Speed
 */
_computedLineWidth(speed: number) {
  let lineWidth = 0
  const minWidth = this.minWidth
  const maxWidth = this.maxWidth
  if (speed >= this.maxSpeed) {
    lineWidth = minWidth
  } else if (speed <= this.minSpeed) {
    lineWidth = maxWidth
  } else {
    lineWidth = maxWidth - (speed / this.maxSpeed) * maxWidth
  }

  lineWidth = lineWidth * (1 / 3) + this.lastLineWidth * (2 / 3)
  this.lastLineWidth = lineWidth
  return lineWidth
}

Iterate over all coordinates when rendering

/**
 * free draw render
 * @param context canvas 2d render context
 * @param instance FreeDraw
 */
function freeDrawRender(
  context: CanvasRenderingContext2D,
  instance: FreeLine
) {
  context.save()
  context.lineCap = 'round'
  context.lineJoin = 'round'
  switch (instance.style) {
    // Right now it's just the basic brushes, but we'll be adding different cases later.
    case FreeDrawStyle.Basic:
      context.strokeStyle = instance.colors[0]
      break
    default:
      break
  }
  for (let i = 1; i < instance.positions.length; i++) {
    switch (instance.style) {
      case FreeDrawStyle.Basic:
        _drawBasic(instance, i, context)
        break
      default:
        break
    }
  }
  context.restore()
}

/**
 * Drawing basic lines
 * @param instance FreeDraw instance
 * @param i current index
 * @param context canvas 2d render context
 * @param cb Some pre-draw processing, change some styles
 * 
 * 1. If it's the first two coordinates, just connect them via lineTo
 * 2. If the coordinates are after the first two, the connection is made using a Bezier curve
 *    For example, if there are three points a, b, and c, when we get to point c, we connect the middle point of the ab coordinate as the start point, the middle point of the bc coordinate as the end point, and point b as the control point.
 */
function _drawBasic(
  instance: FreeLine,
  i: number,
  context: CanvasRenderingContext2D
  cb?: (
    instance: FreeDraw,
    i: number,
    context: CanvasRenderingContext2D
  ) => void
) {
  const { positions, lineWidths } = instance
  const { x: centerX, y: centerY } = positions[i - 1]
  const { x: endX, y: endY } = positions[i]
  context.beginPath()
  if (i == 1) {
    context.moveTo(centerX, centerY)
    context.lineTo(endX, endY)
  } else {
    const { x: startX, y: startY } = positions[i - 2]
    const lastX = (startX + centerX) / 2
    const lastY = (startY + centerY) / 2
    const x = (centerX + endX) / 2
    const y = (centerY + endY) / 2
    context.moveTo(lastX, lastY)
    context.quadraticCurveTo(centerX, centerY, x, y)
  }

  context.lineWidth = lineWidths[i]
  cb?.(instance, i, context)
  context.stroke()
}

Fluorescent

Fluorescent simply adds a shadow to the base style

function freeDrawRender(
  context: CanvasRenderingContext2D,
  instance: FreeLine
) {
  context.save()
  context.lineCap = 'round'
  context.lineJoin = 'round'
  switch (instance.style) {
    // ...
    // Fluorescent  Adds a shadow effect
    case FreeDrawStyle.Shadow:
      context.shadowColor = instance.colors[0]
      context.strokeStyle = instance.colors[0]
      break
    default:
      break
  }
  for (let i = 1; i < instance.positions.length; i++) {
    switch (instance.style) {
      // ...
      // Fluorescent
      case FreeDrawStyle.Shadow:
        _drawBasic(instance, i, context, (instance, i, context) => {
          context.shadowBlur = instance.lineWidths[i]
        })
        break
      default:
        break
    }
  }
  context.restore()
}

Multi Color

Multi-color brushes require the use of context.createPattern, an api that allows you to create a specified template through the canvas, which can then be made to repeat the meta-image in the specified direction, for more information on how to use this see MDN

export const freeDrawRender = (
  context: CanvasRenderingContext2D,
  instance: FreeDraw,
  material: Material
) => {
  context.save()
  context.lineCap = 'round'
  context.lineJoin = 'round'
  switch (instance.style) {
    // ...
    // MultiColor
    case FreeDrawStyle.MultiColor:
      context.strokeStyle = getMultiColorPattern(instance.colors)
      break
    default:
      break
  }

  for (let i = 1; i < instance.positions.length; i++) {
    switch (instance.style) {
      // ...
      // MultiColor
      case FreeDrawStyle.MultiColor:
        _drawBasic(instance, i, context)
        break
      default:
        break
    }
  }
  context.restore()
}

/**
 * Get multi-color templates
 * @param colors multicolor array
 */
const getMultiColorPattern = (colors: string[]) => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  const COLOR_WIDTH = 5 // Width of each color

  canvas.width = COLOR_WIDTH * colors.length
  canvas.height = 20
  colors.forEach((color, i) => {
    context.fillStyle = color
    context.fillRect(COLOR_WIDTH * i, 0, COLOR_WIDTH, 20)
  })
  return context.createPattern(canvas, 'repeat') as CanvasPattern
}

Spray

Spray is a snowflake-like effect that draws randomly on the path of mouse movement. Initially during the implementation, I found that if random snowflake points were recorded for each point and then cached down, it would lead to the problem of excessive memory usage. To solve this problem, I tried generating 5 different sets of data in advance and displaying them sequentially, which can effectively control the memory usage while achieving the random effect.

export const freeDrawRender = (
  context: CanvasRenderingContext2D,
  instance: FreeDraw,
  material: Material
) => {
  context.save()
  context.lineCap = 'round'
  context.lineJoin = 'round'
  switch (instance.style) {
    // ...
    // Spray
    case FreeDrawStyle.Spray:
      context.fillStyle = instance.colors[0]
      break
    default:
      break
  }

  for (let i = 1; i < instance.positions.length; i++) {
    switch (instance.style) {
      // ...
      // Spray
      case FreeDrawStyle.Spray:
        _drawSpray(instance, i, context)
        break
      default:
        break
    }
  }
  context.restore()
}

/**
 * Spray
 * @param instance Spray instance
 * @param i current index
 * @param context canvas 2d
 */
const _drawSpray = (
  instance: FreeDraw,
  i: number,
  context: CanvasRenderingContext2D
) => {
  const { x, y } = instance.positions[i]
  for (let j = 0; j < 50; j++) {
    /**
     * sprayPoint is 5 sets of randomized spray data that I generated in advance.
     * {
     *    angle
     *    radius
     *    alpha
     * }
     */
    const { angle, radius, alpha } = sprayPoint[i % 5][j]
    context.globalAlpha = alpha
    const distanceX = radius * Math.cos(angle)
    const distanceY = radius * Math.sin(angle)
    // Limit the width of the spray according to the width, because the spray is too small to look good, I'll uniformly double the size of the
    if (
      distanceX < instance.lineWidths[i] * 2 &&
      distanceY < instance.lineWidths[i] * 2 &&
      distanceX > -instance.lineWidths[i] * 2 &&
      distanceY > -instance.lineWidths[i] * 2
    ) {
      context.fillRect(x + distanceX, y + distanceY, 2, 2)
    }
  }
}

Crayon

The crayon effect is also achieved using context.createPattern, first, with the current color as the base color, and then by overlaying a sheet of transparent crayon material pattern. This method is able to render the texture of the crayon by overlaying the material pattern while preserving the color of the brush.

export const freeDrawRender = (
  context: CanvasRenderingContext2D,
  instance: FreeDraw,
  material: Material
) => {
  context.save()
  context.lineCap = 'round'
  context.lineJoin = 'round'
  switch (instance.style) {
    // ...
    // Crayon
    case FreeDrawStyle.Crayon:
      context.strokeStyle = getCrayonPattern(
        instance.colors[0],
        material.crayon
      )
      break
    default:
      break
  }

  for (let i = 1; i < instance.positions.length; i++) {
    switch (instance.style) {
      // ...
      // Crayon
      case FreeDrawStyle.Crayon:
        _drawBasic(instance, i, context)
        break
      default:
        break
    }
  }
  context.restore()
}

/**
 * get crayon template
 * @param color crayon color
 * @param crayon crayon material
 */
const getCrayonPattern = (color: string, crayon: Material['crayon']) => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  canvas.width = 100
  canvas.height = 100
  context.fillStyle = color
  context.fillRect(0, 0, 100, 100)
  if (crayon) {
    context.drawImage(crayon, 0, 0, 100, 100)
  }
  return context.createPattern(canvas, 'repeat') as CanvasPattern
}

Bubble

Record the radius and opacity of the bubble on mouseover.
When rendering, use context.arc for circle drawing to render the bubble effect.

addPosition(position: MousePosition) {
  // ...
  // Record the radius and opacity of the bubble
  if (this.style === FreeDrawStyle.Bubble && this.bubbles) {
    this.bubbles.push({
      // getRandomInt Get random integer in range
      radius: getRandomInt(this.minWidth * 2, this.maxWidth * 2),
      // opacity
      opacity: Math.random()
    })
  }
  // ...
}

/**
 * draw bubble
 * @param instance bubble instance
 * @param i current index
 * @param context canvas 2D
 */
const _drawBubble = (
  instance: FreeDraw,
  i: number,
  context: CanvasRenderingContext2D
) => {
  context.beginPath()
  if (instance.bubbles) {
    const { x, y } = instance.positions[i]
    context.globalAlpha = instance.bubbles[i].opacity
    context.arc(x, y, instance.bubbles[i].radius, 0, Math.PI * 2, false)
    context.fill()
  }
}

Conclusion

If you're also writing related features, I hope this will help you, and if you find any problems or have a good solution, please feel free to discuss 👻

Canvas Artistry: Mastering Selection, Dragging, and Scaling

Leo Song — Thu, 30 Nov 2023 14:20:34 +0000

Introduction

About half a year ago. I made a Canvas multifunctional drawing board with some of the following main features

Freestyle drawing
- Supports color changes and real-time adjustment of line width according to the drawing speed.
- Offers a multitude of effects such as fluorescent, multi-color, crayon, spray, bubbles and more.
Eraser.
- Linear erase function with mouse movement.
Drawing text
- By double clicking on the drawing board, the user can enter text and draw in the specified position.
Drawing board Drag & Drop
- Holding down the space bar allows the user to drag and drop the drawing board infinitely.
Select Mode
- Once in selection mode, the user can box in elements by clicking on them, zoom or move them by holding down the handle, and delete selected elements with the Backspace key.
Layer
- The content of the drawing board is displayed in the order of the layers, and users can add, delete and sort layers.
Provides undo and reverse undo features that allow users to clear the board or save the content as an image.

Then recently I had some free time and decided to write a series of articles documenting my design ideas and code. If you are interested in this project, feel free to visit and also feel free to give the project a Star ⭐️.

Github: https://github.com/LHRUN/paint-board

In this article, I will introduce the Canvas drawing board in detail in the box to select elements of the realization of ideas and specific code, the effect is as follows.

Ideas For Realization

First make sure that key rectangle properties such as width, height, and rectangle position are recorded when the element is initialized and updated. This is the basis for implementing box-select features.
On mouseover, it is necessary to determine whether the mouse is hovering over any element based on the current coordinates. This allows us to handle clicks appropriately. Also, the cursor should change on mouseover based on the type of element it is hovering over to provide more intuitive feedback to the user.
In the case of selete elements, the rendering stage should render the select effect at the end based on the rectangle property of the select element, making sure that the select effect is at the top of the canvas.
When a select element exists, the drag operation needs to determine whether to move the element or change its size based on the location of the drag.
There are two types of element resizing, scaling that maintains proportionality (e.g., text) and scaling that does not (e.g., free drawing).

Record Rectangle Properties

Because new coordinate points were being added all the time during the drawing process, I recorded the minimum and maximum xy coordinates in addition to the rectangle attribute to make it easier to calculate the width and height.

/**
 * Update the rectangle properties according to the new coordinate points
 * @param instance free drawing element
 * @param position current position
 */
export const updateRect = (instance: FreeDraw, position: MousePosition) => {
  const { x, y } = position
  let { minX, maxX, minY, maxY } = instance.rect
  if (x < minX) {
    minX = x
  }
  if (x > maxX) {
    maxX = x
  }
  if (y < minY) {
    minY = y
  }
  if (y > maxY) {
    maxY = y
  }
  const rect = {
    minX,
    maxX,
    minY,
    maxY,
    x: minX,
    y: minY,
    width: maxX - minX,
    height: maxY - minY
  }
  instance.rect = rect
  return rect
}

Calculate Mouse Movement Coordinates

As the mouse moves, we want to change the cursor so that the user can feel that the mouse has moved over the element. To realize this, we need to calculate whether the mouse coordinates are close to the drawing path to a certain distance.
A drawing path consists of a series of coordinate points. We can connect each coordinate point to the previous one to form a line segment. We define that the mouse can be considered to be hovering over an element when any of the following conditions are met
- The mouse coordinates are less than 10 pixels from the start of the line segment.
- The mouse coordinates are less than 10 pixels from the end of the line segment.
- The mouse coordinates are less than 10 pixels away from the line segment and the x and y coordinates are within the range of the two endpoints of the line segment.

// Iterate over all coordinate points of the element
for (let i = 1; i < positions.length; i++) {
  // Distance from the starting point
  const startDistance = getDistance(movePos, positions[i - 1])
  // Distance to the end point
  const endDistance = getDistance(movePos, positions[i])
  // Distance from line segment
  const lineDistance = getPositionToLineDistance(
    movePos,
    positions[i - 1],
    positions[i]
  )
  const rangeX =
    Math.max(positions[i - 1].x, positions[i].x) >= movePos.x &&
    movePos.x >= Math.min(positions[i - 1].x, positions[i].x)
  const rangeY =
    Math.max(positions[i - 1].y, positions[i].y) >= movePos.y &&
    movePos.y >= Math.min(positions[i - 1].y, positions[i].y)

  // The current element can be recorded if one of three conditions is met
  if (
    startDistance < 10 ||
    endDistance < 10 ||
    (lineDistance < 10 && rangeX && rangeY)
  ) {
    this.mouseHoverElementIndex = eleIndex
  }
}
// ...

/**
 * Calculate the distance between two points
 * @param start starting point
 * @param end end point
 * @returns distance
 */
export const getDistance = (start: MousePosition, end: MousePosition) => {
  return Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2))
}

/**
 * Get the distance of the mouse position from the line segment
 * @param pos mouse position
 * @param startPos starting point
 * @param endPos end point
 * @returns distance
 */
export const getPositionToLineDistance = (
  pos: MousePosition,
  startPos: MousePosition,
  endPos: MousePosition
) => {
  /**
   * 1. Calculate the straight line distance between three points
   * 2. Calculate the half perimeter of a triangle
   * 3. Finding area by Helen's formula
   * 4. Find the height of a triangle based on the area formula
   */
  const A = Math.abs(getDistance(pos, startPos))
  const B = Math.abs(getDistance(pos, endPos))
  const C = Math.abs(getDistance(startPos, endPos))

  const P = (A + B + C) / 2
  const area = Math.abs(Math.sqrt(P * (P - A) * (P - B) * (P - C)))
  const distance = (2 * area) / C
  return distance
}

Click To Show Box Selection Effect

When the user clicks, we record this element as a select element if all three cases were met in the previous hover action.
In the drawing board rendering stage, we render the boxed effect according to the rectangle property of the boxed element.

if (this.select.selectElementIndex !== -1) {
  // Get the rectangle attribute of the selected element and draw the boxed effect.
  const rect = this.select.getCurSelectElement().rect
  drawResizeRect(this.context, rect)
}

/**
 * Drawing Select Rectangles
 */
export const drawResizeRect = (
  context: CanvasRenderingContext2D,
  rect: ElementRect
) => {
  const { x, y, width, height } = rect
  context.save()
  context.strokeStyle = '#65CC8A'
  context.setLineDash([5])
  context.lineWidth = 2
  context.lineCap = 'round'
  context.lineJoin = 'round'

  // Drawing Dashed Boxes
  drawRect(context, x, y, width, height)

  // Drawing the four corner handles
  context.fillStyle = '#65CC8A'
  drawRect(context, x - 10, y - 10, 10, 10, true)
  drawRect(context, x + width, y - 10, 10, 10, true)
  drawRect(context, x - 10, y + height, 10, 10, true)
  drawRect(context, x + width, y + height, 10, 10, true)
  context.restore()
}

/**
 * Drawing Rectangles
 */
export const drawRect = (
  context: CanvasRenderingContext2D,
  x: number,
  y: number,
  width: number,
  height: number,
  fill = false // Fill or not
) => {
  context.beginPath()
  context.rect(x, y, width, height)
  if (fill) {
    context.fill()
  } else {
    context.stroke()
  }
}

Drag And Drop Element

Dragging and dropping elements is relatively simple and is achieved by calculating the distance the mouse moves. Iterate over each coordinate point in the drawing path and add the corresponding distance to it to complete the drag operation.

// startMousePos is the coordinate of the last move.
const disntanceX = x - this.startMousePos.x
const disntanceY = y - this.startMousePos.y

/**
 * Update Position
 * @param distanceX
 * @param distanceY
 */
export const moveFreeDraw = (
  instance: FreeDraw,
  distanceX: number,
  distanceY: number
) => {
  initRect(instance)
  instance.positions.forEach((position) => {
    position.x += distanceX
    position.y += distanceY
    updateRect(instance, position)
  })
}

Element Zoom (doesn't keep proportional)

I'll analyze the element zoom by dragging and dropping the handle in the bottom right corner as an example
First of all, element scaling is divided into horizontal scaling and vertical scaling.
- Horizontal scaling = (width of old rectangle + horizontal mouse movement) / width of old rectangle
- Vertical Scaling = (height of old rectangle + vertical mouse movement) / height of old rectangle
Then iterate through all the coordinate points of the element to scale, which results in an offset scaling effect, as follows

Then you need to calculate how far the drag handle is currently moving from the corner vertices, and then subtract this distance to get the correct zoom effect

Of course the drag and drop calculations for the four corners are inconsistent, but the idea is the same

switch (this.resizeType) {
  // disntanceX Mouse Horizontal Move Distance
  // disntanceY Mouse Vertical Move Distance
  // bottom right
  case RESIZE_TYPE.BOTTOM_RIGHT:
    resizeFreeDraw(
      resizeElement as FreeDraw,
      (rect.width + disntanceX) / rect.width,
      (rect.height + disntanceY) / rect.height,
      rect,
      RESIZE_TYPE.BOTTOM_RIGHT
    )
    break
  // bottom left
  case RESIZE_TYPE.BOTTOM_LEFT:
    resizeFreeDraw(
      resizeElement as FreeDraw,
      (rect.width - disntanceX) / rect.width,
      (rect.height + disntanceY) / rect.height,
      rect,
      RESIZE_TYPE.BOTTOM_LEFT
    )
    break
  // top left
  case RESIZE_TYPE.TOP_LEFT:
    resizeFreeDraw(
      resizeElement as FreeDraw,
      (rect.width - disntanceX) / rect.width,
      (rect.height - disntanceY) / rect.height,
      rect,
      RESIZE_TYPE.TOP_LEFT
    )
    break
  // top right
  case RESIZE_TYPE.TOP_RIGHT:
    resizeFreeDraw(
      resizeElement as FreeDraw,
      (rect.width + disntanceX) / rect.width,
      (rect.height - disntanceY) / rect.height,
      rect,
      RESIZE_TYPE.TOP_RIGHT
    )
    break
  default:
    break
}

/**
 * Zoom Drawing
 * @param instance
 * @param scaleX
 * @param scaleY
 * @param rect
 * @param resizeType
 */
export const resizeFreeDraw = (
  instance: FreeDraw,
  scaleX: number,
  scaleY: number,
  rect: FreeDrawRect,
  resizeType: string
) => {
  // Initialize Rectangle
  initRect(instance)
  // Iterate over all coordinates for scaling
  instance.positions.forEach((position) => {
    position.x = position.x * scaleX
    position.y = position.y * scaleY
    updateRect(instance, position)
  })
  const { x: newX, y: newY, width: newWidth, height: newHeight } = instance.rect
  let offsetX = 0
  let offsetY = 0
  // Calculate the offset distance, this is to be calculated based on the diagonal vertices of the current zoom handle, so it is divided into 4 cases
  switch (resizeType) {
    case RESIZE_TYPE.BOTTOM_RIGHT:
      offsetX = newX - rect.x
      offsetY = newY - rect.y
      break
    case RESIZE_TYPE.BOTTOM_LEFT:
      offsetX = newX + newWidth - (rect.x + rect.width)
      offsetY = newY - rect.y
      break
    case RESIZE_TYPE.TOP_LEFT:
      offsetX = newX + newWidth - (rect.x + rect.width)
      offsetY = newY + newHeight - (rect.y + rect.height)
      break
    case RESIZE_TYPE.TOP_RIGHT:
      offsetX = newX - rect.x
      offsetY = newY + newHeight - (rect.y + rect.height)
      break
    default:
      break
  }

  initRect(instance)

  // Subtract offset distance
  instance.positions.forEach((position) => {
    position.x = position.x - offsetX
    position.y = position.y - offsetY
    updateRect(instance, position)
  })
}

Text zoom (keep proportional)

For text zoom, the aspect ratio needs to be kept constant. This can be done by calculating the aspect ratio of the old and new rectangles:
- When the new aspect ratio is smaller than the old one, keep the width unchanged and calculate the height as Width / Old Aspect Ratio.
- When the new aspect ratio is greater than the old one, keep the height unchanged and calculate the width as height * old aspect ratio.

switch (this.resizeType) {
  // ...
  // bottom right
  case RESIZE_TYPE.BOTTOM_RIGHT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width + disntanceX,
      resizeElement.rect.height + disntanceY,
      RESIZE_TYPE.BOTTOM_RIGHT
    )
    break
  // bottom left
  case RESIZE_TYPE.BOTTOM_LEFT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width - disntanceX,
      resizeElement.rect.height + disntanceY,
      RESIZE_TYPE.BOTTOM_LEFT
    )
    break
  // top left
  case RESIZE_TYPE.TOP_LEFT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width - disntanceX,
      resizeElement.rect.height - disntanceY,
      RESIZE_TYPE.TOP_LEFT
    )
    break
  // top right
  case RESIZE_TYPE.TOP_RIGHT:
    resizeTextElement(
      resizeElement as TextElement,
      resizeElement.rect.width + disntanceX,
      resizeElement.rect.height - disntanceY,
      RESIZE_TYPE.TOP_RIGHT
    )
    break
  default:
    break
}

/**
 * Change text element size
 * @param ele text element
 * @param width Changed width
 * @param height Changed height
 * @param resizeType resize type
 */
export const resizeTextElement = (
  ele: TextElement,
  width: number,
  height: number,
  resizeType: string
) => {
  const oldRatio = ele.rect.width / ele.rect.height
  const newRatio = width / height
  // Follow the previous instructions to change the aspect ratio inconsistency
  if (newRatio < oldRatio) {
    height = width / oldRatio
  } else if (newRatio > oldRatio) {
    width = oldRatio * height
  }

  /**
   * Because this zoom is scaled to the top left corner
   * So in order to achieve that the current drag handle does not move, an offset operation is required
   */
  switch (resizeType) {
    case RESIZE_TYPE.BOTTOM_RIGHT:
      break
    case RESIZE_TYPE.BOTTOM_LEFT:
      ele.rect.x -= width - ele.rect.width
      break
    case RESIZE_TYPE.TOP_LEFT:
      ele.rect.x -= width - ele.rect.width
      ele.rect.y -= height - ele.rect.height
      break
    case RESIZE_TYPE.TOP_RIGHT:
      ele.rect.y -= height - ele.rect.height
      break
    default:
      break
  }
  ele.rect.height = height
  ele.rect.width = width
  // Font size modified by height
  ele.fontSize = ele.rect.height
}

Conclusion

If you're also writing related features, I hope this will help you, and if you find any problems or have a good solution, please feel free to discuss 👻

Explore Full Stack Magic：Next.js + Prisma + Next-auth + vercel/postgres

Leo Song — Tue, 28 Nov 2023 15:16:03 +0000

Recently, I completed a new website project to collecting Github Profiles and Readme Components. Initially, I didn't plan to develop it into a full-stack application, and features such as liking and collect were based on local storage. However, with the gradual iterations after the website's release, I felt that adding full-stack support might be a necessary direction. Not only does it contribute to future project expansion, but it also enhances the overall user experience. So, in my spare time over the course of about a week, I transformed the project into a fully-fledged full-stack website. Here is the link to my project.

Link: https://bubble-awesome-profile.vercel.app
Github: https://github.com/LHRUN/bubble

After completing the full-stack version of the website, I thought about documenting the process in an article. All the code for this article can be found in the project. In the upcoming posts, I will gradually share content about topics such as authentication, the use of Prisma and PostgreSQL, and ultimately guide you through the process of building a full-stack website.

Tech Stack

full-stack framework Next.js
database tool Prisma
database PostgreSQL
authenticate NextAuth
deployment platform Vercel

Initialization Project

First, run the npx create-next-app@latest command in the terminal, and then follow the prompts for configuration.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After a successful run, navigate to the project directory and execute npm run dev.

After successful startup, you can start building the base environment

First, upload the project to GitHub by creating a repository and linking the remote address. Then, push the code.
Go to the Vercel https://vercel.com/, log in, and choose GitHub. When uploading the project, keep the default settings in "Configure Project" and click "Deploy" directly. Environment variables can be adjusted when needed. Wait automatic deployment to complete.

After successful deployment, create the database. Select PostgreSQL in the Storage tab, enter a name and select a region and create it. Once created the database will be linked to your project.
Local code pulling environment variables:
- Run npm i -g vercel@latest to install the Verlcel CLI.
- Run verlcel link to link your vercel project.
- Run vercel env pull .env to pull the latest environment variables.

Connecting to the database

Run npm install prisma --save-dev to install the Prisma CLI and create a Prisma folder, add the schema.prisma file to it, and then add a few models as follows:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}

model Post {
  id        String     @default(cuid()) @id
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  String?
}

model User {
  id            String       @default(cuid()) @id
  name          String?
  email         String?   @unique
  createdAt     DateTime  @default(now()) @map(name: "created_at")
  updatedAt     DateTime  @updatedAt @map(name: "updated_at")
  posts         Post[]
  @@map(name: "users")
}

Prisma is to define the table structure through the model, for example, the above is to build a Post table and a User table, and then these two tables through the posts in the User and the author in the Post to establish a one-to-many table relationship.

Then run the npx prisma db push command to synchronize the defined data model to the remote database. You should then see the following prompt. This means that the table has been created successfully

🚀  Your database is now in sync with your schema.

Then run npx prisma studio in localhost:5555 to see your table structure, which is of course now all empty data.

Getting database data into a views

To get the database data into the view, you first need to install @prisma/client, run the command npm install @prisma/client.

Then run npx prisma generate, and note that you will need to run this command every time you change the Prisma Schema file thereafter. It will generate the TypeScript or JavaScript code corresponding to the table structure, the functions used to perform database queries, inserts, updates, and deletes, as well as the associated type definitions.

Next, create a prisma.ts file in your project, which can usually be placed in the lib folder. Add the following code to that file:

import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;

This code is used to configure and export a Prisma instance. In a production environment, a new PrismaClient instance is created for each request, while in a development environment, it reuses the global instance to prevent running out of data connections. This setup improves performance and reduces resource usage.

Then PrismaClient has four basic APIs for create, delete, update, and read, For details, see CRUD

const user = await prisma.user.create({
  data: {
    email: 'elsa@prisma.io',
    name: 'Elsa Prisma',
  },
})

const user = await prisma.user.findUnique({
  where: {
    email: 'elsa@prisma.io',
  },
})

const updateUser = await prisma.user.update({
  where: {
    email: 'elsa@prisma.io',
  },
  data: {
    name: 'Elsa',
  },
})

const deleteUser = await prisma.user.delete({
  where: {
    email: 'elsa@prisma.io',
  },
})

For example, if you want to find a post

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const post = await prisma.post.findUnique({
    where: {
      id: String(params?.id),
    },
    include: {
      author: {
        select: { name: true },
      },
    },
  });
  return {
    props: post,
  };
};

NextAuth Authentication

First install the two dependencies next-auth, @next-auth/prisma-adapter.

npm install next-auth @next-auth/prisma-adapter

Then change the user-related model

model User {
  id              String         @id @default(uuid())
  name            String
  email           String?        @unique
  emailVerified   DateTime?      @map("email_verified")
  image           String?
  createdAt       DateTime       @default(now())
  updatedAt       DateTime       @updatedAt
  posts         Post[]

  @@map("users")
}

model Account {
  id                String   @id @default(cuid())
  userId            String   @map("user_id")
  type              String?
  provider          String
  providerAccountId String   @map("provider_account_id")
  token_type        String?
  refresh_token     String?  @db.Text
  access_token      String?  @db.Text
  expires_at        Int?
  scope             String?
  id_token          String?  @db.Text
  createdAt         DateTime @default(now())
  updatedAt         DateTime @updatedAt
  user              User     @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
  @@map("accounts")
}

model Session {
  id           String   @id @default(cuid())
  userId       String?  @map("user_id")
  sessionToken String   @unique @map("session_token") @db.Text
  accessToken  String?  @map("access_token") @db.Text
  expires      DateTime
  user         User?    @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt

  @@map("sessions")
}

model VerificationRequest {
  id         String   @id @default(cuid())
  identifier String
  token      String   @unique
  expires    DateTime
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt

  @@unique([identifier, token])
}

Then, using GitHub as an example, you need to create an OAuth App. follow these steps:

Login to your GitHub account and click Settings.
At the bottom of the Settings page, find Developer Settings and switch to OAuth Apps.
Click "Register a new application" and fill in the name and domain name. In a local development environment, the Homepage URL can be http://localhost:3000 and the Authorization callback URL can be http://localhost:3000/api/auth/callback/github.

After successful creation, copy the generated Client ID and Client Secret and add them to the .env file in your project:

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
SECRET= // Required for production environments, content can be customized

This way, your project will be able to do GitHub OAuth authentication with these keys. Also make sure that the .env file is not exposed, you can add it now to the .gitignore

Then you need to add the following code to your root component

import { SessionProvider } from 'next-auth/react';

const Home = () => {
  return (
    <SessionProvider>
      ...
    </SessionProvider>
  );
};

export default Home;

Then, create a specific route api/auth/[... .nextauth].ts for NextAuth to use and add the following code

// api/auth/[...nextauth].ts

import { NextAuth， NextAuthOptions } from 'next-auth';
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import GitHubProvider from 'next-auth/providers/github';
import prisma from '@/lib/prisma';

const authOptions: NextAuthOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID as string,
      clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
      httpOptions: {
        timeout: 10000, // wait for response time, because the local environment often login timeout, so change this configuration
      }
    })
  ],
  adapter: PrismaAdapter(prisma),
  secret: process.env.SECRET, // required for production environments
  callbacks: {
    // triggered by getSession and useSession calls
    // documents https://next-auth.js.org/configuration/callbacks
    async session({ session, user }) {
      if (user.id && session?.user) {
        session.user.userId = user.id;
      }
      return session;
    }
  }
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Then add the following code where you want to click login and it will normally take you to the github authorization page.

import { signIn } from 'next-auth/react';

const clickSignIn = () => {
  signIn('github')
}

Getting user session data can be done via the following APIs

Client：useSession, getSession
Server: getServerSession

import { useSession } from 'next-auth/react';

function MyComponent() {
  const { data: session } = useSession();

  if (session) {
    console.log('Logged in as:', session.user);
  }

  // ...
}

import { getSession } from 'next-auth/react';

export async function getServerSideProps(context) {
  const session = await getSession(context);

  if (session) {
    console.log('Logged in as:', session.user);
  }

  return {
    props: {},
  };
}

import { getServerSession } from 'next-auth/react';

export async function POST(req: NextRequest) {
  const session = await getServerSession();
  const userId = session?.user?.userId;

  // validation session
  if (!userId) {
    return responseFail(HTTP_CODE.NOT_LOGGED);
  }

  //...
}

Vercel Deployment Notes

The build command needs to be preceded by prisma generate, so the build command in package.json can be changed to

"scripts": {
 "build": "prisma generate && next build"
}

Since only one callback path is supported in the GitHub OAuth App, you need to create multiple OAuth Apps for different environments. set up environment variables on Vercel, and add the specific keys for each OAuth App to the environment variables. vercel supports multiple environment variable setups.

Make sure to add the .env file to .gitignore and don't expose it!

Problems In Dev

It is very easy to fail to login in, after many times of checking still can't find the reason, for the time being, it will be categorized as a network error, if you fail to login in you can try to switch the wifi or switch your network, of course, this is mainly in the local development environment of the problem, the production environment is still very smooth. Related issue
In Next.js 14, passing the request object to getServerSession will result in an error, so try writing it like I did, and then introducing the function wherever you need to use it.

import { getServerSession as originalGetServerSession } from 'next-auth/next';

export const getServerSession = async () => {
  const req = {
    headers: Object.fromEntries(headers() as Headers),
    cookies: Object.fromEntries(
      cookies()
        .getAll()
        .map((c) => [c.name, c.value])
    )
  } as any;
  const res = { getHeader() {}, setCookie() {}, setHeader() {} } as any;

  const session = await originalGetServerSession(req, res, authOptions);
  return session;
};

When using authenticated login platforms such as GitHub, Google, etc., if the email is unique, it will cause the login to fail. This is due to the fact that the email is defined as a unique value in the model
When I initially wrote the user-related model I kept getting type errors when following the example on the official website, so if that's the case for you too, try the set of base models I wrote above

Conclusion

This article just roughly summarizes the process of building a full-stack website, in which there are some details not written, but you follow this process to build your website is no problem. Welcome to discuss and exchange questions. Thanks. 👻