Merge pull request #30 from KaiVolland/hide-rect

Some small changes

package.json

@@ -2,7 +2,8 @@
   "name": "@terrestris/legend-util",
   "version": "0.0.2",
   "description": "A set of helper classes to render legends.",
-  "main": "src/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "release": "np --no-yarn && git push git@github.com:terrestris/legend-util.git master --tags",
     "lint": "tslint --project tsconfig.json --config tslint.json && tsc --noEmit --project tsconfig.json",
@@ -28,7 +29,6 @@
   "peerDependencies": {
     "d3": "~5"
   },
-  "types": "dist/index.d.ts",
   "devDependencies": {
     "@babel/core": "7.3.4",
     "@babel/plugin-proposal-class-properties": "7.3.4",

src/LegendRenderer/LegendRenderer.ts

@@ -10,7 +10,7 @@ import {
   Style,
   Symbolizer,
   Rule
- } from 'geostyler-style';
+} from 'geostyler-style';
 
 import OlStyleParser from 'geostyler-openlayers-parser';
 
@@ -34,6 +34,7 @@ interface LegendsConfiguration {
   maxColumnHeight?: number;
   maxColumnWidth?: number;
   overflow?: 'auto' | 'group';
+  hideRect?: boolean;
 }
 
 const iconSize = [45, 30];
@@ -85,19 +86,28 @@ class LegendRenderer {
     item: LegendItemConfiguration,
     position: [number, number]
   ) {
+
+    const {
+      hideRect,
+      maxColumnHeight,
+      maxColumnWidth
+    } = this.config;
+
     if (item.rule) {
       container = container.append('g')
         .attr('class', 'legend-item')
         .attr('title', item.title);
       const img = this.getRuleIcon(item.rule);
       return img.then((uri: string) => {
-        container.append('rect')
-          .attr('x', position[0] + 1)
-          .attr('y', position[1])
-          .attr('width', iconSize[0])
-          .attr('height', iconSize[1])
-          .style('fill-opacity', 0)
-          .style('stroke', 'black');
+        if (!hideRect) {
+          container.append('rect')
+            .attr('x', position[0] + 1)
+            .attr('y', position[1])
+            .attr('width', iconSize[0])
+            .attr('height', iconSize[1])
+            .style('fill-opacity', 0)
+            .style('stroke', 'black');
+        }
         container.append('image')
           .attr('x', position[0] + 1)
           .attr('y', position[1])
@@ -109,9 +119,9 @@ class LegendRenderer {
           .attr('x', position[0] + iconSize[0] + 5)
           .attr('y', position[1] + 20);
         position[1] += iconSize[1] + 5;
-        if (this.config.maxColumnHeight && position[1] + iconSize[1] + 5 >= this.config.maxColumnHeight) {
+        if (maxColumnHeight && position[1] + iconSize[1] + 5 >= maxColumnHeight) {
           position[1] = 5;
-          position[0] += this.config.maxColumnWidth;
+          position[0] += maxColumnWidth;
         }
       });
     }
@@ -235,8 +245,9 @@ class LegendRenderer {
     if (config.title) {
       container.append('text')
         .text(config.title)
+        .attr('class', 'legend-title')
         .attr('text-anchor', 'start')
-        .attr('dy', position[1] + 10)
+        .attr('dy', '1em')
         .attr('dx', position[0]);
       position[1] += 20;
     }

src/index.ts

@@ -0,0 +1 @@
+export * from './LegendRenderer/LegendRenderer';