Skip to content

Commit

Permalink
feat: more robust handling of select mode styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@JamesLMilner
JamesLMilner committed Jul 15, 2023
1 parent ad78f12 commit b5350cc
Show file tree
Hide file tree
Showing 8 changed files with 231 additions and 107 deletions.
7 changes: 7 additions & 0 deletions src/modes/base.mode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ import { isValidStoreFeature } from "../store/store-feature-validation";

type CustomStyling = Record<string, string | number>;

export enum ModeTypes {
Drawing = "drawing",
Select = "select",
Static = "static",
Render = "render",
}
export abstract class TerraDrawBaseDrawMode<T extends CustomStyling> {
protected _state: TerraDrawModeState;
get state() {
Expand Down Expand Up @@ -62,6 +68,7 @@ export abstract class TerraDrawBaseDrawMode<T extends CustomStyling> {
this.coordinatePrecision = (options && options.coordinatePrecision) || 9;
}

type = ModeTypes.Drawing;
mode = "base";

protected setDrawing() {
Expand Down
19 changes: 0 additions & 19 deletions src/modes/point/point.mode.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,25 +217,6 @@ describe("TerraDrawPointMode", () => {
pointColor: "#ffffff",
});
});

it("sets for selected points", () => {
const pointMode = new TerraDrawPointMode();
pointMode.register(getMockModeConfig(pointMode.mode));

pointMode.styles = {
selectedPointColor: "#ffffff",
selectedPointOutlineWidth: 2,
selectedPointWidth: 8,
selectedPointOutlineColor: "#000000",
};

expect(pointMode.styles).toStrictEqual({
selectedPointColor: "#ffffff",
selectedPointOutlineWidth: 2,
selectedPointWidth: 8,
selectedPointOutlineColor: "#000000",
});
});
});

describe("validateFeature", () => {
Expand Down
55 changes: 15 additions & 40 deletions src/modes/point/point.mode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import {
TerraDrawMouseEvent,
TerraDrawAdapterStyling,
HexColor,
SELECT_PROPERTIES,
} from "../../common";
import { GeoJSONStoreFeatures } from "../../store/store";
import { getDefaultStyling } from "../../util/styling";
Expand All @@ -14,10 +13,6 @@ type PointModeStyling = {
pointColor: HexColor;
pointOutlineColor: HexColor;
pointOutlineWidth: number;
selectedPointWidth: number;
selectedPointColor: HexColor;
selectedPointOutlineColor: HexColor;
selectedPointOutlineWidth: number;
};
export class TerraDrawPointMode extends TerraDrawBaseDrawMode<PointModeStyling> {
mode = "point";
Expand Down Expand Up @@ -89,41 +84,21 @@ export class TerraDrawPointMode extends TerraDrawBaseDrawMode<PointModeStyling>
feature.geometry.type === "Point" &&
feature.properties.mode === this.mode
) {
if (feature.properties[SELECT_PROPERTIES.SELECTED]) {
styles.pointColor = this.styles.selectedPointColor
? this.styles.selectedPointColor
: styles.pointColor;

styles.pointOutlineColor = this.styles.selectedPointOutlineColor
? this.styles.selectedPointOutlineColor
: styles.pointOutlineColor;

styles.pointOutlineWidth = this.styles.selectedPointOutlineWidth
? this.styles.selectedPointOutlineWidth
: 2;

styles.pointWidth = this.styles.selectedPointWidth
? this.styles.selectedPointWidth
: styles.pointWidth;
} else {
styles.pointColor = this.styles.pointColor
? this.styles.pointColor
: styles.pointColor;

styles.pointOutlineColor = this.styles.pointOutlineColor
? this.styles.pointOutlineColor
: styles.pointOutlineColor;

styles.pointOutlineWidth = this.styles.pointOutlineWidth
? this.styles.pointOutlineWidth
: styles.pointOutlineWidth;

styles.pointWidth = this.styles.pointWidth
? this.styles.pointWidth
: styles.pointWidth;
}

return styles;
styles.pointColor = this.styles.pointColor
? this.styles.pointColor
: styles.pointColor;

styles.pointOutlineColor = this.styles.pointOutlineColor
? this.styles.pointOutlineColor
: styles.pointOutlineColor;

styles.pointOutlineWidth = this.styles.pointOutlineWidth
? this.styles.pointOutlineWidth
: styles.pointOutlineWidth;

styles.pointWidth = this.styles.pointWidth
? this.styles.pointWidth
: styles.pointWidth;
}

return styles;
Expand Down
3 changes: 2 additions & 1 deletion src/modes/render/render.mode.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { TerraDrawAdapterStyling } from "../../common";
import { TerraDrawBaseDrawMode } from "../base.mode";
import { ModeTypes, TerraDrawBaseDrawMode } from "../base.mode";
import { BehaviorConfig } from "../base.behavior";
import { getDefaultStyling } from "../../util/styling";
import { GeoJSONStoreFeatures } from "../../terra-draw";
Expand All @@ -12,6 +12,7 @@ type RenderModeStylingExt<T extends TerraDrawAdapterStyling> = {};
type RenderModeStyling = RenderModeStylingExt<TerraDrawAdapterStyling>;

export class TerraDrawRenderMode extends TerraDrawBaseDrawMode<RenderModeStyling> {
public type = ModeTypes.Render; // The type of the mode
public mode = "render"; // This gets changed dynamically

constructor(options: { styles: Partial<TerraDrawAdapterStyling> }) {
Expand Down
70 changes: 70 additions & 0 deletions src/modes/select/select.mode.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2424,4 +2424,74 @@ describe("TerraDrawSelectMode", () => {
selectMode.onDeselect("id");
});
});

describe("styling", () => {
it("gets", () => {
const selectMode = new TerraDrawSelectMode();
selectMode.register(getMockModeConfig(selectMode.mode));
expect(selectMode.styles).toStrictEqual({});
});

it("set fails if non valid styling", () => {
const selectMode = new TerraDrawSelectMode();
selectMode.register(getMockModeConfig(selectMode.mode));

expect(() => {
(selectMode.styles as unknown) = "test";
}).toThrowError();

expect(selectMode.styles).toStrictEqual({});
});

it("sets", () => {
const selectMode = new TerraDrawSelectMode();
selectMode.register(getMockModeConfig(selectMode.mode));

selectMode.styles = {
selectedLineStringColor: "#ffffff",
};

expect(selectMode.styles).toStrictEqual({
selectedLineStringColor: "#ffffff",
});
});
});

describe("styleFeature", () => {
it("returns the correct styles for polygon from polygon mode", () => {
const polygonMode = new TerraDrawSelectMode({
styles: {
selectedPolygonOutlineWidth: 4,
selectedPolygonColor: "#222222",
selectedPolygonOutlineColor: "#111111",
selectedPolygonFillOpacity: 1,
},
});

expect(
polygonMode.styleFeature({
type: "Feature",
geometry: { type: "Polygon", coordinates: [] },
properties: { mode: "polygon", selected: true },
})
).toMatchObject({
polygonFillColor: "#222222",
polygonOutlineColor: "#111111",
polygonOutlineWidth: 4,
polygonFillOpacity: 1,
});

expect(
polygonMode.styleFeature({
type: "Feature",
geometry: { type: "Polygon", coordinates: [] },
properties: { mode: "polygon" },
})
).toMatchObject({
polygonFillColor: "#3f97e0",
polygonFillOpacity: 0.3,
polygonOutlineColor: "#3f97e0",
});
});
});
});
139 changes: 95 additions & 44 deletions src/modes/select/select.mode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
TerraDrawAdapterStyling,
} from "../../common";
import { Point, Position } from "geojson";
import { TerraDrawBaseDrawMode } from "../base.mode";
import { ModeTypes, TerraDrawBaseDrawMode } from "../base.mode";
import { MidPointBehavior } from "./behaviors/midpoint.behavior";
import { SelectionPointBehavior } from "./behaviors/selection-point.behavior";
import { FeaturesAtMouseEventBehavior } from "./behaviors/features-at-mouse-event.behavior";
Expand Down Expand Up @@ -41,21 +41,38 @@ type ModeFlags = {
};

type SelectionStyling = {
selectedColor: HexColor;
// Point
selectedPointColor: HexColor;
selectedPointWidth: number;
selectedPointOutlineColor: HexColor;
selectPointOutlineWidth: number;
selectedPointOutlineWidth: number;

// LineString
selectedLineStringColor: HexColor;
selectedLineStringWidth: number;

// Polygon
selectedPolygonColor: HexColor;
selectedPolygonFillOpacity: number;
selectedPolygonOutlineColor: HexColor;
selectedPolygonOutlineWidth: number;

// Selection Points (points at vertices of a polygon/linestring feature)
selectionPointWidth: number;
selectionPointColor: HexColor;
selectionPointOutlineColor: HexColor;
selectionPointOutlineWidth: number;

// Mid points (points at mid point of a polygon/linestring feature)
midPointColor: HexColor;
midPointOutlineColor: HexColor;
midPointWidth: number;
midPointOutlineWidth: number;
};

export class TerraDrawSelectMode extends TerraDrawBaseDrawMode<SelectionStyling> {
mode = "select";
public type = ModeTypes.Select;
public mode = "select";

private dragEventThrottle = 5;
private dragEventCount = 0;
Expand Down Expand Up @@ -643,53 +660,87 @@ export class TerraDrawSelectMode extends TerraDrawBaseDrawMode<SelectionStyling>
styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling {
const styles = { ...getDefaultStyling() };

if (feature.properties.mode === this.mode) {
if (
feature.properties.mode === this.mode &&
feature.geometry.type === "Point"
) {
if (feature.properties.selectionPoint) {
styles.pointColor =
this.styles.selectionPointColor || styles.pointColor;
styles.pointOutlineColor =
this.styles.selectionPointOutlineColor || styles.pointOutlineColor;
styles.pointWidth =
this.styles.selectionPointWidth !== undefined
? this.styles.selectionPointWidth
: styles.pointWidth;
styles.pointOutlineWidth =
this.styles.selectionPointOutlineWidth !== undefined
? this.styles.selectionPointOutlineWidth
: 2;
styles.zIndex = 30;

return styles;
}

if (feature.properties.midPoint) {
styles.pointColor = this.styles.midPointColor || styles.pointColor;
styles.pointOutlineColor =
this.styles.midPointOutlineColor || styles.pointOutlineColor;
styles.pointWidth =
this.styles.midPointWidth !== undefined
? this.styles.midPointWidth
: 4;
styles.pointOutlineWidth =
this.styles.midPointOutlineWidth !== undefined
? this.styles.midPointOutlineWidth
: 2;
styles.zIndex = 40;

return styles;
}
} else if (feature.properties[SELECT_PROPERTIES.SELECTED]) {
// Select mode shortcuts the styling of a feature if it is selected
// A selected feature from another mode will end up in this block

if (feature.geometry.type === "Polygon") {
if (this.styles.selectedColor) {
styles.polygonFillColor = this.styles.selectedColor;
if (this.styles.selectedPolygonColor) {
styles.polygonFillColor = this.styles.selectedPolygonColor;
}
if (this.styles.selectedColor) {
styles.polygonOutlineColor = this.styles.selectedColor;
if (this.styles.selectedPolygonOutlineWidth) {
styles.polygonOutlineWidth = this.styles.selectedPolygonOutlineWidth;
}
if (this.styles.selectedPolygonOutlineColor) {
styles.polygonOutlineColor = this.styles.selectedPolygonOutlineColor;
}
if (this.styles.selectedPolygonFillOpacity) {
styles.polygonFillOpacity = this.styles.selectedPolygonFillOpacity;
}
styles.zIndex = 10;
return styles;
}

if (feature.geometry.type === "Point") {
if (feature.properties.selectionPoint) {
styles.pointColor =
this.styles.selectionPointColor || styles.pointColor;
styles.pointOutlineColor =
this.styles.selectionPointOutlineColor || styles.pointOutlineColor;
styles.pointWidth =
this.styles.selectionPointWidth !== undefined
? this.styles.selectionPointWidth
: styles.pointWidth;
styles.pointOutlineWidth =
this.styles.selectPointOutlineWidth !== undefined
? this.styles.selectPointOutlineWidth
: 2;
styles.zIndex = 30;

return styles;
} else if (feature.geometry.type === "LineString") {
if (this.styles.selectedLineStringColor) {
styles.lineStringColor = this.styles.selectedLineStringColor;
}

if (feature.properties.midPoint) {
styles.pointColor = this.styles.midPointColor || styles.pointColor;
styles.pointOutlineColor =
this.styles.midPointOutlineColor || styles.pointOutlineColor;
styles.pointWidth =
this.styles.midPointWidth !== undefined
? this.styles.midPointWidth
: 4;
styles.pointOutlineWidth =
this.styles.midPointOutlineWidth !== undefined
? this.styles.midPointOutlineWidth
: 2;
styles.zIndex = 40;

return styles;
if (this.styles.selectedLineStringWidth) {
styles.lineStringWidth = this.styles.selectedLineStringWidth;
}
styles.zIndex = 10;
return styles;
} else if (feature.geometry.type === "Point") {
if (this.styles.selectedPointWidth) {
styles.pointWidth = this.styles.selectedPointWidth;
}
if (this.styles.selectedPointColor) {
styles.pointColor = this.styles.selectedPointColor;
}
if (this.styles.selectedPointOutlineColor) {
styles.pointOutlineColor = this.styles.selectedPointOutlineColor;
}

styles.pointOutlineWidth = this.styles.selectedPointOutlineWidth || 2;

styles.zIndex = 10;
return styles;
}
}

Expand Down
Loading

0 comments on commit b5350cc

Please sign in to comment.