Dom

OneJS provides Document and Dom APIs built on top of UI Toolkit’s VisualElement. Currently it’s just a subset of the standard Web APIs, but it’s enough to get Preact and most common DOM operations working smoothly in side of Unity.

Example Dom Manipulation

sample.js


import { emo } from "onejs"
import { Color } from "UnityEngine"
import { Align } from "UnityEngine/UIElements"
 
var divs: Element[] = []
var container = document.createElement("div")
container.classname = emo`
    width:100%;height:100%;padding:10px;
    flex-direction:row; flex-start:center;
    justify-content:center;flex-wrap:wrap;
`
container.style.alignItems = Align.Center
 
for (var i = 0; i < 4; i++) {
    var div = document.createElement("div")
    div.classname = emo`width:100px;height:100px;margin:10px;justify-content:center;align-items:center;`
    div.appendChild(document.createTextNode(i.toString()))
    container.appendChild(div)
    divs.push(div)
}
document.body!.appendChild(container)
 
divs[0].style.setProperty("backgroundColor", "yellow")
divs[0].style.setProperty("borderRadius", 10)
divs[0].style.setProperty("borderWidth", 2)
divs[0].style.setProperty("borderColor", Color.red)
 
divs[1].style.setProperty("backgroundColor", Color.cyan)
divs[1].style.setProperty("borderRadius", [10, 20, 30, 40])
divs[1].style.setProperty("borderWidth", 5)
divs[1].style.setProperty("borderColor", "red green")
 
divs[2].style.setProperty("backgroundColor", "#aabbcc")
divs[2].style.setProperty("borderRadius", "50% 20px")
divs[2].style.setProperty("borderWidth", "5px 10 15 20")
divs[2].style.setProperty("borderColor", [Color.red, Color.green, Color.blue, Color.yellow])
divs[2].style.scale = [0.8, 1.2]
 
divs[3].style.setProperty("backgroundColor", "white")
divs[3].style.setProperty("borderBottomLeftRadius", 20)
divs[3].style.setProperty("borderBottomWidth", 5)
divs[3].style.setProperty("borderBottomColor", "cyan")
divs[3].style.rotate = 30
divs[3].style.scale = 0.6
 
divs[3].classname += " rotate-[0] hover:rotate-[45deg]"
divs[3].style.transitionProperty = "rotate"
divs[3].style.transitionDuration = "2s"
divs[3].style.transitionTimingFunction = "ease-in-out"

You can access the underlying VisualElement of a DOM element using the dom.ve property.