Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme support #175

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Dark theme support #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8e7f065
added support for initializing a color theme for supporting dark theme.
NiklasRentzCAU Oct 17, 2023
3816b0c
Added getters for ColorPreferences
a-sr Oct 17, 2023
234aa40
klighd.lsp: dark mode handling for more cases for both CLI and VS Code
NiklasRentzCAU Oct 17, 2023
8e12e8e
klighd.lsp: some null checks for dark theming
NiklasRentzCAU Oct 17, 2023
384124a
Added detection of dark theme and fake dark mode for klighd canvas
a-sr Oct 17, 2023
8fe36af
Merge branch 'nre/darkTheme' of [email protected]:kieler/KLighD.git into…
a-sr Oct 17, 2023
b7afff9
Switched to null as default for ColorPreferences property
a-sr Oct 18, 2023
5efe94c
Added dark themes for default syntheses
a-sr Oct 23, 2023
7a678b7
Added support for color preferences when using nested syntheses
a-sr Oct 23, 2023
362c593
Merge branch 'master' into nre/darkTheme
NiklasRentzCAU Dec 18, 2024
057645a
fixed requestModelAction handling for diagram colors
NiklasRentzCAU Dec 18, 2024
0ccc7a2
Include a general theme type in the color theming.
NiklasRentzCAU Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
bin/
xtend-gen/
target/
localM2/
klighd-snapshots/
klighd/
/localM2/
/klighd-snapshots/
/klighd/
.svn/
.DS_Store
*.class
Expand Down
115 changes: 89 additions & 26 deletions ...ieler.klighd.ide/src/de/cau/cs/kieler/klighd/ide/syntheses/EObjectFallbackSynthesis.xtend
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,11 @@ import com.google.common.collect.Table
import com.google.inject.Inject
import de.cau.cs.kieler.klighd.KlighdConstants
import de.cau.cs.kieler.klighd.SynthesisOption
import de.cau.cs.kieler.klighd.ide.syntheses.action.EcoreModelExpandDetailsAction
import de.cau.cs.kieler.klighd.kgraph.KNode
import de.cau.cs.kieler.klighd.kgraph.KPort
import de.cau.cs.kieler.klighd.kgraph.util.KGraphUtil
import de.cau.cs.kieler.klighd.krendering.Colors
import de.cau.cs.kieler.klighd.krendering.KColor
import de.cau.cs.kieler.klighd.krendering.LineStyle
import de.cau.cs.kieler.klighd.krendering.extensions.KColorExtensions
import de.cau.cs.kieler.klighd.krendering.extensions.KContainerRenderingExtensions
Expand All @@ -36,8 +37,8 @@ import de.cau.cs.kieler.klighd.krendering.extensions.KPortExtensions
import de.cau.cs.kieler.klighd.krendering.extensions.KRenderingExtensions
import de.cau.cs.kieler.klighd.microlayout.PlacementUtil
import de.cau.cs.kieler.klighd.syntheses.AbstractDiagramSynthesis
import de.cau.cs.kieler.klighd.ide.syntheses.action.EcoreModelExpandDetailsAction
import de.cau.cs.kieler.klighd.util.KlighdProperties
import java.awt.Color
import java.util.List
import java.util.Map
import org.eclipse.elk.alg.layered.options.EdgeStraighteningStrategy
Expand All @@ -55,6 +56,7 @@ import org.eclipse.emf.ecore.EStructuralFeature
import org.eclipse.emf.ecore.util.EContentsEList

import static extension de.cau.cs.kieler.klighd.syntheses.DiagramSyntheses.*
import static extension org.eclipse.emf.ecore.util.EcoreUtil.copy

/**
* Diagram synthesis of a {@link EObject}.
Expand Down Expand Up @@ -116,18 +118,28 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
val Map<EObject, KNode> nodeCache = newHashMap
val Table<EStructuralFeature, KNode, KPort> portCache = HashBasedTable.create

// Colors
var KColor foregroundColor
var KColor backgroundColor
var KColor foregroundNodeColor
var KColor backgroundNodeColor

override KNode transform(EObject model) {
// Init cache
nodeCache.clear
portCache.clear

// establish color theme
configureColors()

val rootNode = createNode();

rootNode.addLayoutParam(CoreOptions::ALGORITHM, LayeredOptions.ALGORITHM_ID);
rootNode.setLayoutOption(LayeredOptions::NODE_PLACEMENT_BK_FIXED_ALIGNMENT, FixedAlignment.BALANCED);
rootNode.setLayoutOption(LayeredOptions::NODE_PLACEMENT_BK_EDGE_STRAIGHTENING, EdgeStraighteningStrategy.IMPROVE_STRAIGHTNESS);
rootNode.setLayoutOption(LayeredOptions::SPACING_EDGE_NODE, LayeredOptions.SPACING_NODE_NODE.^default * 1.1f);
rootNode.setLayoutOption(LayeredOptions::SPACING_EDGE_NODE_BETWEEN_LAYERS, LayeredOptions.SPACING_NODE_NODE.^default * 1.1f);
rootNode.setProperty(KlighdProperties.DIAGRAM_BACKGROUND, backgroundColor)

// transform root object
rootNode.children += model.transformToNode
Expand All @@ -149,8 +161,12 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
}
it.target = nodeCache.get(eObject);
it.addPolyline => [
addHeadArrowDecorator
addJunctionPointDecorator
it.foreground = foregroundNodeColor.copy;
it.addHeadArrowDecorator
it.addJunctionPointDecorator => [
it.foreground = foregroundNodeColor.copy
it.background = foregroundNodeColor.copy
]
]
]
}
Expand All @@ -169,9 +185,13 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
}
it.target = nodeCache.get(targetEObject);
it.addPolyline => [
addHeadArrowDecorator
addJunctionPointDecorator
lineStyle = LineStyle.DASH
it.foreground = foregroundNodeColor.copy;
it.addHeadArrowDecorator
it.addJunctionPointDecorator => [
it.foreground = foregroundNodeColor.copy
it.background = foregroundNodeColor.copy
]
it.lineStyle = LineStyle.DASH
];
]
}
Expand All @@ -197,14 +217,15 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
// Expanded Rectangle
node.createFigure() => [
it.setProperty(KlighdProperties::EXPANDED_RENDERING, true);
it.addDoubleClickAction(KlighdConstants::ACTION_COLLAPSE_EXPAND);
it.setGridPlacement(1);

// add name of object as text
it.addText(object.eClass.name).associateWith(object) => [
it.fontSize = 11;
it.setFontBold(true);
it.foreground = foregroundColor.copy;
it.setGridPlacementData().from(LEFT, 9, 0, TOP, 8f, 0).to(RIGHT, 8, 0, BOTTOM, 4, 0);
it.suppressSelectability;
it.selectionFontBold = false;
];

// collapse button
Expand All @@ -214,14 +235,16 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
it.addSingleClickAction(KlighdConstants::ACTION_COLLAPSE_EXPAND);
it.addDoubleClickAction(KlighdConstants::ACTION_COLLAPSE_EXPAND);
it.setGridPlacementData().from(LEFT, 8, 0, TOP, 0, 0).to(RIGHT, 8, 0, BOTTOM, 0, 0);
it.selectionFontBold = false;
it.suppressSelectability;
];

if (hasAttributes || hasSuperTypes) {
// Add Details
it.addRectangle => [
it.setGridPlacementData.from(LEFT, 8, 0, TOP, 0, 0).to(RIGHT, 8, 0, BOTTOM, 8, 0);
it.setBackground = "white".color;
it.foreground = "gray".color
it.background = backgroundColor.copy;
it.foreground = foregroundNodeColor.copy;
it.lineWidth = 1;
it.setGridPlacement(1);

Expand All @@ -230,36 +253,42 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
// add all super types as string representation
if (hasSuperTypes) {
it.addText("SuperTypes") => [
it.foreground = "gray".color;
it.foreground = foregroundNodeColor.copy;
it.fontSize = 8;
it.setGridPlacementData().from(LEFT, 5, 0, TOP, 2, 0).to(RIGHT, 5, 0, BOTTOM, 2, 0);
it.selectionFontBold = false;
it.suppressSelectability;
];
eclass.EAllSuperTypes.filterNull.forEach [
// add a text with name and value of the attribute
container.addText(it.name) => [
it.fontSize = 9;
it.foreground = foregroundColor.copy;
it.setGridPlacementData().from(LEFT, 5, 0, TOP, 2, 0).to(RIGHT, 5, 0, BOTTOM, 2, 0);
it.selectionFontBold = false;
it.suppressSelectability;
];
]
}
// add all attributes as string representation
if (hasAttributes) {
if (hasSuperTypes) {
it.addHorizontalSeperatorLine(1, 1).foreground = "gray".color;
it.addHorizontalSeperatorLine(1, 1).foreground = foregroundNodeColor.copy;
}
it.addText("Attributes") => [
it.foreground = "gray".color;
it.foreground = foregroundNodeColor.copy;
it.fontSize = 8;
it.setGridPlacementData().from(LEFT, 5, 0, TOP, 2, 0).to(RIGHT, 5, 0, BOTTOM, 2, 0);
it.selectionFontBold = false;
it.suppressSelectability;
];
eclass.EAllAttributes.filterNull.forEach [
// add a text with name and value of the attribute
container.addText(it.name + ": " + String::valueOf(object.eGet(it))) => [
it.fontSize = 9;
it.foreground = foregroundColor.copy;
it.setGridPlacementData().from(LEFT, 5, 0, TOP, 2, 0).to(RIGHT, 5, 0, BOTTOM, 2, 0);
it.selectionFontBold = false;
it.suppressSelectability;
];
]
Expand All @@ -269,27 +298,30 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
];

// Collapse Rectangle
node.createFigure() =>
[
node.createFigure() => [
it.setProperty(KlighdProperties::COLLAPSED_RENDERING, true);
it.addDoubleClickAction(KlighdConstants::ACTION_COLLAPSE_EXPAND);
it.setGridPlacement(1);

// add name of object as text
it.addText(object.eClass.name).associateWith(object) =>
[
it.addText(object.eClass.name).associateWith(object) => [
it.fontSize = 11;
it.setFontBold(true);
it.foreground = foregroundColor.copy;
it.setGridPlacementData().from(LEFT, 8, 0, TOP, 8, 0).to(RIGHT, 8, 0, BOTTOM,
if(hasAttributes || hasSuperTypes) 4 else 8, 0);
it.suppressSelectability;
it.selectionFontBold = false;
];

if (hasAttributes || hasSuperTypes) {
// Add details button
it.addText("[Details]") => [
it.foreground = "blue".color
it.fontSize = 9
it.foreground = "blue".color;
it.fontSize = 9;
it.addSingleClickAction(KlighdConstants::ACTION_COLLAPSE_EXPAND);
it.addDoubleClickAction(KlighdConstants::ACTION_COLLAPSE_EXPAND);
it.setGridPlacementData().from(LEFT, 8, 0, TOP, 0, 0).to(RIGHT, 8, 0, BOTTOM, 8, 0);
it.selectionFontBold = false;
it.suppressSelectability;
];
}
];
Expand All @@ -306,14 +338,16 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
private def transformToPort(EStructuralFeature containerFeature, KNode node) {
val port = KGraphUtil::createInitializedPort
node.ports += port;
port.setPortSize(portEdgeLength, portEdgeLength);
port.setPortSize(0, 0);
port.addLayoutParam(CoreOptions::PORT_SIDE, PortSide::EAST);
port.setPortPos(node.width-1, node.nextEPortYPosition);
port.createLabel => [
text = containerFeature.name
it.text = containerFeature.name
val size = PlacementUtil.estimateSize(it)
it.width = size.width
it.height = size.height
it.configureOutsidePortLabel(containerFeature.name)
it.getKRendering.foreground = foregroundColor.copy
]

// Add to cache
Expand All @@ -328,12 +362,41 @@ class EObjectFallbackSynthesis extends AbstractDiagramSynthesis<EObject> {
private def createFigure(KNode node) {
val figure = node.addRoundedRectangle(8, 8, 1);
figure.lineWidth = 1;
figure.foreground = Colors.GRAY;
figure.background = Colors.GRAY_95;
figure.foreground = foregroundNodeColor.copy;
figure.background = backgroundNodeColor.copy;

// minimal node size is necessary if no text will be added
node.setMinimalNodeSize(2 * figure.cornerWidth, 2 * figure.cornerHeight);

return figure;
}

/**
* Configure the colors used in the diagram
*/
def configureColors() {
// default colors
foregroundColor = "black".color
backgroundColor = "white".color
foregroundNodeColor = "#bebebe".color
backgroundNodeColor = "#f2f2f2".color

val colorPrefereces = usedContext.getProperty(KlighdProperties.COLOR_PREFERENCES);
if (colorPrefereces !== null) {
foregroundColor = colorPrefereces.foreground;
backgroundColor = colorPrefereces.background;

val fgHSB = Color.RGBtoHSB(foregroundColor.getRed(), foregroundColor.getGreen(), foregroundColor.getBlue(), null);
val bgHSB = Color.RGBtoHSB(backgroundColor.getRed(), backgroundColor.getGreen(), backgroundColor.getBlue(), null);
val adjustment = bgHSB.get(2) < 0.6f ? -0.1f : 0.04f; // reduce brightness if color is dark dark

fgHSB.set(2, Math.max(0, Math.min(1, fgHSB.get(2) + adjustment)));
val newFg = Color.getHSBColor(fgHSB.get(0), fgHSB.get(1), fgHSB.get(2));
foregroundNodeColor.setColor(newFg.red, newFg.green, newFg.blue);

bgHSB.set(2, Math.max(0, Math.min(1, bgHSB.get(2) - adjustment)));
val newBg = Color.getHSBColor(bgHSB.get(0), bgHSB.get(1), bgHSB.get(2));
backgroundNodeColor.setColor(newBg.red, newBg.green, newBg.blue);
}
}
}
5 changes: 3 additions & 2 deletions ....cs.kieler.klighd.ide/src/de/cau/cs/kieler/klighd/ide/syntheses/ErrorModelSynthesis.xtend
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ class ErrorModelSynthesis extends AbstractDiagramSynthesis<ErrorModel> {
extension KContainerRenderingExtensions

@Inject
extension MessageModelSynthesis
MessageModelSynthesis delegate

// -------------------------------------------------------------------------
// Constants
Expand All @@ -53,7 +53,8 @@ class ErrorModelSynthesis extends AbstractDiagramSynthesis<ErrorModel> {
// Synthesis
override KNode transform(ErrorModel model) {
// create basic representation with super synthesis
val rootNode = (model as MessageModel).transform;
delegate.use(usedContext);
val rootNode = delegate.transform(model as MessageModel);
// Adjust diagram
if (rootNode !== null && !rootNode.children.empty) {
val messageNode = rootNode.children.head;
Expand Down
20 changes: 20 additions & 0 deletions ...s.kieler.klighd.ide/src/de/cau/cs/kieler/klighd/ide/syntheses/MessageModelSynthesis.xtend
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,15 @@ package de.cau.cs.kieler.klighd.ide.syntheses
import com.google.inject.Inject
import de.cau.cs.kieler.klighd.ide.model.MessageModel
import de.cau.cs.kieler.klighd.kgraph.KNode
import de.cau.cs.kieler.klighd.krendering.extensions.KColorExtensions
import de.cau.cs.kieler.klighd.krendering.extensions.KContainerRenderingExtensions
import de.cau.cs.kieler.klighd.krendering.extensions.KNodeExtensions
import de.cau.cs.kieler.klighd.krendering.extensions.KRenderingExtensions
import de.cau.cs.kieler.klighd.syntheses.AbstractDiagramSynthesis
import de.cau.cs.kieler.klighd.util.KlighdProperties

import static extension de.cau.cs.kieler.klighd.syntheses.DiagramSyntheses.*
import static extension org.eclipse.emf.ecore.util.EcoreUtil.copy

/**
* Diagram synthesis for a {@link MessageModel}.
Expand All @@ -42,6 +45,9 @@ class MessageModelSynthesis extends AbstractDiagramSynthesis<MessageModel> {
@Inject
extension KContainerRenderingExtensions

@Inject
extension KColorExtensions

// -------------------------------------------------------------------------
// Constants
public static val String ID = "de.cau.cs.kieler.klighd.ui.view.syntheses.MessageModelSynthesis";
Expand All @@ -50,6 +56,15 @@ class MessageModelSynthesis extends AbstractDiagramSynthesis<MessageModel> {
// Synthesis
override KNode transform(MessageModel model) {
val rootNode = createNode();

// color theme
val colorPrefereces = usedContext.getProperty(KlighdProperties.COLOR_PREFERENCES);
val fg = if (colorPrefereces !== null) {
colorPrefereces.foreground;
} else {
"#000000".color;
}

rootNode.children += createNode(model) => [
it.addRectangle() => [
it.invisible = true;
Expand All @@ -68,24 +83,29 @@ class MessageModelSynthesis extends AbstractDiagramSynthesis<MessageModel> {
it.addRoundedRectangle(7, 7) => [
it.setGridPlacement(1);
it.lineWidth = 2;
it.foreground = fg.copy;
//title
if (model.getTitle !== null) {
it.addText(model.getTitle) => [
it.fontSize = 12;
it.setFontBold = true;
it.foreground = fg.copy;
it.setGridPlacementData().from(LEFT, 8, 0, TOP, 8, 0).to(RIGHT, 8, 0, BOTTOM, 4, 0);
it.selectionFontBold = false; // No selection style
it.suppressSelectability;
]
}
//message
if (model.getMessage !== null) {
it.addText(model.getMessage) => [
it.fontSize = 12;
it.foreground = fg.copy;
if (model.getTitle !== null) {
it.setGridPlacementData().from(LEFT, 8, 0, TOP, 0, 0).to(RIGHT, 8, 0, BOTTOM, 4, 0);
} else {
it.setGridPlacementData().from(LEFT, 8, 0, TOP, 8, 0).to(RIGHT, 8, 0, BOTTOM, 8, 0);
}
it.selectionFontBold = false; // No selection style
it.suppressSelectability;
]
}
Expand Down
6 changes: 6 additions & 0 deletions .../de.cau.cs.kieler.klighd.lsp/src/de/cau/cs/kieler/klighd/lsp/KGraphDiagramGenerator.xtend
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,12 @@ class KGraphDiagramGenerator implements IDiagramGenerator {
id = uri
children = new ArrayList
]

// Special property for the diagram background, to be set on the diagram root.
val background = parentNode.getProperty(KlighdProperties.DIAGRAM_BACKGROUND)
if (background !== null) {
(diagramRoot as SKGraph).properties.put(KlighdProperties.DIAGRAM_BACKGROUND.id, background)
}

diagramRoot.children.addAll(createNodesAndPrepareEdges(#[parentNode], diagramRoot))
// Do post processing.
Expand Down
Loading
Loading