Skip to content

Commit

Permalink
Feature/finished/iia 1112 image data type (#247)
Browse files Browse the repository at this point in the history
* Update version to start feature: IIA-1112-Image-Data-Type

* Feature/IIA-1112: Add Image Data Type to Komet without fetching from the Database

* Update version to finish feature: IIA-1112-Image-Data-Type

* Feature/IIA-1437: compare public ids rather than Nids AND fix Image only showing on first time

* Feature/IIA-1437: add missing call to add readonly image control

* Feature/IIA-1112: Typo in getDescription method

* Feature/IIA-1112: remove file name from UI
  • Loading branch information
dukke authored Feb 7, 2025
1 parent 37535e9 commit eccb4b8
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 35 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ public class KLImageControlSkin extends SkinBase<KLImageControl> {
private final VBox mainContainer = new VBox();

protected final Label titleLabel = new Label();
private final TextField textField = new TextField();

private final StackPane attachImageButtonContainer = new StackPane();
private final Button attachImageButton = new Button();
Expand Down Expand Up @@ -58,7 +57,6 @@ public KLImageControlSkin(KLImageControl control) {
mainContainer.getChildren().addAll(
titleLabel,
imageContainer,
textField,
attachImageButtonContainer
);

Expand Down Expand Up @@ -89,13 +87,6 @@ protected String computeValue() {
}
});

textField.setPrefWidth(Double.MAX_VALUE);
textField.setMaxWidth(Region.USE_PREF_SIZE);

textField.setText(NO_SELECTION_TEXT_FIELD_TEXT);
textField.setEditable(false);
textField.setFocusTraversable(false);

attachImageButton.setText(ATTACH_BUTTON_TEXT);
attachImageButton.setOnAction(this::attachImageAction);

Expand All @@ -106,7 +97,6 @@ protected String computeValue() {
mainContainer.getStyleClass().add("main-container");
titleLabel.getStyleClass().add("title");
promptTextLabel.getStyleClass().add("prompt-text");
textField.getStyleClass().add("text");
imageContainer.getStyleClass().add("image-container");
attachImageButtonContainer.getStyleClass().add("image-button-container");

Expand Down Expand Up @@ -165,7 +155,6 @@ private void updateImageToShow(KLImageControl control) {
String fileName = imageFile.getName();

imageView.setImage(image);
textField.setText(fileName);

pseudoClassStateChanged(IMAGE_SELECTED_PSEUDO_CLASS, true);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@
public class KLReadOnlyImageControlSkin extends KLReadOnlyBaseControlSkin<KLReadOnlyImageControl> {
private static final PseudoClass IMAGE_SELECTED_PSEUDO_CLASS = PseudoClass.getPseudoClass("image-selected");

private final VBox textContainer = new VBox();
private final Label textLabel = new Label();

private final StackPane imageContainer = new StackPane();
private final ImageView imageView = new ImageView();

Expand All @@ -31,25 +28,18 @@ public class KLReadOnlyImageControlSkin extends KLReadOnlyBaseControlSkin<KLRead
public KLReadOnlyImageControlSkin(KLReadOnlyImageControl control) {
super(control);

mainContainer.getChildren().addAll(imageContainer, textContainer);
mainContainer.getChildren().add(imageContainer);

imageContainer.getChildren().addAll(imageView, promptTextLabel);
textContainer.getChildren().add(textLabel);

textLabel.setPrefWidth(Double.MAX_VALUE);
textLabel.setMaxWidth(Region.USE_PREF_SIZE);

// Initial texts
control.setTitle("IMAGE:");
control.setPromptText("Add image");
textLabel.setText("No Selection");

initImage(control);
setupContextMenu(control);

// CSS
textContainer.getStyleClass().add("text-container");
textLabel.getStyleClass().add("text");
imageContainer.getStyleClass().add("image-container");
}

Expand Down Expand Up @@ -80,7 +70,6 @@ private void updateImageToShow(KLReadOnlyImageControl control) {
String fileName = imageFile.getName();

imageView.setImage(image);
textLabel.setText(fileName);

pseudoClassStateChanged(IMAGE_SELECTED_PSEUDO_CLASS, true);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@
import dev.ikm.komet.kview.klfields.componentfield.KlComponentFieldFactory;
import dev.ikm.komet.kview.klfields.componentfield.KlComponentSetFieldFactory;
import dev.ikm.komet.kview.klfields.floatfield.KlFloatFieldFactory;
import dev.ikm.komet.kview.klfields.imagefield.KlImageFieldFactory;
import dev.ikm.komet.kview.klfields.integerfield.KlIntegerFieldFactory;
import dev.ikm.komet.kview.klfields.readonly.ReadOnlyKLFieldFactory;
import dev.ikm.komet.kview.klfields.stringfield.KlStringFieldFactory;
import dev.ikm.komet.kview.mvvm.model.DataModelHelper;
import dev.ikm.tinkar.common.id.PublicId;
import dev.ikm.tinkar.common.id.PublicIds;
import dev.ikm.tinkar.coordinate.stamp.calculator.Latest;
import dev.ikm.tinkar.coordinate.stamp.calculator.StampCalculator;
import dev.ikm.tinkar.entity.FieldRecord;
Expand All @@ -23,6 +26,7 @@

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import java.util.function.Consumer;

public class KlFieldHelper {
Expand Down Expand Up @@ -62,6 +66,11 @@ public static List<ObservableField<?>> displayEditableSemanticFields(ViewPropert
ObservableField writeObservableField = obtainObservableField(viewProperties, semanticEntityVersionLatest, fieldRecord);
ObservableField observableField = new ObservableField(writeObservableField.field(), true);
observableFields.add(observableField);

// TODO: this method below will be removed once the database has the capability to add and edit Image data types
// TODO: then all the code will be inside an if clause just like for the other data types.
maybeAddEditableImageControl(viewProperties, container, semanticEntityVersionLatest, observableField);

if (dataTypeNid == TinkarTerm.COMPONENT_FIELD.nid()) {
// load a read-only component
KlComponentFieldFactory componentFieldFactory = new KlComponentFieldFactory();
Expand Down Expand Up @@ -99,6 +108,9 @@ public static List<ObservableField<?>> displayEditableSemanticFields(ViewPropert
}
};
generateSemanticUIFields(viewProperties, semanticEntityVersionLatest, updateUIConsumer);

hasAddedEditableImage = false;

return observableFields;
}

Expand All @@ -114,6 +126,11 @@ public static List<ObservableField<?>> displayReadOnlySemanticFields(ViewPropert
ObservableField<?> writeObservableField = obtainObservableField(viewProperties, semanticEntityVersionLatest, fieldRecord);
ObservableField observableField = new ObservableField(writeObservableField.field(), false);
observableFields.add(observableField);

// TODO: this method below will be removed once the database has the capability to add and edit Image data types
// TODO: then all the code will be inside an if clause just like for the other data types.
maybeAddReadOnlyImageControl(viewProperties, container, semanticEntityVersionLatest, observableField);

// substitute each data type.
if (dataTypeNid == TinkarTerm.COMPONENT_FIELD.nid()) {
// load a read-only component
Expand Down Expand Up @@ -145,6 +162,41 @@ public static List<ObservableField<?>> displayReadOnlySemanticFields(ViewPropert
}
};
generateSemanticUIFields(viewProperties, semanticEntityVersionLatest, updateUIConsumer);

hasAddedReadOnlyImage = false;

return observableFields;
}


// TODO: These methods below are in temporarily so we can add a Image data type that doesn't fetch anything from the database.
// TODO: once the database has the capability for Image Data types we can remove these methods
private static boolean hasAddedReadOnlyImage = false;
private static boolean hasAddedEditableImage = false;

private static void maybeAddEditableImageControl(ViewProperties viewProperties, Pane container, Latest<SemanticEntityVersion> semanticEntityVersionLatest, ObservableField observableField) {
if (PublicId.equals(semanticEntityVersionLatest.get().entity().publicId(), PublicIds.of(UUID.fromString("48633874-f3d2-434a-9f11-2a07e4c4311b")))
&& !hasAddedEditableImage) {
KlImageFieldFactory imageFieldFactory = new KlImageFieldFactory();
Node node = imageFieldFactory.create(observableField, viewProperties.nodeView(), true).klWidget();
if (node != null) {
container.getChildren().add(node);
// Add separator
container.getChildren().add(createSeparator());
hasAddedEditableImage = true;
}
}
}

private static void maybeAddReadOnlyImageControl(ViewProperties viewProperties, Pane container, Latest<SemanticEntityVersion> semanticEntityVersionLatest, ObservableField observableField) {
if (PublicId.equals(semanticEntityVersionLatest.get().entity().publicId(), PublicIds.of(UUID.fromString("48633874-f3d2-434a-9f11-2a07e4c4311b")))
&& !hasAddedReadOnlyImage) {
KlImageFieldFactory imageFieldFactory = new KlImageFieldFactory();
Node readOnlyNode = imageFieldFactory.create(observableField, viewProperties.nodeView(), false).klWidget();
if (readOnlyNode != null) {
container.getChildren().add(readOnlyNode);
hasAddedReadOnlyImage = true;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
package dev.ikm.komet.kview.klfields.imagefield;

import dev.ikm.komet.framework.observable.ObservableField;
import dev.ikm.komet.framework.view.ObservableView;
import dev.ikm.komet.kview.controls.KLImageControl;
import dev.ikm.komet.kview.controls.KLReadOnlyImageControl;
import dev.ikm.komet.kview.klfields.BaseDefaultKlField;
import dev.ikm.komet.layout.component.version.field.KlImageField;
import javafx.scene.Node;
import javafx.scene.image.Image;

public class DefaultKlImageField extends BaseDefaultKlField<Image> implements KlImageField {
// TODO: For now we are using only one instance of each Image Data type control so we can bind them together
private static KLImageControl imageControl = new KLImageControl();
private static KLReadOnlyImageControl readOnlyImageControl = new KLReadOnlyImageControl();

public DefaultKlImageField(ObservableField<Image> observableFloatField, ObservableView observableView, boolean isEditable) {
super(observableFloatField, observableView, isEditable);

Node node;
if (isEditable) {
imageControl.setTitle("Image"); //TODO: for now the title is hardcoded but we need to get it from the ObservableField

node = imageControl;
} else {
readOnlyImageControl.setTitle("Image"); //TODO: for now the title is hardcoded but we need to get it from the ObservableField
readOnlyImageControl.imageFileProperty().bind(imageControl.imageFileProperty()); //TODO: this should later be bound to the ObservableField

node = readOnlyImageControl;
}
setKlWidget(node);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
package dev.ikm.komet.kview.klfields.imagefield;

import dev.ikm.komet.framework.observable.ObservableField;
import dev.ikm.komet.framework.view.ObservableView;
import dev.ikm.komet.layout.component.version.field.KlField;
import dev.ikm.komet.layout.component.version.field.KlFieldFactory;
import dev.ikm.komet.layout.component.version.field.KlImageField;
import javafx.scene.image.Image;

public class KlImageFieldFactory implements KlFieldFactory<Image> {

@Override
public KlField<Image> create(ObservableField<Image> observableField, ObservableView observableView, boolean editable) {
return new DefaultKlImageField(observableField, observableView, editable);
}

@Override
public Class<? extends KlField<Image>> getFieldInterface() {
return KlImageField.class;
}

@Override
public Class<? extends KlField<Image>> getFieldImplementation() {
return DefaultKlImageField.class;
}

@Override
public String getName() {
return "Image Field Factory";
}

@Override
public String getDescription() {
return "An Image field";
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,6 @@
-fx-font-size: 1.166667em; /* 14 */
}

.image-control .main-container .text-field {
-fx-font-family: "Noto Sans";

-fx-text-fill: #111;
-fx-font-size: 1.166667em;

-fx-background-color: #c3cddc, white;
-fx-background-insets: 0, 1px;
-fx-background-radius: 3px, 3px;
}

/******** Image and its Prompt Text ********/

.image-control .main-container .image-container {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4872,7 +4872,7 @@ Styling a context menu for kview ui/ux controls
-fx-spacing: 12px;

-fx-fill-width: true;
-fx-padding: 16px 8px 20px 8px;
-fx-padding: 16px 12px 20px 12px;
-fx-background-color: -Grey-1;
}
.semantic-field-collection-container,
Expand Down

0 comments on commit eccb4b8

Please sign in to comment.