@abi-software/flatmap-viewer 2.2.1-beta.1 → 2.2.1-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.rst +1 -1
  2. package/package.json +1 -1
  3. package/src/layers.js +1 -0
  4. package/src/styling.js +75 -41
package/README.rst CHANGED
@@ -38,7 +38,7 @@ The map server endpoint is specified as ``MAP_ENDPOINT`` in ``src/main.js``. It
38
38
  Package Installation
39
39
  ====================
40
40
 
41
- * ``npm install @abi-software/flatmap-viewer@2.2.1-beta.1``
41
+ * ``npm install @abi-software/flatmap-viewer@2.2.1-beta.2``
42
42
 
43
43
  Documentation
44
44
  -------------
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abi-software/flatmap-viewer",
3
- "version": "2.2.1-beta.1",
3
+ "version": "2.2.1-beta.2",
4
4
  "description": "Flatmap viewer using Maplibre GL",
5
5
  "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
6
6
  "main": "src/main.js",
package/src/layers.js CHANGED
@@ -60,6 +60,7 @@ class MapFeatureLayer
60
60
  if (haveVectorLayers) {
61
61
  if (vectorFeatures) {
62
62
  this.__addStyleLayer(style.FeatureFillLayer, options);
63
+ this.__addStyleLayer(style.FeatureDashLineLayer, options);
63
64
  this.__addStyleLayer(style.FeatureLineLayer, options);
64
65
  this.__addStyleLayer(style.FeatureBorderLayer, options);
65
66
  }
package/src/styling.js CHANGED
@@ -117,12 +117,12 @@ export class FeatureFillLayer extends VectorStyleLayer
117
117
  const paintStyle = {
118
118
  'fill-color': [
119
119
  'case',
120
+ ['has', 'colour'], ['get', 'colour'],
120
121
  ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
121
122
  ['boolean', ['feature-state', 'selected'], false], '#0F0',
122
123
  ['any',
123
124
  ['==', ['get', 'kind'], 'scaffold']
124
125
  ], 'white',
125
- ['has', 'colour'], ['get', 'colour'],
126
126
  ['has', 'node'], '#AFA202',
127
127
  'white' // background colour? body colour ??
128
128
  ],
@@ -133,10 +133,10 @@ export class FeatureFillLayer extends VectorStyleLayer
133
133
  ['==', ['get', 'kind'], 'tissue'],
134
134
  ['==', ['get', 'kind'], 'cell-type'],
135
135
  ], 0.1,
136
- ['has', 'colour'], 0.008,
137
136
  ['has', 'node'], 0.3,
138
137
  ['boolean', ['feature-state', 'selected'], false], 1.0,
139
138
  ['boolean', ['feature-state', 'active'], false], 0.8,
139
+ ['has', 'colour'], 0.008,
140
140
  (coloured && !dimmed) ? 0.01 : 0.5
141
141
  ]
142
142
  };
@@ -236,62 +236,96 @@ export class FeatureBorderLayer extends VectorStyleLayer
236
236
 
237
237
  export class FeatureLineLayer extends VectorStyleLayer
238
238
  {
239
- constructor(id, sourceLayer)
239
+ constructor(id, sourceLayer, dashed=false)
240
240
  {
241
- super(id, 'divider-line', sourceLayer);
241
+ const filterType = dashed ? 'line-dash' : 'line';
242
+ super(id, `divider-${filterType}`, sourceLayer);
243
+ this.__filter = dashed ?
244
+ [
245
+ 'any',
246
+ ['==', 'type', `line-dash`]
247
+ ]
248
+ :
249
+ [
250
+ 'any',
251
+ ['==', 'type', 'bezier'],
252
+ ['==', 'type', `line`]
253
+ ];
254
+ this.__dashed = dashed;
242
255
  }
243
256
 
244
- style(options)
257
+ paintStyle(options)
245
258
  {
246
259
  const coloured = !('colour' in options) || options.colour;
260
+ const paintStyle = {
261
+ 'line-color': [
262
+ 'case',
263
+ ['has', 'colour'], ['get', 'colour'],
264
+ ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
265
+ ['boolean', ['feature-state', 'selected'], false], '#0F0',
266
+ ['==', ['get', 'type'], 'network'], '#AFA202',
267
+ ['has', 'centreline'], '#888',
268
+ ('authoring' in options && options.authoring) ? '#C44' : '#444'
269
+ ],
270
+ 'line-opacity': [
271
+ 'case',
272
+ ['boolean', ['feature-state', 'active'], false], 1.0,
273
+ 0.3
274
+ ],
275
+ 'line-width': [
276
+ 'let',
277
+ 'width', [
278
+ 'case',
279
+ ['has', 'centreline'], 1.2,
280
+ ['==', ['get', 'type'], 'network'], 1.2,
281
+ ['boolean', ['feature-state', 'active'], false], 1.2,
282
+ ('authoring' in options && options.authoring) ? 0.7 : 0.5
283
+ ], [
284
+ 'interpolate',
285
+ ['exponential', 2],
286
+ ['zoom'],
287
+ 2, ["*", ['var', 'width'], ["^", 2, -0.5]],
288
+ 7, ["*", ['var', 'width'], ["^", 2, 2.5]],
289
+ 9, ["*", ['var', 'width'], ["^", 2, 4.0]]
290
+ ]
291
+ ]
292
+ // Need to vary width based on zoom??
293
+ // Or opacity??
294
+ };
295
+ if (this.__dashed) {
296
+ paintStyle['line-dasharray'] = [3, 2];
297
+ }
298
+ return paintStyle;
299
+ }
300
+
301
+ style(options)
302
+ {
247
303
  return {
248
304
  ...super.style(),
249
305
  'type': 'line',
250
306
  'filter': [
251
- 'all',
252
- ['==', '$type', 'LineString']
307
+ 'all',
308
+ ['==', '$type', 'LineString'],
309
+ this.__filter
253
310
  // not for paths...
254
311
  ],
255
- 'paint': {
256
- 'line-color': [
257
- 'case',
258
- ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
259
- ['boolean', ['feature-state', 'selected'], false], '#0F0',
260
- ['==', ['get', 'type'], 'network'], '#AFA202',
261
- ['has', 'centreline'], '#888',
262
- ('authoring' in options && options.authoring) ? '#C44' : '#444'
263
- ],
264
- 'line-opacity': [
265
- 'case',
266
- ['boolean', ['feature-state', 'active'], false], 1.0,
267
- 0.3
268
- ],
269
- 'line-width': [
270
- 'let',
271
- 'width', [
272
- 'case',
273
- ['has', 'centreline'], 1.2,
274
- ['==', ['get', 'type'], 'network'], 1.2,
275
- ['boolean', ['feature-state', 'active'], false], 1.2,
276
- ('authoring' in options && options.authoring) ? 0.7 : 0.1
277
- ], [
278
- 'interpolate',
279
- ['exponential', 2],
280
- ['zoom'],
281
- 2, ["*", ['var', 'width'], ["^", 2, -0.5]],
282
- 7, ["*", ['var', 'width'], ["^", 2, 2.5]],
283
- 9, ["*", ['var', 'width'], ["^", 2, 4.0]]
284
- ]
285
- ]
286
- // Need to vary width based on zoom??
287
- // Or opacity??
288
- }
312
+ 'paint': this.paintStyle(options)
289
313
  };
290
314
  }
291
315
  }
292
316
 
293
317
  //==============================================================================
294
318
 
319
+ export class FeatureDashLineLayer extends FeatureLineLayer
320
+ {
321
+ constructor(id, sourceLayer)
322
+ {
323
+ super(id, sourceLayer, true);
324
+ }
325
+ }
326
+
327
+ //==============================================================================
328
+
295
329
  export class PathLineLayer extends VectorStyleLayer
296
330
  {
297
331
  constructor(id, sourceLayer, dashed=false)