luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-06-01 04:12:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Render the git graph on the server (#12333)

Browse source 
Rendering the git graph on the server means that we can properly track flows and switch from the Canvas implementation to a SVG implementation.

* This implementation provides a 16 limited color selection
* The uniqued color numbers are also provided
* And there is also a monochrome version
*In addition is a hover highlight that allows users to highlight commits on the same flow.

Closes #12209

Signed-off-by: Andrew Thornton art27@cantab.net
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
zeripath 2020-08-06 09:04:08 +01:00 • committed by GitHub
parent f1a42f5d5e
commit 2c1ae6c82d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 1666 additions and 696 deletions
Download patch file Download diff file Expand all files Collapse all files

45
templates/repo/graph.tmpl
View file

@ -2,21 +2,44 @@
<div class="repository commits">
{{template "repo/header" .}}
<div class="ui container">
<div id="git-graph-container" class="ui segment">
<h1>{{.i18n.Tr "repo.commit_graph"}}</h1>
<div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}">
<h2 class="ui header dividing">{{.i18n.Tr "repo.commit_graph"}}
<div class="ui right">
<div class="ui icon buttons tiny color-buttons">
<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.monochrome"}}"><span class="emoji">{{svg "material-invert-colors" 16}}</span> {{.i18n.Tr "repo.commit_graph.monochrome"}}</button>
<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.color"}}"><span class="emoji">{{svg "material-palette" 16}}</span> {{.i18n.Tr "repo.commit_graph.color"}}</button>
</div>
</div>
</h2>
<div class="ui dividing"></div>
<div id="rel-container">
<canvas id="graph-canvas">
<ul id="graph-raw-list">
{{ range .Graph }}
<li><span class="node-relation">{{ .GraphAcii -}}</span></li>
{{ end }}
</ul>
</canvas>
<svg viewbox="{{Mul .Graph.MinColumn 5}} {{Mul .Graph.MinRow 10}} {{Add (Mul .Graph.Width 5) 5}} {{Mul .Graph.Height 10}}" width="{{Add (Mul .Graph.Width 10) 10}}px">
{{range $flowid, $flow := .Graph.Flows}}
<g id="flow-{{$flow.ID}}" class="flow-group flow-color-{{$flow.ColorNumber}} flow-color-16-{{$flow.Color16}}" data-flow="{{$flow.ID}}" data-color="{{$flow.ColorNumber}}">
<path d="{{range $i, $glyph := $flow.Glyphs -}}
{{- if or (eq $glyph.Glyph '*') (eq $glyph.Glyph '|') -}}
M {{Add (Mul $glyph.Column 5) 5}} {{Add (Mul $glyph.Row 10) 0}} v 10 {{/* */ -}}
{{- else if eq $glyph.Glyph '/' -}}
M {{Add (Mul $glyph.Column 5) 10}} {{Add (Mul $glyph.Row 10) 0}} l -10 10 {{/* */ -}}
{{- else if eq $glyph.Glyph '\\' -}}
M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 0}} l 10 10 {{/* */ -}}
{{- else if or (eq $glyph.Glyph '-') (eq $glyph.Glyph '.') -}}
M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 10}} h 5 {{/* */ -}}
{{- else if eq $glyph.Glyph '_' -}}
M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 10}} h 10 {{/* */ -}}
{{- end -}}
{{- end}}" stroke-width="1" fill="none" id="flow-{{$flow.ID}}-path" stroke-linecap="round"/>
{{range $flow.Commits}}
<circle class="flow-commit" cx="{{Add (Mul .Column 5) 5}}" cy="{{Add (Mul .Row 10) 5}}" r="2.5" stroke="none" id="flow-commit-{{.Rev}}" data-rev="{{.Rev}}"/>
{{end}}
</g>
{{end}}
</svg>
</div>
<div id="rev-container">
<ul id="rev-list">
{{ range .Graph }}
<li>
{{ range .Graph.Commits }}
<li id="commit-{{.Rev}}" data-flow="{{.Flow}}">
{{ if .OnlyRelation }}
<span />
{{ else }}