Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FIX: bezier function now disabled when 6 or color inputs #8

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

FIX: bezier function now disabled when 6 or color inputs #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b4b70c4
excluding node_modules from git
Apr 17, 2020
2a2e035
fixing sourcemaps
Apr 17, 2020
db355db
new build
Apr 17, 2020
5b2d7bf
only perform bezier when number of colors is 2 to 5
Apr 17, 2020
4ba7638
using actual correct arrays for length check in bezier calc
Apr 17, 2020
191dd05
disabled bezier interpolation field when not 2-5 colors, display warn…
Apr 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
20 changes: 10 additions & 10 deletions docs/bundle.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 30 additions & 0 deletions docs/bundle.css.map
View file
Open in desktop

Large diffs are not rendered by default.

11,023 changes: 11,022 additions & 1 deletion docs/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/bundle.js.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@ import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import path from 'path';

const production = !process.env.ROLLUP_WATCH;

export default {
input: 'src/main.js',
output: {
sourcemap: true,
sourcemapPathTransform: relativePath => {
return path.relative('src', relativePath)
},
format: 'iife',
name: 'app',
file: 'docs/bundle.js'
Expand Down
15 changes: 13 additions & 2 deletions src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@
bezier?1:0
].join('|');

$: bezierDisabled = mode==='sequential' ? !(colors.length>1&&colors.length<=5) : !(colors2.length>1&&colors2.length<=5 || colors.length>1&&colors.length<=5);

const isMac = navigator.platform.toUpperCase().indexOf('MAC') > -1;

let _hash = '';
Expand Down Expand Up @@ -93,6 +95,12 @@
}
h1 {
}
.warning {
font-size: 0.8em;
color: orange;
font-weight: bold;
display: block;
}
select.custom-select {
display: inline-block;
width: auto;
Expand Down Expand Up @@ -158,7 +166,10 @@
<div class="row" style="margin-bottom: 10px">
<div class="col-md">
<Checkbox bind:value={correctLightness} label="correct lightness" />
<Checkbox bind:value={bezier} label="bezier interpolation" />
<Checkbox bind:value={bezier} label="bezier interpolation" disabled={bezierDisabled} />
{#if bezierDisabled}
<span class="warning">* Bezier interpolation requires 2-5 input colors</span>
{/if}
</div>
<div class="col-md">
<ColorBlindCheck bind:colors={steps} bind:active={simulate} />
Expand Down Expand Up @@ -195,4 +206,4 @@
<p>Created by <a href="https://vis4.net/blog">Gregor Aisch</a> for the sake of better
use of colors in maps and data visualizations. Feel free to <a href="https://github.com/gka/palettes">fork on Github</a>.</p>
</div>
</div>
</div>
5 changes: 3 additions & 2 deletions src/Checkbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<script>
export let value = false;
export let disabled = false;
export let inline = true;
export let label = '';
const id = Math.round(Math.random()*1e7).toString(36);
</script>

<div class="custom-control custom-checkbox" class:custom-control-inline={inline}>
<input bind:checked={value} type="checkbox" class="custom-control-input" id="{id}">
<input bind:checked={value} {disabled} type="checkbox" class="custom-control-input" id="{id}">
<label class="custom-control-label" for="{id}">{label}</label>
</div>
</div>
6 changes: 3 additions & 3 deletions src/PalettePreview.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
$: genColors = colors.length !== 1 ? colors : autoColors(colors[0], numColorsLeft);
$: genColors2 = colors2.length !== 1 ? colors2 : autoColors(colors2[0], numColorsRight, true);

$: stepsLeft = colors.length ? chroma.scale(bezier && colors.length>1 ? chroma.bezier(genColors) : genColors)
$: stepsLeft = colors.length ? chroma.scale(bezier && genColors.length>1 && genColors.length<=5 ? chroma.bezier(genColors) : genColors)
.correctLightness(correctLightness)
.colors(numColorsLeft) : [];

$: stepsRight = diverging && colors2.length ? chroma.scale(bezier&& colors2.length>1 ? chroma.bezier(genColors2) : genColors2)
$: stepsRight = diverging && colors2.length ? chroma.scale(bezier&& genColors2.length>1 &&genColors2.length<=5 ? chroma.bezier(genColors2) : genColors2)
.correctLightness(correctLightness)
.colors(numColorsRight) : [];

Expand Down Expand Up @@ -79,4 +79,4 @@
{#each steps as step}
<div class="step" style="background: {simulate === 'none' ? step : colorBlindSim(step, simulate)}"></div>
{/each}
</div>
</div>