bgColor and fgColor are now just constants
This commit is contained in:
parent
a3173a5bca
commit
732f5c241f
3 changed files with 34 additions and 31 deletions
|
|
@ -39,6 +39,11 @@ seed: 1,`
|
||||||
|
|
||||||
var floatRE = regexp.MustCompile(`(\d+)\.(\d+)`)
|
var floatRE = regexp.MustCompile(`(\d+)\.(\d+)`)
|
||||||
|
|
||||||
|
const (
|
||||||
|
BG_COLOR = color.N7
|
||||||
|
FG_COLOR = color.N1
|
||||||
|
)
|
||||||
|
|
||||||
func (r *Runner) run(js string) (goja.Value, error) {
|
func (r *Runner) run(js string) (goja.Value, error) {
|
||||||
vm := (*goja.Runtime)(r)
|
vm := (*goja.Runtime)(r)
|
||||||
return vm.RunString(js)
|
return vm.RunString(js)
|
||||||
|
|
@ -681,7 +686,7 @@ func extractPathData(roughPaths []roughPath) ([]string, error) {
|
||||||
return paths, nil
|
return paths, nil
|
||||||
}
|
}
|
||||||
|
|
||||||
func ArrowheadJS(r *Runner, bgColor string, arrowhead d2target.Arrowhead, stroke string, strokeWidth int) (arrowJS, extraJS string) {
|
func ArrowheadJS(r *Runner, arrowhead d2target.Arrowhead, stroke string, strokeWidth int) (arrowJS, extraJS string) {
|
||||||
// Note: selected each seed that looks the good for consistent renders
|
// Note: selected each seed that looks the good for consistent renders
|
||||||
switch arrowhead {
|
switch arrowhead {
|
||||||
case d2target.ArrowArrowhead:
|
case d2target.ArrowArrowhead:
|
||||||
|
|
@ -705,7 +710,7 @@ func ArrowheadJS(r *Runner, bgColor string, arrowhead d2target.Arrowhead, stroke
|
||||||
`[[-20, 0], [-10, 5], [0, 0], [-10, -5], [-20, 0]]`,
|
`[[-20, 0], [-10, 5], [0, 0], [-10, -5], [-20, 0]]`,
|
||||||
strokeWidth,
|
strokeWidth,
|
||||||
stroke,
|
stroke,
|
||||||
bgColor,
|
BG_COLOR,
|
||||||
)
|
)
|
||||||
case d2target.FilledDiamondArrowhead:
|
case d2target.FilledDiamondArrowhead:
|
||||||
arrowJS = fmt.Sprintf(
|
arrowJS = fmt.Sprintf(
|
||||||
|
|
@ -736,7 +741,7 @@ func ArrowheadJS(r *Runner, bgColor string, arrowhead d2target.Arrowhead, stroke
|
||||||
`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 1, seed: 4 })`,
|
`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 1, seed: 4 })`,
|
||||||
strokeWidth,
|
strokeWidth,
|
||||||
stroke,
|
stroke,
|
||||||
bgColor,
|
BG_COLOR,
|
||||||
)
|
)
|
||||||
case d2target.CfOneRequired:
|
case d2target.CfOneRequired:
|
||||||
arrowJS = fmt.Sprintf(
|
arrowJS = fmt.Sprintf(
|
||||||
|
|
@ -758,17 +763,17 @@ func ArrowheadJS(r *Runner, bgColor string, arrowhead d2target.Arrowhead, stroke
|
||||||
`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 1, seed: 5 })`,
|
`node = rc.circle(-20, 0, 8, { strokeWidth: %d, stroke: "%s", fill: "%s", fillStyle: "solid", fillWeight: 1, seed: 5 })`,
|
||||||
strokeWidth,
|
strokeWidth,
|
||||||
stroke,
|
stroke,
|
||||||
bgColor,
|
BG_COLOR,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
func Arrowheads(r *Runner, bgColor string, connection d2target.Connection, srcAdj, dstAdj *geo.Point) (string, error) {
|
func Arrowheads(r *Runner, connection d2target.Connection, srcAdj, dstAdj *geo.Point) (string, error) {
|
||||||
arrowPaths := []string{}
|
arrowPaths := []string{}
|
||||||
|
|
||||||
if connection.SrcArrow != d2target.NoArrowhead {
|
if connection.SrcArrow != d2target.NoArrowhead {
|
||||||
arrowJS, extraJS := ArrowheadJS(r, bgColor, connection.SrcArrow, connection.Stroke, connection.StrokeWidth)
|
arrowJS, extraJS := ArrowheadJS(r, connection.SrcArrow, connection.Stroke, connection.StrokeWidth)
|
||||||
if arrowJS == "" {
|
if arrowJS == "" {
|
||||||
return "", nil
|
return "", nil
|
||||||
}
|
}
|
||||||
|
|
@ -806,7 +811,7 @@ func Arrowheads(r *Runner, bgColor string, connection d2target.Connection, srcAd
|
||||||
}
|
}
|
||||||
|
|
||||||
if connection.DstArrow != d2target.NoArrowhead {
|
if connection.DstArrow != d2target.NoArrowhead {
|
||||||
arrowJS, extraJS := ArrowheadJS(r, bgColor, connection.DstArrow, connection.Stroke, connection.StrokeWidth)
|
arrowJS, extraJS := ArrowheadJS(r, connection.DstArrow, connection.Stroke, connection.StrokeWidth)
|
||||||
if arrowJS == "" {
|
if arrowJS == "" {
|
||||||
return "", nil
|
return "", nil
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,9 @@ const (
|
||||||
MIN_ARROWHEAD_STROKE_WIDTH = 2
|
MIN_ARROWHEAD_STROKE_WIDTH = 2
|
||||||
|
|
||||||
appendixIconRadius = 16
|
appendixIconRadius = 16
|
||||||
|
|
||||||
|
BG_COLOR = color.N7
|
||||||
|
FG_COLOR = color.N1
|
||||||
)
|
)
|
||||||
|
|
||||||
var multipleOffset = geo.NewVector(d2target.MULTIPLE_OFFSET, -d2target.MULTIPLE_OFFSET)
|
var multipleOffset = geo.NewVector(d2target.MULTIPLE_OFFSET, -d2target.MULTIPLE_OFFSET)
|
||||||
|
|
@ -119,7 +122,7 @@ func arrowheadDimensions(arrowhead d2target.Arrowhead, strokeWidth float64) (wid
|
||||||
return clippedStrokeWidth * widthMultiplier, clippedStrokeWidth * heightMultiplier
|
return clippedStrokeWidth * widthMultiplier, clippedStrokeWidth * heightMultiplier
|
||||||
}
|
}
|
||||||
|
|
||||||
func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2target.Connection) string {
|
func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) string {
|
||||||
arrowhead := connection.DstArrow
|
arrowhead := connection.DstArrow
|
||||||
if !isTarget {
|
if !isTarget {
|
||||||
arrowhead = connection.SrcArrow
|
arrowhead = connection.SrcArrow
|
||||||
|
|
@ -217,7 +220,7 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ
|
||||||
case d2target.DiamondArrowhead:
|
case d2target.DiamondArrowhead:
|
||||||
polygonEl := d2themes.NewThemableElement("polygon")
|
polygonEl := d2themes.NewThemableElement("polygon")
|
||||||
polygonEl.ClassName = "connection"
|
polygonEl.ClassName = "connection"
|
||||||
polygonEl.Fill = bgColor
|
polygonEl.Fill = BG_COLOR
|
||||||
polygonEl.Stroke = connection.Stroke
|
polygonEl.Stroke = connection.Stroke
|
||||||
polygonEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
polygonEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
||||||
|
|
||||||
|
|
@ -260,7 +263,7 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ
|
||||||
circleEl := d2themes.NewThemableElement("circle")
|
circleEl := d2themes.NewThemableElement("circle")
|
||||||
circleEl.Cy = radius
|
circleEl.Cy = radius
|
||||||
circleEl.R = radius - strokeWidth
|
circleEl.R = radius - strokeWidth
|
||||||
circleEl.Fill = bgColor
|
circleEl.Fill = BG_COLOR
|
||||||
circleEl.Stroke = connection.Stroke
|
circleEl.Stroke = connection.Stroke
|
||||||
circleEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
circleEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
||||||
|
|
||||||
|
|
@ -281,7 +284,7 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ
|
||||||
offset, 0.,
|
offset, 0.,
|
||||||
offset, height,
|
offset, height,
|
||||||
)
|
)
|
||||||
modifierEl.Fill = bgColor
|
modifierEl.Fill = BG_COLOR
|
||||||
modifierEl.Stroke = connection.Stroke
|
modifierEl.Stroke = connection.Stroke
|
||||||
modifierEl.ClassName = "connection"
|
modifierEl.ClassName = "connection"
|
||||||
modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
||||||
|
|
@ -290,7 +293,7 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ
|
||||||
modifierEl.Cx = offset/2.0 + 2.0
|
modifierEl.Cx = offset/2.0 + 2.0
|
||||||
modifierEl.Cy = height / 2.0
|
modifierEl.Cy = height / 2.0
|
||||||
modifierEl.R = offset / 2.0
|
modifierEl.R = offset / 2.0
|
||||||
modifierEl.Fill = bgColor
|
modifierEl.Fill = BG_COLOR
|
||||||
modifierEl.Stroke = connection.Stroke
|
modifierEl.Stroke = connection.Stroke
|
||||||
modifierEl.ClassName = "connection"
|
modifierEl.ClassName = "connection"
|
||||||
modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
modifierEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
||||||
|
|
@ -319,7 +322,7 @@ func arrowheadMarker(isTarget bool, id string, bgColor string, connection d2targ
|
||||||
if !isTarget {
|
if !isTarget {
|
||||||
gEl.Transform = fmt.Sprintf("scale(-1) translate(-%f, -%f)", width, height)
|
gEl.Transform = fmt.Sprintf("scale(-1) translate(-%f, -%f)", width, height)
|
||||||
}
|
}
|
||||||
gEl.Fill = bgColor
|
gEl.Fill = BG_COLOR
|
||||||
gEl.Stroke = connection.Stroke
|
gEl.Stroke = connection.Stroke
|
||||||
gEl.ClassName = "connection"
|
gEl.ClassName = "connection"
|
||||||
gEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
gEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
|
||||||
|
|
@ -475,7 +478,7 @@ func makeLabelMask(labelTL *geo.Point, width, height int) string {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
func drawConnection(writer io.Writer, bgColor string, fgColor string, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, _ error) {
|
func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, _ error) {
|
||||||
opacityStyle := ""
|
opacityStyle := ""
|
||||||
if connection.Opacity != 1.0 {
|
if connection.Opacity != 1.0 {
|
||||||
opacityStyle = fmt.Sprintf(" style='opacity:%f'", connection.Opacity)
|
opacityStyle = fmt.Sprintf(" style='opacity:%f'", connection.Opacity)
|
||||||
|
|
@ -485,7 +488,7 @@ func drawConnection(writer io.Writer, bgColor string, fgColor string, labelMaskI
|
||||||
if connection.SrcArrow != d2target.NoArrowhead {
|
if connection.SrcArrow != d2target.NoArrowhead {
|
||||||
id := arrowheadMarkerID(false, connection)
|
id := arrowheadMarkerID(false, connection)
|
||||||
if _, in := markers[id]; !in {
|
if _, in := markers[id]; !in {
|
||||||
marker := arrowheadMarker(false, id, bgColor, connection)
|
marker := arrowheadMarker(false, id, connection)
|
||||||
if marker == "" {
|
if marker == "" {
|
||||||
panic(fmt.Sprintf("received empty arrow head marker for: %#v", connection))
|
panic(fmt.Sprintf("received empty arrow head marker for: %#v", connection))
|
||||||
}
|
}
|
||||||
|
|
@ -499,7 +502,7 @@ func drawConnection(writer io.Writer, bgColor string, fgColor string, labelMaskI
|
||||||
if connection.DstArrow != d2target.NoArrowhead {
|
if connection.DstArrow != d2target.NoArrowhead {
|
||||||
id := arrowheadMarkerID(true, connection)
|
id := arrowheadMarkerID(true, connection)
|
||||||
if _, in := markers[id]; !in {
|
if _, in := markers[id]; !in {
|
||||||
marker := arrowheadMarker(true, id, bgColor, connection)
|
marker := arrowheadMarker(true, id, connection)
|
||||||
if marker == "" {
|
if marker == "" {
|
||||||
panic(fmt.Sprintf("received empty arrow head marker for: %#v", connection))
|
panic(fmt.Sprintf("received empty arrow head marker for: %#v", connection))
|
||||||
}
|
}
|
||||||
|
|
@ -531,7 +534,7 @@ func drawConnection(writer io.Writer, bgColor string, fgColor string, labelMaskI
|
||||||
fmt.Fprint(writer, out)
|
fmt.Fprint(writer, out)
|
||||||
|
|
||||||
// render sketch arrowheads separately
|
// render sketch arrowheads separately
|
||||||
arrowPaths, err := d2sketch.Arrowheads(sketchRunner, bgColor, connection, srcAdj, dstAdj)
|
arrowPaths, err := d2sketch.Arrowheads(sketchRunner, connection, srcAdj, dstAdj)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
return "", err
|
return "", err
|
||||||
}
|
}
|
||||||
|
|
@ -590,7 +593,7 @@ func drawConnection(writer io.Writer, bgColor string, fgColor string, labelMaskI
|
||||||
if length > 0 {
|
if length > 0 {
|
||||||
position = size / length
|
position = size / length
|
||||||
}
|
}
|
||||||
fmt.Fprint(writer, renderArrowheadLabel(fgColor, connection, connection.SrcLabel, position, size, size))
|
fmt.Fprint(writer, renderArrowheadLabel(connection, connection.SrcLabel, position, size, size))
|
||||||
}
|
}
|
||||||
if connection.DstLabel != "" {
|
if connection.DstLabel != "" {
|
||||||
// TODO use arrowhead label dimensions https://github.com/terrastruct/d2/issues/183
|
// TODO use arrowhead label dimensions https://github.com/terrastruct/d2/issues/183
|
||||||
|
|
@ -599,19 +602,19 @@ func drawConnection(writer io.Writer, bgColor string, fgColor string, labelMaskI
|
||||||
if length > 0 {
|
if length > 0 {
|
||||||
position -= size / length
|
position -= size / length
|
||||||
}
|
}
|
||||||
fmt.Fprint(writer, renderArrowheadLabel(fgColor, connection, connection.DstLabel, position, size, size))
|
fmt.Fprint(writer, renderArrowheadLabel(connection, connection.DstLabel, position, size, size))
|
||||||
}
|
}
|
||||||
fmt.Fprintf(writer, `</g>`)
|
fmt.Fprintf(writer, `</g>`)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
func renderArrowheadLabel(fgColor string, connection d2target.Connection, text string, position, width, height float64) string {
|
func renderArrowheadLabel(connection d2target.Connection, text string, position, width, height float64) string {
|
||||||
labelTL := label.UnlockedTop.GetPointOnRoute(connection.Route, float64(connection.StrokeWidth), position, width, height)
|
labelTL := label.UnlockedTop.GetPointOnRoute(connection.Route, float64(connection.StrokeWidth), position, width, height)
|
||||||
|
|
||||||
textEl := d2themes.NewThemableElement("text")
|
textEl := d2themes.NewThemableElement("text")
|
||||||
textEl.X = labelTL.X + width/2
|
textEl.X = labelTL.X + width/2
|
||||||
textEl.Y = labelTL.Y + float64(connection.FontSize)
|
textEl.Y = labelTL.Y + float64(connection.FontSize)
|
||||||
textEl.Fill = fgColor
|
textEl.Fill = FG_COLOR
|
||||||
textEl.ClassName = "text-italic"
|
textEl.ClassName = "text-italic"
|
||||||
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
|
textEl.Style = fmt.Sprintf("text-anchor:%s;font-size:%vpx", "middle", connection.FontSize)
|
||||||
textEl.Content = RenderText(text, textEl.X, height)
|
textEl.Content = RenderText(text, textEl.X, height)
|
||||||
|
|
@ -1449,12 +1452,7 @@ func appendOnTrigger(buf *bytes.Buffer, source string, triggers []string, newCon
|
||||||
//go:embed fitToScreen.js
|
//go:embed fitToScreen.js
|
||||||
var fitToScreenScript string
|
var fitToScreenScript string
|
||||||
|
|
||||||
const (
|
const DEFAULT_THEME int64 = 0
|
||||||
BG_COLOR = color.N7
|
|
||||||
FG_COLOR = color.N1
|
|
||||||
|
|
||||||
DEFAULT_THEME int64 = 0
|
|
||||||
)
|
|
||||||
|
|
||||||
var DEFAULT_DARK_THEME *int64 = nil // no theme selected
|
var DEFAULT_DARK_THEME *int64 = nil // no theme selected
|
||||||
|
|
||||||
|
|
@ -1512,7 +1510,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
|
||||||
markers := map[string]struct{}{}
|
markers := map[string]struct{}{}
|
||||||
for _, obj := range allObjects {
|
for _, obj := range allObjects {
|
||||||
if c, is := obj.(d2target.Connection); is {
|
if c, is := obj.(d2target.Connection); is {
|
||||||
labelMask, err := drawConnection(buf, BG_COLOR, FG_COLOR, labelMaskID, c, markers, idToShape, sketchRunner)
|
labelMask, err := drawConnection(buf, labelMaskID, c, markers, idToShape, sketchRunner)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
return nil, err
|
return nil, err
|
||||||
}
|
}
|
||||||
|
|
@ -1551,7 +1549,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
|
||||||
backgroundEl.Y = float64(top)
|
backgroundEl.Y = float64(top)
|
||||||
backgroundEl.Width = float64(w)
|
backgroundEl.Width = float64(w)
|
||||||
backgroundEl.Height = float64(h)
|
backgroundEl.Height = float64(h)
|
||||||
backgroundEl.Fill = color.N7
|
backgroundEl.Fill = BG_COLOR
|
||||||
|
|
||||||
// generate elements that will be appended to the SVG tag
|
// generate elements that will be appended to the SVG tag
|
||||||
upperBuf := &bytes.Buffer{}
|
upperBuf := &bytes.Buffer{}
|
||||||
|
|
|
||||||
|
|
@ -112,13 +112,13 @@ func Luminance(colorString string) (float64, error) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const (
|
const (
|
||||||
N1 = "N1"
|
N1 = "N1" // foreground color
|
||||||
N2 = "N2"
|
N2 = "N2"
|
||||||
N3 = "N3"
|
N3 = "N3"
|
||||||
N4 = "N4"
|
N4 = "N4"
|
||||||
N5 = "N5"
|
N5 = "N5"
|
||||||
N6 = "N6"
|
N6 = "N6"
|
||||||
N7 = "N7"
|
N7 = "N7" // background color
|
||||||
|
|
||||||
// Base Colors: used for containers
|
// Base Colors: used for containers
|
||||||
B1 = "B1"
|
B1 = "B1"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue