FVKB-252: Highlight row in Table when it is being edited or "previewed"

Author: dukke

kview/src/main/java/dev/ikm/komet/kview/mvvm/view/genpurpose/control/table/PatternSemanticsTableControlSkin.java

@@ -4,9 +4,13 @@
 import dev.ikm.komet.kview.mvvm.view.genpurpose.control.table.cell.SemanticComponentCollectionCell;
 import dev.ikm.komet.kview.mvvm.view.genpurpose.control.table.cell.SemanticStandardCell;
 import javafx.collections.ListChangeListener;
+import javafx.css.PseudoClass;
 import javafx.scene.control.SkinBase;
 import javafx.scene.control.TableColumn;
+import javafx.scene.control.TableRow;
 import javafx.scene.control.TableView;
+import javafx.util.Callback;
+import javafx.util.Subscription;
 
 import java.util.List;
 
@@ -15,6 +19,8 @@
 import static dev.ikm.tinkar.terms.TinkarTerm.COMPONENT_ID_SET_FIELD;
 
 public class PatternSemanticsTableControlSkin extends SkinBase<PatternSemanticsTableControl> {
+    public static final PseudoClass EDIT_MODE_PSEUDO_CLASS = PseudoClass.getPseudoClass("edit-mode");
+    public static final PseudoClass PREVIEW_MODE_PSEUDO_CLASS = PseudoClass.getPseudoClass("preview-mode");
 
     private final TableView<SemanticRow> tableView = new TableView<>();
 
@@ -25,13 +31,15 @@ public class PatternSemanticsTableControlSkin extends SkinBase<PatternSemanticsT
      *
      * @param control The control for which this Skin should attach to.
      */
-    protected PatternSemanticsTableControlSkin(PatternSemanticsTableControl control) {
+    public PatternSemanticsTableControlSkin(PatternSemanticsTableControl control) {
         super(control);
 
         getChildren().add(tableView);
 
         tableView.setTableMenuButtonVisible(true);
 
+        tableView.setRowFactory(createRowFactory());
+
         tableView.setItems(control.getSemantics());
 
         control.getSemantics().addListener(this::onSemanticsChanged);
@@ -42,6 +50,41 @@ protected PatternSemanticsTableControlSkin(PatternSemanticsTableControl control)
         }
     }
 
+    private static Callback<TableView<SemanticRow>, TableRow<SemanticRow>> createRowFactory() {
+        return new Callback<>() {
+            private Subscription lastSubscription;
+
+            @Override
+            public TableRow<SemanticRow> call(TableView<SemanticRow> semanticRowTableView) {
+                TableRow<SemanticRow> row = new TableRow<>();
+
+                row.itemProperty().subscribe((oldItem, newItem) -> {
+                    if (oldItem != null) {
+                        if (lastSubscription != null) {
+                            lastSubscription.unsubscribe();
+                        }
+                    }
+
+                    if (newItem != null) {
+                        lastSubscription = newItem.editModeProperty().subscribe(isEditMode -> {
+                            row.pseudoClassStateChanged(EDIT_MODE_PSEUDO_CLASS, isEditMode);
+                        });
+                        lastSubscription = Subscription.combine(lastSubscription,
+                                newItem.previewModeProperty().subscribe(isPreviewMode -> {
+                                    row.pseudoClassStateChanged(PREVIEW_MODE_PSEUDO_CLASS, isPreviewMode);
+                                })
+                        );
+                    } else {
+                        row.pseudoClassStateChanged(EDIT_MODE_PSEUDO_CLASS, false);
+                        row.pseudoClassStateChanged(PREVIEW_MODE_PSEUDO_CLASS, false);
+                    }
+                });
+
+                return row;
+            }
+        };
+    }
+
     private void onSemanticsChanged(ListChangeListener.Change<? extends SemanticRow> change) {
         while (change.next()) {
             if (change.wasAdded()) {

kview/src/main/java/dev/ikm/komet/kview/mvvm/view/genpurpose/control/table/PatternSemanticsTablePresenter.java

@@ -19,7 +19,9 @@
 import javafx.scene.Node;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 import java.util.UUID;
 
 public class PatternSemanticsTablePresenter implements PatternSemanticsPresenter {
@@ -31,6 +33,11 @@ public class PatternSemanticsTablePresenter implements PatternSemanticsPresenter
 
     private final PatternSemanticsTableControl patternSemanticsControl;
 
+    private final Map<SemanticEntity<SemanticEntityVersion>, SemanticRow> semanticEntityToSemanticRow = new HashMap<>();
+
+    private SemanticRow previousSemanticRowPreviewMode;
+    private SemanticRow previousSemanticRowEditMode;
+
     public PatternSemanticsTablePresenter(EditorPatternModel editorPatternModel, ViewProperties viewProperties,
                                           ObservableComposer composer, UUID journalTopic) {
         this.composer = composer;
@@ -66,6 +73,8 @@ public void addNewSemantic(SemanticEntity<SemanticEntityVersion> semanticEntity)
         }
         SemanticRow semanticRow = new SemanticRow(fields);
 
+        semanticEntityToSemanticRow.put(semanticEntity, semanticRow);
+
         patternSemanticsControl.getSemantics().add(semanticRow);
     }
 
@@ -76,12 +85,30 @@ public void clearSemantics() {
 
     @Override
     public void setPreviewingSemantic(SemanticEntity<SemanticEntityVersion> semanticEntity) {
+        if (previousSemanticRowPreviewMode != null) {
+            previousSemanticRowPreviewMode.setPreviewMode(false);
+        }
 
+        SemanticRow semanticRow = semanticEntityToSemanticRow.get(semanticEntity);
+        if (semanticRow != null) {
+            semanticRow.setPreviewMode(true);
+        }
+
+        previousSemanticRowPreviewMode = semanticRow;
     }
 
     @Override
     public void setEditingSemantic(SemanticEntity<SemanticEntityVersion> semanticEntity) {
+        if (previousSemanticRowEditMode != null) {
+            previousSemanticRowEditMode.setEditMode(false);
+        }
+
+        SemanticRow semanticRow = semanticEntityToSemanticRow.get(semanticEntity);
+        if (semanticRow != null) {
+            semanticRow.setEditMode(true);
+        }
 
+        previousSemanticRowEditMode = semanticRow;
     }
 
     @Override

kview/src/main/java/dev/ikm/komet/kview/mvvm/view/genpurpose/control/table/SemanticRow.java

@@ -1,5 +1,8 @@
 package dev.ikm.komet.kview.mvvm.view.genpurpose.control.table;
 
+import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.SimpleBooleanProperty;
+
 import java.util.List;
 
 public class SemanticRow {
@@ -10,4 +13,16 @@ public SemanticRow(List<SemanticField> fields) {
     }
 
     public List<SemanticField> getFields() { return fields; }
+
+    // -- edit mode
+    BooleanProperty editMode = new SimpleBooleanProperty();
+    public boolean isEditMode() { return editMode.get(); }
+    public BooleanProperty editModeProperty() { return editMode; }
+    public void setEditMode(boolean editMode) { this.editMode.set(editMode); }
+
+    // -- preview mode
+    BooleanProperty previewMode = new SimpleBooleanProperty();
+    public boolean isPreviewMode() { return previewMode.get(); }
+    public BooleanProperty previewModeProperty() { return previewMode; }
+    public void setPreviewMode(boolean previewMode) { this.previewMode.set(previewMode); }
 }

kview/src/main/resources/dev/ikm/komet/kview/mvvm/view/kview.css

@@ -6589,6 +6589,12 @@ Styling a context menu for kview ui/ux controls
     table_view_border_color: #ddd;
     table_view_body_border_color: #e9e9e9;
 
+    edit_mode_background_color: #f4fbf0;
+    edit_mode_border_color: #66bb38;
+
+    preview_mode_background_color: #f4f4f4;
+    preview_mode_border_color: #dfdfdf;
+
     -fx-cell-focus-inner-border: transparent;
 
     -fx-faint-focus-color: transparent;
@@ -6644,12 +6650,27 @@ Styling a context menu for kview ui/ux controls
     -fx-padding: 14px 10px 8px 10px;
 }
 
+.gen-purpose-window .table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell {
+    -fx-border-width: 1px;
+    -fx-border-color: transparent;
+}
+
 .gen-purpose-window .table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell {
     -fx-border-color: transparent table_view_body_border_color transparent transparent;
     -fx-border-width: 1px;
     -fx-border-insets: 0px 0px 0px 0px;
 }
 
+.gen-purpose-window .table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell:edit-mode {
+    -fx-background-color: edit_mode_background_color;
+    -fx-border-color: edit_mode_border_color;
+}
+
+.gen-purpose-window .table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell:preview-mode {
+    -fx-background-color: preview_mode_background_color;
+    -fx-border-color: preview_mode_border_color;
+}
+
 /* Data type COMPONENT_ID_SET_FIELD (Component Set), COMPONENT_FIELD (Component) */
 .gen-purpose-window .table-view .table-cell .component-container {
     -fx-spacing: 5px;