dps_canvas/src/utils/showInput.js

Html canvas üzerinde şekiller oluşturmanızı sağlar

import Base from "../parent"

/**
 * Create canvas input for shape name
 */
export function showInput(current) {
  if (!Base.isShowInput) return Base.parent?.querySelector("input")?.remove()

  Base.parent = document.querySelector(".dps-content")
  const input = Base.parent?.querySelector("input") ?? document.createElement("input")
  const [shape, text] = Object.values(current)
  let value = ""
  input.value = text?.name || ""

  Base.setActiveShape(shape)

  Base.parent.style.position = "relative"
  Base.parent.style.width = Base.width
  Base.parent.style.width = Base.height

  const inputWidth = current?.square?.width ?? current?.circle?.radius * 2

  /**
   * set input property
   */
  Base.setInput("style", {
    left: `${shape.x}px`,
    top: `${shape.y}px`,
    transform: shape.radius ? "translate(-50%, -50%)" : "translate(0, 0)",
    width: inputWidth ? `${inputWidth}px` : "auto",
    borderRadius: current?.square ? "0" : "5px"
  })

  for (const [key, value] of Object.entries(Base.inputStyle.style)) {
    input.style[key] = value
  }

  for (const [key, value] of Object.entries(Base.inputStyle.prop)) {
    input[key] = value
  }

  Base.parent.appendChild(input)
  input.focus()

  /**
   * input event 
   */
  input.oninput = ({ target }) => value = target.value

  input.onkeydown = ({ key }) => {
    if (key === "Enter") {
      text.name = value
      shape.name = value
      input.remove()
      value = ""
      Base.drawAll()
    }
  }
}