Skip to content

Commit

Permalink
deploy: 1c03b5c
Browse files Browse the repository at this point in the history
  • Loading branch information
@coloshword
coloshword committed Sep 6, 2024
1 parent db75ac8 commit bf23cbd
Show file tree
Hide file tree
Showing 6 changed files with 17 additions and 15 deletions.
3 changes: 3 additions & 0 deletions ColorPicker.bundle.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ styleInject(css_248z);

type ColorPickerState = {
currentColor: number[];
colorType: string;
currentMode: string;
changeModelColor: boolean;
increment: number;
Expand All @@ -22,6 +23,7 @@ interface ColorPickerConfig {
interface SelectedColor {
netlogo: number;
rgba: number[];
colorType: string;
}
declare class ColorPicker {
state: ColorPickerState;
Expand All @@ -36,6 +38,7 @@ declare class ColorPicker {
constructor(config: {
parent: HTMLElement;
initColor: number[];
initColorType: string;
onColorSelect: (colorData: [SelectedColor, number[][]]) => void;
savedColors?: number[][];
}, openTo?: string);
Expand Down
14 changes: 7 additions & 7 deletions ColorPicker.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,7 @@ class GridMode extends ColorMode {
// netlogoColor defaults to 255 for the alpha value
newColor[3] = this.state.currentColor[3];
// Use setState to update the currentColor in the component's state
this.setState({ currentColor: newColor });
this.setState({ currentColor: newColor, colorType: "netlogo" });
}
}
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
Expand Down Expand Up @@ -728,7 +728,7 @@ class WheelMode extends ColorMode {
// set the color to the current color
const colorAsRGB = hexToRgb(color);
const colorAsRGBA = [colorAsRGB[0], colorAsRGB[1], colorAsRGB[2], this.state.currentColor[3]];
this.setState({ currentColor: colorAsRGBA });
this.setState({ currentColor: colorAsRGBA, colorType: "netlogo" });
}
}
/** outerWheelSetup(): sets up the color of the outer wheel */
Expand Down Expand Up @@ -1201,7 +1201,7 @@ class SliderMode extends ColorMode {
const updateRGBColor = (colorIndex, sliderValue) => {
const newColor = [...this.state.currentColor];
newColor[colorIndex] = sliderValue;
this.setState({ currentColor: newColor });
this.setState({ currentColor: newColor, colorType: "rgb" });
this.updateColorDisplay();
};
const parent = document.querySelector('.cp-sliders');
Expand Down Expand Up @@ -1236,7 +1236,7 @@ class SliderMode extends ColorMode {
const updateHSBColor = (hsbIndex, sliderValue) => {
this.HSBA[hsbIndex] = sliderValue;
const newRGB = HSBAToRGBA(this.HSBA[0], this.HSBA[1], this.HSBA[2], this.HSBA[3]);
this.setState({ currentColor: newRGB });
this.setState({ currentColor: newRGB, colorType: "hsb" });
this.updateColorDisplay();
this.updateSlideGradients(this.HSBA[0], this.HSBA[1], this.HSBA[2]);
};
Expand Down Expand Up @@ -1266,15 +1266,14 @@ class ColorPicker {
this.copyMessageTimeout = null; //Keeps track of "Copied" message timeouts, so they don't stack and are cancelled if we switch colors
this.state = {
currentColor: config.initColor,
colorType: config.initColorType, //tracks the color type, being one of: "netlogo", "rgb", or "hsb"
currentMode: 'grid',
changeModelColor: true,
increment: 1,
showNumbers: false,
savedColors: config.savedColors || [], // Use an empty array as default if savedColors is not provided
};
this.parent = config.parent;
// we should resize hide if the size of the parent container is smaller than the full size of the color picker 37.5rem or 600px
if (this.parent.offsetWidth < 600) ;
this.onColorSelect = config.onColorSelect;
if (this.parent.offsetWidth < 600) {
this.isMinimized = true;
Expand Down Expand Up @@ -1430,10 +1429,11 @@ class ColorPicker {
//attach event listener to close button
const closeButton = this.parent.querySelector('.cp-close');
closeButton === null || closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {
// return the selected color, as well as the saved colors for "memory"
// return the selected color, as well as the saved colors for "memory", as well as the color type
const selectedColorObj = {
netlogo: rgbToNetlogo(this.state.currentColor),
rgba: this.state.currentColor,
colorType: this.state.colorType
};
// the first element will be the different representations of selected color as an Object
this.onColorSelect([selectedColorObj, this.state.savedColors]);
Expand Down
7 changes: 3 additions & 4 deletions color-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,14 @@ export default class ColorPicker {
this.copyMessageTimeout = null; //Keeps track of "Copied" message timeouts, so they don't stack and are cancelled if we switch colors
this.state = {
currentColor: config.initColor,
colorType: config.initColorType, //tracks the color type, being one of: "netlogo", "rgb", or "hsb"
currentMode: 'grid',
changeModelColor: true,
increment: 1,
showNumbers: false,
savedColors: config.savedColors || [], // Use an empty array as default if savedColors is not provided
};
this.parent = config.parent;
// we should resize hide if the size of the parent container is smaller than the full size of the color picker 37.5rem or 600px
if (this.parent.offsetWidth < 600) {
}
this.onColorSelect = config.onColorSelect;
if (this.parent.offsetWidth < 600) {
this.isMinimized = true;
Expand Down Expand Up @@ -185,10 +183,11 @@ export default class ColorPicker {
//attach event listener to close button
const closeButton = this.parent.querySelector('.cp-close');
closeButton === null || closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {
// return the selected color, as well as the saved colors for "memory"
// return the selected color, as well as the saved colors for "memory", as well as the color type
const selectedColorObj = {
netlogo: colors.rgbToNetlogo(this.state.currentColor),
rgba: this.state.currentColor,
colorType: this.state.colorType
};
// the first element will be the different representations of selected color as an Object
this.onColorSelect([selectedColorObj, this.state.savedColors]);
Expand Down
2 changes: 1 addition & 1 deletion modes/grid-mode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class GridMode extends ColorMode {
// netlogoColor defaults to 255 for the alpha value
newColor[3] = this.state.currentColor[3];
// Use setState to update the currentColor in the component's state
this.setState({ currentColor: newColor });
this.setState({ currentColor: newColor, colorType: "netlogo" });
}
}
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
Expand Down
4 changes: 2 additions & 2 deletions modes/slider-mode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export class SliderMode extends ColorMode {
const updateRGBColor = (colorIndex, sliderValue) => {
const newColor = [...this.state.currentColor];
newColor[colorIndex] = sliderValue;
this.setState({ currentColor: newColor });
this.setState({ currentColor: newColor, colorType: "rgb" });
this.updateColorDisplay();
};
const parent = document.querySelector('.cp-sliders');
Expand Down Expand Up @@ -166,7 +166,7 @@ export class SliderMode extends ColorMode {
const updateHSBColor = (hsbIndex, sliderValue) => {
this.HSBA[hsbIndex] = sliderValue;
const newRGB = colors.HSBAToRGBA(this.HSBA[0], this.HSBA[1], this.HSBA[2], this.HSBA[3]);
this.setState({ currentColor: newRGB });
this.setState({ currentColor: newRGB, colorType: "hsb" });
this.updateColorDisplay();
this.updateSlideGradients(this.HSBA[0], this.HSBA[1], this.HSBA[2]);
};
Expand Down
2 changes: 1 addition & 1 deletion modes/wheel-mode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ export class WheelMode extends ColorMode {
// set the color to the current color
const colorAsRGB = colors.hexToRgb(color);
const colorAsRGBA = [colorAsRGB[0], colorAsRGB[1], colorAsRGB[2], this.state.currentColor[3]];
this.setState({ currentColor: colorAsRGBA });
this.setState({ currentColor: colorAsRGBA, colorType: "netlogo" });
}
}
/** outerWheelSetup(): sets up the color of the outer wheel */
Expand Down

0 comments on commit bf23cbd

Please sign in to comment.