diff --git a/packages/base/src/dialogs/symbology/symbologyUtils.ts b/packages/base/src/dialogs/symbology/symbologyUtils.ts index 6861262e8..9914ae6c6 100644 --- a/packages/base/src/dialogs/symbology/symbologyUtils.ts +++ b/packages/base/src/dialogs/symbology/symbologyUtils.ts @@ -16,39 +16,37 @@ export namespace VectorUtils { return []; } - const prefix = layer.parameters.type === 'circle' ? 'circle-' : ''; - - if (!color[`${prefix}fill-color`]) { - return []; - } - + const keys = ['fill-color', 'circle-fill-color']; const valueColorPairs: IStopRow[] = []; - // So if it's not a string then it's an array and we parse - // Color[0] is the operator used for the color expression - switch (color[`${prefix}fill-color`][0]) { - case 'interpolate': - // First element is interpolate for linear selection - // Second element is type of interpolation (ie linear) - // Third is input value that stop values are compared with - // Fourth and on is value:color pairs - for (let i = 3; i < color[`${prefix}fill-color`].length; i += 2) { - const obj: IStopRow = { - stop: color[`${prefix}fill-color`][i], - output: color[`${prefix}fill-color`][i + 1] - }; - valueColorPairs.push(obj); - } - break; - case 'case': - for (let i = 1; i < color[`${prefix}fill-color`].length - 1; i += 2) { - const obj: IStopRow = { - stop: color[`${prefix}fill-color`][i][2], - output: color[`${prefix}fill-color`][i + 1] - }; - valueColorPairs.push(obj); - } - break; + for (const key of keys) { + if (!color[key]) { + continue; + } + + switch (color[key][0]) { + case 'interpolate': + // First element is interpolate for linear selection + // Second element is type of interpolation (ie linear) + // Third is input value that stop values are compared with + // Fourth and on is value:color pairs + for (let i = 3; i < color[key].length; i += 2) { + valueColorPairs.push({ + stop: color[key][i], + output: color[key][i + 1] + }); + } + break; + + case 'case': + for (let i = 1; i < color[key].length - 1; i += 2) { + valueColorPairs.push({ + stop: color[key][i][2], + output: color[key][i + 1] + }); + } + break; + } } return valueColorPairs; diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx index f981358c0..141541782 100644 --- a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx +++ b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx @@ -116,18 +116,11 @@ const Categorized = ({ colorExpr.push([0, 0, 0, 0.0]); const newStyle = { ...layer.parameters.color }; + newStyle['fill-color'] = colorExpr; - if (layer.parameters.type === 'fill') { - newStyle['fill-color'] = colorExpr; - } - - if (layer.parameters.type === 'line') { - newStyle['stroke-color'] = colorExpr; - } + newStyle['stroke-color'] = colorExpr; - if (layer.parameters.type === 'circle') { - newStyle['circle-fill-color'] = colorExpr; - } + newStyle['circle-fill-color'] = colorExpr; const symbologyState = { renderType: 'Categorized', diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx index b7f123406..6a7f72e88 100644 --- a/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx +++ b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx @@ -126,23 +126,15 @@ const Graduated = ({ const newStyle = { ...layer.parameters.color }; if (selectedMethodRef.current === 'color') { - if (layer.parameters.type === 'fill') { - newStyle['fill-color'] = colorExpr; - } + newStyle['fill-color'] = colorExpr; - if (layer.parameters.type === 'line') { - newStyle['stroke-color'] = colorExpr; - } + newStyle['stroke-color'] = colorExpr; - if (layer.parameters.type === 'circle') { - newStyle['circle-fill-color'] = colorExpr; - } + newStyle['circle-fill-color'] = colorExpr; } if (selectedMethodRef.current === 'radius') { - if (layer.parameters.type === 'circle') { - newStyle['circle-radius'] = colorExpr; - } + newStyle['circle-radius'] = colorExpr; } const symbologyState = { diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx index 923eaa1d8..76c1a0130 100644 --- a/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx +++ b/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx @@ -12,7 +12,6 @@ const SimpleSymbol = ({ }: ISymbologyDialogProps) => { const styleRef = useRef(); - const [useCircleStuff, setUseCircleStuff] = useState(false); const [style, setStyle] = useState({ fillColor: '#3399CC', joinStyle: 'round', @@ -38,23 +37,16 @@ const SimpleSymbol = ({ return; } - setUseCircleStuff(layer.parameters.type === 'circle'); - - // Mimicking QGIS here, - // Read values from file if we chose them using the single symbol thing - // but if we're switching to simple symbol, use defaults const initStyle = async () => { if (!layer.parameters) { return; } + const renderType = layer.parameters?.symbologyState.renderType; if (renderType === 'Single Symbol') { - // Read from current color or use defaults - const parsedStyle = parseColor( - layer.parameters.type, - layer.parameters.color - ); + // Parse with fallback logic inside + const parsedStyle = parseColor(layer.parameters.color); if (parsedStyle) { setStyle(parsedStyle); @@ -83,19 +75,19 @@ const SimpleSymbol = ({ return; } - const styleExpr: FlatStyle = {}; - - const prefix = layer.parameters.type === 'circle' ? 'circle-' : ''; - - if (layer.parameters.type === 'circle') { - styleExpr['circle-radius'] = styleRef.current?.radius; - } - - styleExpr[`${prefix}fill-color`] = styleRef.current?.fillColor; - styleExpr[`${prefix}stroke-color`] = styleRef.current?.strokeColor; - styleExpr[`${prefix}stroke-width`] = styleRef.current?.strokeWidth; - styleExpr[`${prefix}stroke-line-join`] = styleRef.current?.joinStyle; - styleExpr[`${prefix}stroke-line-cap`] = styleRef.current?.capStyle; + const styleExpr: FlatStyle = { + 'circle-radius': styleRef.current?.radius, + 'circle-fill-color': styleRef.current?.fillColor, + 'circle-stroke-color': styleRef.current?.strokeColor, + 'circle-stroke-width': styleRef.current?.strokeWidth, + 'circle-stroke-line-join': styleRef.current?.joinStyle, + 'circle-stroke-line-cap': styleRef.current?.capStyle, + 'fill-color': styleRef.current?.fillColor, + 'stroke-color': styleRef.current?.strokeColor, + 'stroke-width': styleRef.current?.strokeWidth, + 'stroke-line-join': styleRef.current?.joinStyle, + 'stroke-line-cap': styleRef.current?.capStyle + }; const symbologyState = { renderType: 'Single Symbol' @@ -111,22 +103,20 @@ const SimpleSymbol = ({ return (
- {useCircleStuff ? ( -
- - - setStyle(prevState => ({ - ...prevState, - radius: +event.target.value - })) - } - /> -
- ) : null} +
+ + + setStyle(prevState => ({ + ...prevState, + radius: +event.target.value + })) + } + /> +
{joinStyleOptions.map((method, index) => ( - ))}
- {useCircleStuff ? ( -
- -
- -
+
+ +
+
- ) : null} +
); }; diff --git a/packages/base/src/tools.ts b/packages/base/src/tools.ts index 7114612a9..59aa534cd 100644 --- a/packages/base/src/tools.ts +++ b/packages/base/src/tools.ts @@ -300,42 +300,23 @@ export interface IParsedStyle { radius?: number; } -export function parseColor(type: string, style: any) { - if (!type || !style) { +export function parseColor(style: any): IParsedStyle | undefined { + if (!style) { return; } - const type2 = type === 'circle' ? 'circle' : 'default'; - - const shapeStyles: any = { - circle: { - radius: style['circle-radius'] ?? 5, - fillColor: style['circle-fill-color'] ?? '#3399CC', - strokeColor: style['circle-stroke-color'] ?? '#3399CC', - strokeWidth: style['circle-stroke-width'] ?? 1.25, - joinStyle: style['circle-stroke-line-join'] ?? 'round', - capStyle: style['circle-stroke-line-cap'] ?? 'round' - }, - default: { - fillColor: style['fill-color'] ?? '[255, 255, 255, 0.4]', - strokeColor: style['stroke-color'] ?? '#3399CC', - strokeWidth: style['stroke-width'] ?? 1.25, - capStyle: style['stroke-line-cap'] ?? 'round', - joinStyle: style['stroke-line-join'] ?? 'round' - } + const parsedStyle: IParsedStyle = { + radius: style['circle-radius'] ?? 5, + fillColor: style['circle-fill-color'] ?? style['fill-color'] ?? '#3399CC', + strokeColor: + style['circle-stroke-color'] ?? style['stroke-color'] ?? '#3399CC', + strokeWidth: style['circle-stroke-width'] ?? style['stroke-width'] ?? 1.25, + joinStyle: + style['circle-stroke-line-join'] ?? style['stroke-line-join'] ?? 'round', + capStyle: + style['circle-stroke-line-cap'] ?? style['stroke-line-cap'] ?? 'round' }; - const parsedStyle: IParsedStyle = shapeStyles[type2]; - - Object.assign(parsedStyle, { - radius: parsedStyle.radius, - fillColor: parsedStyle.fillColor, - strokeColor: parsedStyle.strokeColor, - strokeWidth: parsedStyle.strokeWidth, - joinStyle: parsedStyle.joinStyle, - capStyle: parsedStyle.capStyle - }); - return parsedStyle; } diff --git a/packages/schema/src/schema/project/layers/vectorTileLayer.json b/packages/schema/src/schema/project/layers/vectorTileLayer.json index 96bab5593..1fd9cc6fb 100644 --- a/packages/schema/src/schema/project/layers/vectorTileLayer.json +++ b/packages/schema/src/schema/project/layers/vectorTileLayer.json @@ -2,19 +2,13 @@ "type": "object", "description": "VectorTileLayer", "title": "IVectorTileLayer", - "required": ["source", "type"], + "required": ["source"], "additionalProperties": false, "properties": { "source": { "type": "string", "description": "The id of the source" }, - "type": { - "type": "string", - "enum": ["circle", "fill", "line"], - "default": "line", - "description": "The type of vector layer" - }, "color": { "type": "object", "description": "The color of the the object" diff --git a/packages/schema/src/schema/project/layers/vectorlayer.json b/packages/schema/src/schema/project/layers/vectorlayer.json index 1d82e7d62..ad25aae59 100644 --- a/packages/schema/src/schema/project/layers/vectorlayer.json +++ b/packages/schema/src/schema/project/layers/vectorlayer.json @@ -2,19 +2,13 @@ "type": "object", "description": "VectorLayer", "title": "IVectorLayer", - "required": ["source", "type"], + "required": ["source"], "additionalProperties": false, "properties": { "source": { "type": "string", "description": "The id of the source" }, - "type": { - "type": "string", - "enum": ["circle", "fill", "line"], - "default": "line", - "description": "The type of vector layer" - }, "color": { "type": "object", "description": "The color of the the object" diff --git a/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py b/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py index 6589f97cd..4cee7dde0 100644 --- a/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py +++ b/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py @@ -185,7 +185,6 @@ def add_vectortile_layer( attribution: str = "", min_zoom: int = 0, max_zoom: int = 24, - type: Literal["circle", "fill", "line"] = "line", color_expr=None, opacity: float = 1, logical_op: str | None = None, @@ -225,7 +224,6 @@ def add_vectortile_layer( "visible": True, "parameters": { "source": source_id, - "type": type, "opacity": opacity, "color": color_expr, "opacity": opacity, @@ -245,7 +243,6 @@ def add_geojson_layer( path: str | Path | None = None, data: Dict | None = None, name: str = "GeoJSON Layer", - type: "circle" | "fill" | "line" = "line", opacity: float = 1, logical_op: str | None = None, feature: str | None = None, @@ -259,7 +256,6 @@ def add_geojson_layer( :param name: The name that will be used for the object in the document. :param path: The path to the JSON file to embed into the jGIS file. :param data: The raw GeoJSON data to embed into the jGIS file. - :param type: The type of the vector layer to create. :param opacity: The opacity, between 0 and 1. :param color_expr: The style expression used to style the layer, defaults to None """ @@ -297,7 +293,6 @@ def add_geojson_layer( "visible": True, "parameters": { "source": source_id, - "type": type, "color": color_expr, "opacity": opacity, }, diff --git a/ui-tests/tests/geojson-layers.spec.ts b/ui-tests/tests/geojson-layers.spec.ts index 34992d6ed..010fef6ef 100644 --- a/ui-tests/tests/geojson-layers.spec.ts +++ b/ui-tests/tests/geojson-layers.spec.ts @@ -64,9 +64,6 @@ test.describe('#geoJSONLayer', () => { await fileInput.fill('france_regions.json'); await fileInput.blur(); - const typeInput = dialog.locator('select#root_type'); - typeInput.selectOption('line'); - await dialog.getByText('Ok', { exact: true }).first().click(); await expect(dialog).not.toBeAttached();