Skip to content

Commit

Permalink
Fix svg text alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@lkleisa
lkleisa committed Mar 15, 2024
1 parent 7cbdcbf commit 85b00c5
Showing 1 changed file with 100 additions and 28 deletions.
128 changes: 100 additions & 28 deletions frontend/src/app/diagram/svgGeneration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,27 @@ export function generateKeyResultStretch(textLabel: string, teamName: string) {
<circle cx="60" cy="60" r="60" fill="url(#grad1)" />
<foreignObject x="15" y="30" width="90" height="120" color="white" font-size="12px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 55px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
Expand Down Expand Up @@ -48,18 +57,27 @@ export function generateKeyResultCommit(textLabel: string, teamName: string) {
<circle cx="60" cy="60" r="60" fill="url(#grad1)" />
<foreignObject x="15" y="30" width="90" height="120" color="black" font-size="12px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 55px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
Expand Down Expand Up @@ -102,18 +120,27 @@ export function generateKeyResultTarget(textLabel: string, teamName: string) {
<circle cx="60" cy="60" r="60" fill="url(#grad1)" />
<foreignObject x="15" y="30" width="90" height="120" color="black" font-size="12px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 55px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
Expand Down Expand Up @@ -156,18 +183,27 @@ export function generateKeyResultFail(textLabel: string, teamName: string) {
<circle cx="60" cy="60" r="60" fill="url(#grad1)" />
<foreignObject x="15" y="30" width="90" height="120" color="white" font-size="12px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 55px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
Expand Down Expand Up @@ -209,24 +245,33 @@ export function generateObjectiveDRAFT(textLabel: string, teamName: string) {
</defs>
<circle cx="80" cy="80" r="80" fill="url(#grad1)" />
<foreignObject x="30" y="35" width="100" height="160" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<foreignObject x="30" y="35" width="100" height="100" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 90px;
max-height: 80px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
<svg x="72" y="4" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg x="72" y="8" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#DB00FF"/>
<mask id="mask0_351_11899" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="20" height="20" fill="#D9D9D9"/>
Expand Down Expand Up @@ -257,24 +302,33 @@ export function generateObjectiveOnGoing(textLabel: string, teamName: string) {
</defs>
<circle cx="80" cy="80" r="80" fill="url(#grad1)" />
<foreignObject x="30" y="35" width="100" height="160" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<foreignObject x="30" y="35" width="100" height="100" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 90px;
max-height: 80px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
<svg x="70" y="4" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg x="70" y="8" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#1E5A96"/>
<mask id="mask0_351_11887" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="20" height="20" fill="#D9D9D9"/>
Expand Down Expand Up @@ -305,24 +359,33 @@ export function generateObjectiveSuccessful(textLabel: string, teamName: string)
</defs>
<circle cx="80" cy="80" r="80" fill="url(#grad1)" />
<foreignObject x="30" y="35" width="100" height="160" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<foreignObject x="30" y="35" width="100" height="100" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 90px;
max-height: 80px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
<svg x="70" y="4" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg x="70" y="8" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="white" />
<mask id="mask0_2854_29613" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="20" height="20" rx="10" fill="white"/>
Expand Down Expand Up @@ -353,24 +416,33 @@ export function generateObjectiveNotSuccessful(textLabel: string, teamName: stri
</defs>
<circle cx="80" cy="80" r="80" fill="url(#grad1)" />
<foreignObject x="30" y="35" width="100" height="160" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml">
${textLabel}
<foreignObject x="30" y="35" width="100" height="100" color="black" font-size="16px" font-family="Arial, sans-serif">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
<svg width="100%" height="100%">
<rect width="100%" height="100%" fill="blue"/>
<text x="50%" y="50%" fill="white" text-anchor="middle" alignment-baseline="middle">
${textLabel}
</text>
</svg>
</div>
<style>
div {
text-align: center;
max-height: 90px;
max-height: 80px;
}
text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
</style>
</foreignObject>
<svg x="72" y="4" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg x="72" y="8" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="white" />
<mask id="mask0_2854_31236" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
Expand Down

0 comments on commit 85b00c5

Please sign in to comment.