iris/ui/svg.go

//go:build js && wasm

package ui

import (
	"fmt"
	"syscall/js"

	"git.flowmade.one/flowmade-one/iris/internal/element"
)

const svgNS = "http://www.w3.org/2000/svg"

// SVG creates an SVG container element
func SVG() SVGElement {
	e := element.NewElementNS(svgNS, "svg")
	return SVGElement{e}
}

// SVGElement wraps an SVG element
type SVGElement struct {
	e element.Element
}

// Attr sets an attribute on the SVG element
func (s SVGElement) Attr(name, value string) SVGElement {
	s.e.Attr(name, value)
	return s
}

// Width sets the width attribute
func (s SVGElement) Width(value string) SVGElement {
	s.e.Attr("width", value)
	return s
}

// Height sets the height attribute
func (s SVGElement) Height(value string) SVGElement {
	s.e.Attr("height", value)
	return s
}

// Position sets CSS position
func (s SVGElement) Position(pos string) SVGElement {
	s.e.Position(pos)
	return s
}

// Left sets CSS left
func (s SVGElement) Left(value string) SVGElement {
	s.e.Left(value)
	return s
}

// Top sets CSS top
func (s SVGElement) Top(value string) SVGElement {
	s.e.Top(value)
	return s
}

// PointerEvents sets CSS pointer-events
func (s SVGElement) PointerEvents(value string) SVGElement {
	s.e.PointerEvents(value)
	return s
}

// Child adds a child SVG element
func (s SVGElement) ChildSVG(child SVGElement) SVGElement {
	s.e.Child(child.e)
	return s
}

// ClearChildren removes all children
func (s SVGElement) ClearChildren() SVGElement {
	s.e.ClearChildren()
	return s
}

// ToView converts the SVG element to a View (for embedding in layouts)
func (s SVGElement) ToView() View {
	return View{s.e}
}

// SVGDefs creates a defs element
func SVGDefs() SVGElement {
	return SVGElement{element.NewElementNS(svgNS, "defs")}
}

// SVGMarker creates a marker element for arrowheads
func SVGMarker(id string) SVGElement {
	e := element.NewElementNS(svgNS, "marker")
	e.Attr("id", id)
	return SVGElement{e}
}

// MarkerWidth sets marker width
func (s SVGElement) MarkerWidth(value string) SVGElement {
	s.e.Attr("markerWidth", value)
	return s
}

// MarkerHeight sets marker height
func (s SVGElement) MarkerHeight(value string) SVGElement {
	s.e.Attr("markerHeight", value)
	return s
}

// RefX sets refX
func (s SVGElement) RefX(value string) SVGElement {
	s.e.Attr("refX", value)
	return s
}

// RefY sets refY
func (s SVGElement) RefY(value string) SVGElement {
	s.e.Attr("refY", value)
	return s
}

// Orient sets orient
func (s SVGElement) Orient(value string) SVGElement {
	s.e.Attr("orient", value)
	return s
}

// MarkerUnits sets markerUnits
func (s SVGElement) MarkerUnits(value string) SVGElement {
	s.e.Attr("markerUnits", value)
	return s
}

// SVGPath creates a path element
func SVGPath(d string) SVGElement {
	e := element.NewElementNS(svgNS, "path")
	e.Attr("d", d)
	return SVGElement{e}
}

// Fill sets fill color
func (s SVGElement) Fill(color string) SVGElement {
	s.e.Attr("fill", color)
	return s
}

// Stroke sets stroke color
func (s SVGElement) Stroke(color string) SVGElement {
	s.e.Attr("stroke", color)
	return s
}

// StrokeWidth sets stroke width
func (s SVGElement) StrokeWidth(value string) SVGElement {
	s.e.Attr("stroke-width", value)
	return s
}

// StrokeDasharray sets stroke dash pattern
func (s SVGElement) StrokeDasharray(value string) SVGElement {
	s.e.Attr("stroke-dasharray", value)
	return s
}

// MarkerEnd sets the end marker
func (s SVGElement) MarkerEnd(value string) SVGElement {
	s.e.Attr("marker-end", value)
	return s
}

// SVGLine creates a line element
func SVGLine(x1, y1, x2, y2 float64) SVGElement {
	e := element.NewElementNS(svgNS, "line")
	e.Attr("x1", fmt.Sprintf("%f", x1))
	e.Attr("y1", fmt.Sprintf("%f", y1))
	e.Attr("x2", fmt.Sprintf("%f", x2))
	e.Attr("y2", fmt.Sprintf("%f", y2))
	return SVGElement{e}
}

// SVGRect creates a rect element
func SVGRect(x, y, width, height float64) SVGElement {
	e := element.NewElementNS(svgNS, "rect")
	e.Attr("x", fmt.Sprintf("%f", x))
	e.Attr("y", fmt.Sprintf("%f", y))
	e.Attr("width", fmt.Sprintf("%f", width))
	e.Attr("height", fmt.Sprintf("%f", height))
	return SVGElement{e}
}

// SVGCircle creates a circle element
func SVGCircle(cx, cy, r float64) SVGElement {
	e := element.NewElementNS(svgNS, "circle")
	e.Attr("cx", fmt.Sprintf("%f", cx))
	e.Attr("cy", fmt.Sprintf("%f", cy))
	e.Attr("r", fmt.Sprintf("%f", r))
	return SVGElement{e}
}

// SVGText creates a text element
func SVGText(text string, x, y float64) SVGElement {
	e := element.NewElementNS(svgNS, "text")
	e.Attr("x", fmt.Sprintf("%f", x))
	e.Attr("y", fmt.Sprintf("%f", y))
	e.Text(text)
	return SVGElement{e}
}

// SVGGroup creates a g (group) element
func SVGGroup() SVGElement {
	return SVGElement{element.NewElementNS(svgNS, "g")}
}

// OnClick adds a click handler to the SVG element
func (s SVGElement) OnClick(fn func()) SVGElement {
	s.e.On("click", fn)
	return s
}

// OnClickWithEvent adds a click handler with event access
func (s SVGElement) OnClickWithEvent(fn func(js.Value)) SVGElement {
	s.e.OnWithEvent("click", fn)
	return s
}

// DataAttr sets a data attribute (data-{name}="{value}")
func (s SVGElement) DataAttr(name, value string) SVGElement {
	s.e.Attr("data-"+name, value)
	return s
}

// ID sets the id attribute
func (s SVGElement) ID(id string) SVGElement {
	s.e.Attr("id", id)
	return s
}

// Cursor sets the CSS cursor property
func (s SVGElement) Cursor(value string) SVGElement {
	s.e.Cursor(value)
	return s
}

// FontSize sets the font-size attribute
func (s SVGElement) FontSize(value string) SVGElement {
	s.e.Attr("font-size", value)
	return s
}

// FontFamily sets the font-family attribute
func (s SVGElement) FontFamily(value string) SVGElement {
	s.e.Attr("font-family", value)
	return s
}

// TextAnchor sets the text-anchor attribute (start, middle, end)
func (s SVGElement) TextAnchor(value string) SVGElement {
	s.e.Attr("text-anchor", value)
	return s
}

// DominantBaseline sets the dominant-baseline attribute
func (s SVGElement) DominantBaseline(value string) SVGElement {
	s.e.Attr("dominant-baseline", value)
	return s
}