From 0a0e4890ca15a3ef6f2ae5c692ff09b3de4c50ca Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Wed, 27 Feb 2019 11:28:24 -0500 Subject: [PATCH] Nicer favorite preset icon rendering in the top bar --- modules/ui/modes.js | 1 + modules/ui/preset_icon.js | 21 +++++++++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/modules/ui/modes.js b/modules/ui/modes.js index 92151dc77..bb8f71f5e 100644 --- a/modules/ui/modes.js +++ b/modules/ui/modes.js @@ -165,6 +165,7 @@ export function uiModes(context) { .call(uiPresetIcon() .geometry(d.geometry) .preset(d.preset) + .sizeClass('small') ) } else { d3_select(this) diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js index daaa2110b..14c2723ca 100644 --- a/modules/ui/preset_icon.js +++ b/modules/ui/preset_icon.js @@ -4,7 +4,11 @@ import { svgIcon, svgTagClasses } from '../svg'; import { utilFunctor } from '../util'; export function uiPresetIcon() { - var preset, geometry; + var preset, geometry, sizeClass = 'medium'; + + function isSmall() { + return sizeClass === 'small'; + } function presetIcon(selection) { @@ -39,7 +43,8 @@ export function uiPresetIcon() { } function renderSquareFill(fillEnter) { - var w = 60, h = 60, l = 40, c1 = (w-l)/2, c2 = c1 + l; + var d = isSmall() ? 40 : 60; + var w = d, h = d, l = d*2/3, c1 = (w-l)/2, c2 = c1 + l; fillEnter = fillEnter .append('svg') .attr('class', 'preset-icon-fill preset-icon-fill-area') @@ -59,8 +64,9 @@ export function uiPresetIcon() { } function renderLine(lineEnter) { + var d = isSmall() ? 40 : 60; // draw the line parametrically - var w = 60, h = 60, y = 43, l = 36, r = 2.5; + var w = d, h = d, y = Math.round(d*0.72), l = Math.round(d*0.6), r = 2.5; var x1 = (w - l)/2, x2 = x1 + l; lineEnter = lineEnter @@ -166,7 +172,7 @@ export function uiPresetIcon() { var areaFrame = container.selectAll('.preset-icon-frame') - .data((geom === 'area') ? [0] : []); + .data((geom === 'area' && !isSmall()) ? [0] : []); areaFrame.exit() .remove(); @@ -214,5 +220,12 @@ export function uiPresetIcon() { return presetIcon; }; + + presetIcon.sizeClass = function(val) { + if (!arguments.length) return sizeClass; + sizeClass = val; + return presetIcon; + }; + return presetIcon; }