From 111aa346da424a30882ea43643f801d82df16dbd Mon Sep 17 00:00:00 2001 From: Tim Deubler Date: Fri, 12 Jul 2024 11:37:19 +0200 Subject: [PATCH] LayerStyle refactoring Signed-off-by: Tim Deubler --- packages/core/src/layers/TileLayer.ts | 20 +++++++++---------- packages/core/src/styles/XYZLayerStyle.ts | 16 +++++++++++---- packages/display/src/displays/BasicDisplay.ts | 5 ++++- packages/display/src/displays/Layers.ts | 3 +++ 4 files changed, 29 insertions(+), 15 deletions(-) diff --git a/packages/core/src/layers/TileLayer.ts b/packages/core/src/layers/TileLayer.ts index 1d8a5d44c..f2bd970f9 100644 --- a/packages/core/src/layers/TileLayer.ts +++ b/packages/core/src/layers/TileLayer.ts @@ -61,7 +61,7 @@ export class TileLayer extends Layer { private _fp: FeatureProvider; - private _sd: XYZLayerStyle = null; + private _styleManager: XYZLayerStyle = null; // pointer events active private _pev = true; @@ -345,10 +345,10 @@ export class TileLayer extends Layer { setStyleGroup(feature: Feature, styleGroup?: Style[] | false | null): void; setStyleGroup(feature, styleGroup?, merge?) { - if (this._sd) { + if (this._styleManager) { this.dispatchEvent(STYLEGROUP_CHANGE_EVENT, { feature, - styleGroup: this._sd.setStyleGroup(feature, styleGroup, merge) + styleGroup: this._styleManager.setStyleGroup(feature, styleGroup, merge) }); } }; @@ -361,12 +361,12 @@ export class TileLayer extends Layer { * */ getStyleGroup(feature: Feature, zoomlevel?: number, layerDefault?: boolean): readonly Style[] { - return this._sd?.getStyleGroup(feature, zoomlevel, layerDefault); + return this._styleManager?.getStyleGroup(feature, zoomlevel, layerDefault); }; _getCustomStyleGroup(feature: Feature): Style[] { - return this._sd?.getCustomStyleGroup(feature); + return this._styleManager?.getCustomStyleGroup(feature); } /** @@ -707,7 +707,7 @@ export class TileLayer extends Layer { * @param keepCustom - keep and reuse custom set feature styles that have been set via layer.setStyleGroup(...) */ setStyle(layerStyle: LayerStyle| XYZLayerStyle, keepCustom: boolean = false) { - const _customFeatureStyles = keepCustom && this._sd?.getCustomStyles(); + const _customFeatureStyles = keepCustom && this._styleManager?.getCustomStyles(); // const isFnc = (fnc) => typeof fnc == 'function'; // if (!isFnc(layerStyle.getStyleGroup) || !isFnc(layerStyle.setStyleGroup)) { if (!(layerStyle instanceof XYZLayerStyle)) { @@ -716,20 +716,20 @@ export class TileLayer extends Layer { (layerStyle as XYZLayerStyle).init?.(this, _customFeatureStyles); - this._sd = layerStyle as XYZLayerStyle; + this._styleManager = layerStyle as XYZLayerStyle; this.dispatchEvent(STYLE_CHANGE_EVENT, {style: layerStyle}); }; getStyleManager(): XYZLayerStyle { - return this._sd; + return this._styleManager; }; /** * Get the current layerStyle. */ getStyle(): LayerStyle { - return this._sd; + return this._styleManager.getLayerStyle(); }; getMargin() { @@ -815,7 +815,7 @@ export class TileLayer extends Layer { }; getStyleDefinitions(): LayerStyle['definitions'] { - return this._sd?.getDefinitions(); + return this._styleManager?.getDefinitions(); } } diff --git a/packages/core/src/styles/XYZLayerStyle.ts b/packages/core/src/styles/XYZLayerStyle.ts index 3a3746e8f..f8e56c0b0 100644 --- a/packages/core/src/styles/XYZLayerStyle.ts +++ b/packages/core/src/styles/XYZLayerStyle.ts @@ -87,9 +87,11 @@ export class XYZLayerStyle implements LayerStyle { private flatStyles?: Style[]; private _filteredStyleGrp: StyleGroup; - constructor(styleCfg) { - for (let p in styleCfg) { - const property = styleCfg[p]; + private _style: LayerStyle; + + constructor(styleJSON: LayerStyle) { + for (let p in styleJSON) { + const property = styleJSON[p]; this[p] = p == 'styleGroups' ? deepCopy(property) : property; } // layerStyle._l = layer; @@ -97,7 +99,7 @@ export class XYZLayerStyle implements LayerStyle { this.expParser = new ExpressionParser(this.definitions, this.exprContext); - if (!styleCfg.assign) { + if (!styleJSON.assign) { const flatStyles = []; for (let name in this.styleGroups) { let styleGrp = this.styleGroups[name]; @@ -122,6 +124,8 @@ export class XYZLayerStyle implements LayerStyle { this._filteredStyleGrp = []; } + + this._style = styleJSON; } private createExpEvaluator(expr: JSONExpression) { @@ -286,4 +290,8 @@ export class XYZLayerStyle implements LayerStyle { clearCache() { this.expParser.clearCache?.(); } + + getLayerStyle(): LayerStyle { + return this._style; + } } diff --git a/packages/display/src/displays/BasicDisplay.ts b/packages/display/src/displays/BasicDisplay.ts index f1dc3baba..bdd2b0673 100644 --- a/packages/display/src/displays/BasicDisplay.ts +++ b/packages/display/src/displays/BasicDisplay.ts @@ -137,7 +137,10 @@ abstract class Display { 'styleChange': (ev) => { const {layer, style} = ev.detail; - const index = display.layers.indexOf(layer); + // const index = display.layers.indexOf(layer); + const displayLayer = display.layers.get(layer); + const {index} = displayLayer; + displayLayer.initStyle(); display.setLayerBgColor(style, display.layers[index]); display.buckets.tiles.forEach((t) => t.clear(index)); } diff --git a/packages/display/src/displays/Layers.ts b/packages/display/src/displays/Layers.ts index fc193224e..00bce01f6 100644 --- a/packages/display/src/displays/Layers.ts +++ b/packages/display/src/displays/Layers.ts @@ -73,7 +73,10 @@ class Layer { this.tileSize = (layer).tileSize || null; this.layers = layers; this.id = Math.floor(Math.random() * 1e16); + this.initStyle(); + } + initStyle() { this.expParser = (this.layer as TileLayer).getStyleManager?.().getExpressionParser?.() as StyleExpressionParser; }