create ColorSystem class and colors.json file (#1190)

update DataLoader to load color info from colors.json and update core/index.js to include references to ColorSystem

add ColorSystem initAsync to Context.js, create getColorScheme method on ColorSystem class, import getColorScheme in styles.js

start color refactor in styles.js

bind getColorScheme method to 'this' and update constructor

refactor styles.js into STYLES class and update import statements to reflect changes

remove initAsync() call in Context.js file

change class name to 'Styles', update imports, change DEFAULT to 'default'

update styleMatch method, change all vars to static vars, fix formatting

add script to build_data.js to minify colors.json

remove static colors.json import, refactor getColorScheme method

start Styles refactor to StyleSystem, move file to /modules/core, update import statements

add StyleSystem reference to available systems set

add styles system dependency to MapSystem

remove StyleSystem import, update style vars to use context.systems

refactor StyleSystem

initialize colorData as class var, move getDataAsync function to startAsync

remove StyleSystem import, set style var with context

delete styles.js

update MapSystem.Test to include colors and styles

data/colors.json

@@ -0,0 +1,38 @@
+{
+    "red": {
+      "fill": { "color": "0xe06e5f", "alpha": 0.3 }  
+    },
+    "green": {
+      "fill": { "color": "0x8cd05f", "alpha": 0.3 }  
+    },
+    "blue": {
+      "fill": { "color": "0x77d4de", "alpha": 0.3 }   
+    },
+    "yellow": {
+      "fill": { "color": "0xffff94", "alpha": 0.25 }  
+    },
+    "gold": {
+      "fill": { "color": "0xc4be19", "alpha": 0.3 }  
+    },
+    "orange": {
+      "fill": { "color": "0xd6881a", "alpha": 0.3 }  
+    },
+    "pink": {
+      "fill": { "color": "0xe3a4f5", "alpha": 0.3 }   
+    },
+    "teal": {
+      "fill": { "color": "0x99e1aa", "alpha": 0.3 }   
+    },
+    "lightgreen": {
+      "fill": { "color": "0xbee83f", "alpha": 0.3 }  
+    },
+    "tan": {
+      "fill": { "color": "0xf5dcba", "alpha": 0.3 }   
+    },
+    "darkgray": {
+      "fill": { "color": "0x8c8c8c", "alpha": 0.5 }   
+    },
+    "lightgray": {
+      "fill": { "color": "0xaaaaaa", "alpha": 0.3 }   
+    }
+ }

modules/core/ColorSystem.js

@@ -0,0 +1,43 @@
+import { AbstractSystem } from './AbstractSystem';
+
+export class ColorSystem extends AbstractSystem {
+    constructor(context) {
+        super(context);
+        this.id = 'colors';
+        this.context = context;
+        this.dependencies = new Set(['dataloader']);
+        this.autoStart = true;
+        this._started = false;
+        this.colorData = null;
+
+        this.getColorScheme = this.getColorScheme.bind(this);
+    }
+
+    initAsync(){
+        for (const id of this.dependencies) {
+            if (!this.context.systems[id]) {
+                return Promise.reject(`Cannot init: ${this.id} requires ${id}`);
+            }
+        }
+        return Promise.resolve();
+    }
+
+    startAsync() {
+        this._started = true;
+        const context = this.context;
+        const dataloader = context.systems.dataloader;
+
+        dataloader.getDataAsync('colors')
+            .then((data) => { this.colorData = data; } );
+
+        return Promise.resolve();
+    }
+
+    resetAsync() {
+        return Promise.resolve();
+    }
+
+    getColorScheme() {
+        return this.colorData;
+    }
+}

modules/core/DataLoaderSystem.js

@@ -44,6 +44,7 @@ export class DataLoaderSystem extends AbstractSystem {
     fileMap.set('shortcuts', 'data/shortcuts.min.json');
     fileMap.set('territory_languages', 'data/territory_languages.min.json');
     fileMap.set('wmf_sitematrix', 'https://cdn.jsdelivr.net/npm/[email protected]/wikipedia.min.json');
+    fileMap.set('colors', 'data/colors.min.json');
 
     this.fileMap = fileMap;
     this._cachedData = {};
@@ -74,6 +75,7 @@ export class DataLoaderSystem extends AbstractSystem {
       c.shortcuts = [];
       c.territory_languages = {};
       c.wmf_sitematrix = [ ['English','English','en'], ['German', 'Deutsch', 'de'] ];
+      c.colors = {};
     }
   }
 

modules/core/MapSystem.js

@@ -48,7 +48,7 @@ export class MapSystem extends AbstractSystem {
   constructor(context) {
     super(context);
     this.id = 'map';
-    this.dependencies = new Set(['editor', 'filters', 'imagery', 'photos', 'storage', 'l10n', 'urlhash']);
+    this.dependencies = new Set(['editor', 'filters', 'imagery', 'photos', 'storage', 'l10n', 'urlhash', 'colors', 'styles']);
 
     this.supersurface = d3_select(null);  // parent `div` temporary zoom/pan transform
     this.surface = d3_select(null);       // sibling `canvas`
@@ -242,6 +242,7 @@ export class MapSystem extends AbstractSystem {
     const filters = context.systems.filters;
     const imagery = context.systems.imagery;
     const photos = context.systems.photos;
+    const colors = context.systems.colors;
     const scene = this._renderer.scene;
 
     editor
@@ -302,6 +303,7 @@ export class MapSystem extends AbstractSystem {
     imagery.on('imagerychange', this.immediateRedraw);
     photos.on('photochange', this.immediateRedraw);
     scene.on('layerchange', this.immediateRedraw);
+    colors.on('colorchange', this.immediateRedraw);
 
     const osm = context.services.osm;
     if (osm) {