generated from ElnuDev/nim-project
Want to contribute? Fork me on Codeberg.org!
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.6 KiB
51 lines
1.6 KiB
import std/dom
|
|
import std/strutils
|
|
import std/strformat
|
|
let canvas = document.getElementById("canvas")
|
|
canvas.addEventListener("mousedown", proc(e: Event) =
|
|
let e = cast[MouseEvent](e)
|
|
|
|
if e.button != 1:
|
|
return
|
|
|
|
canvas.style.cursor = "move"
|
|
canvas.onmousemove = proc(e: Event) =
|
|
let e = cast[MouseEvent](e)
|
|
canvas.scrollTop = e.clientY
|
|
)
|
|
canvas.addEventListener("mouseup", proc(e: Event) =
|
|
canvas.style.cursor = "auto"
|
|
canvas.onmousemove = nil
|
|
)
|
|
document.getElementById("button-add-card").onclick = proc(e: Event) =
|
|
var card = document.createElement("div")
|
|
card.className = "card"
|
|
card.innerText = "New card"
|
|
var x_offset, y_offset = 0.0
|
|
let drag = proc(e: Event) =
|
|
let e = cast[MouseEvent](e)
|
|
|
|
card.style.left = fmt"{cast[float](e.clientX) - x_offset}px"
|
|
|
|
card.style.top = fmt"{cast[float](e.clientY) - y_offset}px"
|
|
|
|
echo e.clientX
|
|
card.addEventListener("mousedown", proc(e: Event) =
|
|
let e = cast[MouseEvent](e)
|
|
|
|
if e.button != 0:
|
|
return
|
|
|
|
let left = if card.style.left != "": parseInt(($(card.style.left))[0..^3]) else: 0
|
|
x_offset = cast[float](e.clientX - left)
|
|
|
|
let top = if card.style.top != "": parseInt(($(card.style.top))[0..^3]) else: 0
|
|
y_offset = cast[float](e.clientY - top)
|
|
|
|
document.onmousemove = drag
|
|
document.onmouseup = proc(e: Event) = document.onmousemove = nil
|
|
)
|
|
canvas.appendChild(card)
|
|
proc example(e: Event) =
|
|
echo "Document is ready"
|
|
document.addEventListener("DOMContentLoaded", example) |