From 793eb16881b7dd4ef486a0572ef4b54a8c6d5da4 Mon Sep 17 00:00:00 2001 From: efim Date: Tue, 21 Nov 2023 17:25:18 +0000 Subject: [PATCH] feat: initial circle arrow svg --- routes/room_page_templates_preview.go | 66 ++++++++++ routes/static/out.css | 22 ++++ routes/templates/tableTemplates.gohtml | 160 ++++++++++++------------- 3 files changed, 168 insertions(+), 80 deletions(-) diff --git a/routes/room_page_templates_preview.go b/routes/room_page_templates_preview.go index d719bfe..c0fabec 100644 --- a/routes/room_page_templates_preview.go +++ b/routes/room_page_templates_preview.go @@ -62,6 +62,72 @@ func (r *roomTableData)Tangens() float64 { return math.Tan(math.Pi / float64(r.Total())) // Math.tan(Math.PI/m); } +type arrowData struct { + Height, Width int + Radius int + StartX, StartY int + EndX, EndY int + LargeArcFlag int + Angle1X, Angle1Y int + Angle2X, Angle2Y int +} + +func (r *roomTableData)ArrowData() arrowData { + // TODO take total and indexes from room data + // also figure out size to be around the people + // and this is somewhat a win + height, width := 150.0, 150.0 + centerX, centerY := height/2, width/2 + total := 5 // 0 to 4 + startSector := 1 + endSector := 5 + if endSector < startSector { + endSector += total + } + radius := 50.0 + startAngle := 90 + float64(startSector) * ( 360.0 / float64(total) ) + endAngle := 90 + float64(endSector) * ( 360.0 / float64(total) ) + startAngleRad := startAngle * (math.Pi / float64(180)) + endAngleRad := endAngle * (math.Pi / float64(180)) + // endAngle is radius angle, so perpendicular gives direction of teh arrow + + x1 := centerX + radius * math.Cos(startAngleRad) + y1 := centerY + radius * math.Sin(startAngleRad) + x2 := centerX + radius * math.Cos(endAngleRad) + y2 := centerY + radius * math.Sin(endAngleRad) + + arrowAngleOffset := math.Pi / 4 // 45 degrees + arrowPointDirection := endAngleRad - math.Pi / 2 + arrowheadLen := 10.0 + line1Angle := arrowPointDirection - arrowAngleOffset + line2Angle := arrowPointDirection + arrowAngleOffset + line1EndX := x2 + arrowheadLen * math.Cos(line1Angle) + line1EndY := y2 + arrowheadLen * math.Sin(line1Angle) + line2EndX := x2 + arrowheadLen * math.Cos(line2Angle) + line2EndY := y2 + arrowheadLen * math.Sin(line2Angle) + + // indicates that the shorter of the two possible arcs should be used. + largeArcFlag := 0 + if math.Abs(float64(endSector) - float64(startSector)) > float64(total)/2.0 { + // specifies that the longer arc should be chosen. + largeArcFlag = 1 + } + return arrowData{ + Height: int(height), + Width: int(width), + Radius: int(radius), + StartX: int(x1), + StartY: int(y1), + EndX: int(x2), + EndY: int(y2), + LargeArcFlag: largeArcFlag, + Angle1X: int(line1EndX), + Angle1Y: int(line1EndY), + Angle2X: int(line2EndX), + Angle2Y: int(line2EndY), + } +} + func personDataFromRoom(room *roomTableData, pId rooms.PersonId) personData { person, exists := room.AllKnownPeople[pId] if !exists || !slices.Contains(room.Paricipants, pId) { diff --git a/routes/static/out.css b/routes/static/out.css index 6423337..517b889 100644 --- a/routes/static/out.css +++ b/routes/static/out.css @@ -534,10 +534,22 @@ video { --tw-backdrop-sepia: ; } +.absolute { + position: absolute; +} + .relative { position: relative; } +.left-1\/2 { + left: 50%; +} + +.top-1\/2 { + top: 50%; +} + .col-span-full { grid-column: 1 / -1; } @@ -592,6 +604,16 @@ video { flex: none; } +.-translate-x-1\/2 { + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-1\/2 { + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + @keyframes pulse { 50% { opacity: .5; diff --git a/routes/templates/tableTemplates.gohtml b/routes/templates/tableTemplates.gohtml index 7bb47bf..4778fa1 100644 --- a/routes/templates/tableTemplates.gohtml +++ b/routes/templates/tableTemplates.gohtml @@ -1,95 +1,95 @@ -

Single templates

- {{ define "inactiveBrick" }} -
- {{ end }} - - {{ define "raisedBrick" }} -
- {{ end }} - - {{ define "speakerBrick" }} -
- {{ end }} - - {{ define "markBrick" }} -
- X -
- {{ end }} - - -

For each type

- {{ range .Bricks }} -
for {{ .Name }}
-
- {{ template "inactiveBrick" .ColorClass }} {{ template "raisedBrick" - .ColorClass }} {{ template "speakerBrick" .ColorClass }} {{ template - "markBrick" .ColorClass }} -
- {{ end }} - - -

Now for BrickData taking parametrized template name

-{{ define "brick" }} - -{{ if eq .TemplateType "inactiveBrick" }} -{{ template "inactiveBrick" .ColorClass }} - -{{ else if eq .TemplateType "raisedBrick" }} -{{ template "raisedBrick" .ColorClass }} - -{{ else if eq .TemplateType "speakerBrick" }} -{{ template "speakerBrick" .ColorClass }} - -{{ else if eq .TemplateType "markBrick" }} -{{ template "markBrick" .ColorClass }} +{{ define "inactiveBrick" }} +
+{{ end }} +{{ define "raisedBrick" }} +
+{{ end }} +{{ define "speakerBrick" }} +
+{{ end }} +{{ define "markBrick" }} +
+ X +
{{ end }} +

For each type

+{{ range .Bricks }} +
for {{ .Name }}
+
+ {{ template "inactiveBrick" .ColorClass }} {{ template "raisedBrick" + .ColorClass }} {{ template "speakerBrick" .ColorClass }} {{ template + "markBrick" .ColorClass }} +
+{{ end }} + +

Now for BrickData taking parametrized template name

+{{ define "brick" }} +{{ if eq .TemplateType "inactiveBrick" }} + {{ template "inactiveBrick" .ColorClass }} +{{ else if eq .TemplateType "raisedBrick" }} + {{template "raisedBrick" .ColorClass }} +{{ else if eq .TemplateType "speakerBrick"}} + {{ template "speakerBrick" .ColorClass }} +{{ else if eq .TemplateType "markBrick" }} + {{ template "markBrick" .ColorClass }} +{{ end }} {{end}}

Now for a person

expected to be called with personData

-{{ define "personBlocks" }} +{{ define "personBlocks" }} -
- {{ range .BricksForPerson }} - {{ template "brick" . }} - {{ end }} -

{{ .Name }}

+
+ {{ range .BricksForPerson }} {{ template "brick" . }} {{ end }} +

{{ .Name }}({{.Index}})

{{ end }} -

And now i'll want to get all persons for a room

expected be called with room *roomTableData

- {{ define "roomPeople" }} -
- {{ range .Persons }} - {{ template "personBlocks" . }} - {{ end }} -
- {{end}} +{{ define "roomPeople" }} +
+ {{ with .ArrowData }} + + + + + + + + + + {{ end }} + {{ range .Persons }} {{ template "personBlocks" . }} {{ end }} +
+{{end}}