Skip to content

Updates - Gradient color picker #103

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

Open
StickmanRed wants to merge 3 commits into
base: development
Choose a base branch
from
Open

Updates - Gradient color picker #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d92d21
Fix color input bugs
StickmanRed Dec 28, 2025
f88a6dc
CSS changes, pop-up bugfixes
StickmanRed Jan 30, 2026
fe4ac10
Add back gradient cursor
StickmanRed Jan 30, 2026
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
6 changes: 6 additions & 0 deletions engine/src/tools/Cursor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,12 @@ Wick.Tools.Cursor = class extends Wick.Tool {
_getCursor() {
if (!this.hitResult.item) {
return this.CURSOR_DEFAULT;
} else if (
(this.hitResult.item.data.parentItem
&& this.hitResult.item.data.parentItem.data.handleType === 'gradient-stop')
|| this.hitResult.item.data.handleType === 'gradient-point'
) {
return this.CURSOR_GRAD;
} else if (this.hitResult.item.data.isSelectionBoxGUI) {
// Don't show any custom cursor if the mouse is over the border, the border does nothing
if (this.hitResult.item.name === 'border') {
Expand Down
56 changes: 29 additions & 27 deletions src/Editor/Util/ColorPicker/ColorPicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,29 +87,8 @@ export default function ColorPicker (props) {
setLastObjects(props.selectedObjects);

// Close pop-up if selection changed
if (open) toggle();
}

let color = props.color ? props.color : new window.Wick.Color("#FFFFFF")
let colorCSS = color;
let colorCSSOpaque = color;
if (color instanceof window.paper.Color) {
if (color.gradient) {
const sortedControlStops = color.gradient.stops.toSorted((objectA, objectB) => objectA.offset - objectB.offset);

colorCSS = 'linear-gradient(to right';
colorCSSOpaque = 'linear-gradient(to right';
sortedControlStops.forEach(paperControlStop => {
colorCSS += `, ${paperControlStop.color.toCSS()} ${paperControlStop.offset * 100}%`;
let { red, green, blue } = paperControlStop.color;
colorCSSOpaque += `, rgb(${red*256},${green*256},${blue*256}) ${paperControlStop.offset * 100}%`;
});
colorCSS += ')';
colorCSSOpaque += ')';
}
else {
colorCSS = color.toCSS();
}
if (open)
toggle();
}
let itemID = props.id;
let popoverID = itemID+'-popover';
Expand All @@ -119,6 +98,7 @@ export default function ColorPicker (props) {
setTimeout(selectPopover, 200);
}
if (!e || !data || !open) {
// Either `toggle()` was used, or no mouse-down data was needed
setOpen(!open);
return;
}
Expand All @@ -127,17 +107,37 @@ export default function ColorPicker (props) {
// Don't close if clicked on selected objects
let clickedCanvas = (e.touches ? e.target : data.downTarget) === props.targetCanvas;
let selectionUnchanged = arraysEqual(props.selectedObjects, lastObjects);
if (!data.clickedPopover && !(clickedCanvas && selectionUnchanged)) {
setOpen(false)
}
if (!data.clickedPopover && !(clickedCanvas && selectionUnchanged))
setOpen(false);
}

function selectPopover () {
let ele = document.getElementById(popoverID);
if (ele) {
if (ele)
ele.focus();
}

let color = props.color ? props.color : new window.Wick.Color("#FFFFFF")
let colorCSS = color;
let colorCSSOpaque = color;
if (color instanceof window.paper.Color) {
if (color.gradient) {
colorCSS = colorCSSOpaque = 'linear-gradient(to right';

const sortedControlStops = color.gradient.stops.toSorted((objectA, objectB) => objectA.offset - objectB.offset);
sortedControlStops.forEach(paperControlStop => {
colorCSS += `, ${paperControlStop.color.toCSS()} ${paperControlStop.offset * 100}%`;
let { red, green, blue } = paperControlStop.color;
colorCSSOpaque += `, rgb(${red*256},${green*256},${blue*256}) ${paperControlStop.offset * 100}%`;
});
colorCSS += ')';
colorCSSOpaque += ')';
}
else
colorCSS = color.toCSS();
}
// Bring desynced color state up, so if the solid-gradient state updates, the pop-up position updates
const [desyncedColor, setDesyncedColor] = useState(color);

return (
<button
Expand Down Expand Up @@ -171,6 +171,8 @@ export default function ColorPicker (props) {
enableGradient={props.enableGradient}

color={color}
desyncedColor={desyncedColor}
onDesyncedChange={setDesyncedColor}
onChangeComplete={props.onChangeComplete}
onChangeIntermediate={props.onChangeIntermediate}

Expand Down
14 changes: 9 additions & 5 deletions src/Editor/Util/ColorPicker/ColorPickerComponents/WickGradient.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,12 @@ class WickGradient extends Component {
}
renderGradientInfo () {
// Normalize the gradient endpoints to the selection bounds
let originX = (this.origin.x - this.props.bounds.left) / this.props.bounds.width;
let originY = (this.origin.y - this.props.bounds.top) / this.props.bounds.height;
let destinationX = (this.destination.x - this.props.bounds.left) / this.props.bounds.width;
let destinationY = (this.destination.y - this.props.bounds.top) / this.props.bounds.height;
let originX = (this.origin.x - this.props.bounds.left) / this.props.bounds.width,
originY = (this.origin.y - this.props.bounds.top) / this.props.bounds.height,
destinationX = (this.destination.x - this.props.bounds.left) / this.props.bounds.width,
destinationY = (this.destination.y - this.props.bounds.top) / this.props.bounds.height;
let selectedStop = this.controlStops[this.props.selectedControlStopIndex],
offset = selectedStop ? selectedStop.offset : 0;
return (
<div className="wick-color-picker-gradient-fields">
<div className="wick-color-picker-gradient-fields-row">
Expand Down Expand Up @@ -145,7 +147,9 @@ class WickGradient extends Component {
<ColorPickerInput className="wick-color-picker-gradient-field wick-color-picker-field-stop-offset"
labelBefore="Offset"
type="numeric"
value={this.controlStops[this.props.selectedControlStopIndex].offset}
value={offset}
min={0}
max={1}
onChange={offset => {
this.offsetSelectedStop(offset);
this.onChangeComplete();
Expand Down
1 change: 1 addition & 0 deletions src/Editor/Util/ColorPicker/ColorPickerComponents/_colorpickercomponents.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ $color-picker-pointer-radius: 8px;
font-weight: bold;
display: flex;
align-items: center;
margin-bottom: 0;
}
.wick-color-picker-fields .wick-color-picker-input-label {
flex-direction: column;
Expand Down
3 changes: 3 additions & 0 deletions src/Editor/Util/ColorPicker/ColorPickerComponents/_wickgradient.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,7 @@
gap: 7px;
margin: 0;
}
}
.wick-color-picker-gradient-fields-row > * {
flex: 1;
}
39 changes: 17 additions & 22 deletions src/Editor/Util/ColorPicker/WickColorPicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,24 @@ import ActionButton from 'Editor/Util/ActionButton/ActionButton';
import './_wickcolorpicker.scss';
import WickGradient from 'Editor/Util/ColorPicker/ColorPickerComponents/WickGradient';
import WickSpectrum from 'Editor/Util/ColorPicker/ColorPickerComponents/WickSpectrum';
import tinycolor from 'tinycolor2';

class WickGradientColorPicker extends Component {
constructor (props) {
super(props);

this.state = {
colorOnDrag: null,
outOfSyncColor: this.props.color
colorOnDrag: null
};
this.editLastColors = false;
// Used to preserve color when switching solid/gradient
this.lastReceivedColor = null;
this.outOfSync = false;
}
componentWillUnmount () {
this.outOfSync = false;
this.props.onDesyncedChange(this.props.color);
}

onChangeIntermediate = (color) => {
this.props.onChangeIntermediate && this.props.onChangeIntermediate(color);
this.setState({ colorOnDrag: color });
Expand Down Expand Up @@ -60,7 +63,7 @@ class WickGradientColorPicker extends Component {
switchSolid = (color) => {
// Exit if color isn't a gradient
if (!color.stops) return;
this.setState({ outOfSyncColor: color.stops[0].color });
this.props.onDesyncedChange(color.stops[0].color);
this.outOfSync = true;
}
switchGradient = (color) => {
Expand All @@ -69,30 +72,22 @@ class WickGradientColorPicker extends Component {
if (this.props.color.stops || (this.props.color.gradient && this.props.color.gradient.stops)) {
// If props.color is already a gradient, use that color
this.outOfSync = false;
this.setState({ outOfSyncColor: this.props.color });
this.props.onDesyncedChange(this.props.color);
return;
}
// Figma's default behavior
let colorObject = tinycolor(color);
let firstStop = colorObject.toRgbString();
let secondStop = colorObject.toHsv();
secondStop.v = (secondStop.v < 50) ? (secondStop.v + 40) : (secondStop.v - 40);
secondStop = tinycolor(secondStop).toRgbString();

let x = 0, topY = 0, bottomY = 500;
if (this.props.selectedObjectsBounds) {
x = this.props.selectedObjectsBounds.x;
x = this.props.selectedObjectsBounds.centerX;
topY = this.props.selectedObjectsBounds.top;
bottomY = this.props.selectedObjectsBounds.bottom;
}

this.setState({
outOfSyncColor: {
origin: {x, y: topY},
destination: {x, y: bottomY},
stops: [{color: firstStop, offset: 0}, {color: secondStop, offset: 1}],
radial: false
}
this.props.onDesyncedChange({
origin: {x, y: topY},
destination: {x, y: bottomY},
stops: [{color, offset: 0}, {color, offset: 1}],
radial: false
});
this.outOfSync = true;
}
Expand Down Expand Up @@ -126,15 +121,15 @@ class WickGradientColorPicker extends Component {
renderGradientHeader (color) {
return (
<>
<div>{/* className="wick-color-picker-action-button">*/}
<div>
<ActionButton
color="tool"
id="color-picker-solid-button"
action={() => this.switchSolid(color)}
isActive={ () => !color.stops }
text="Solid" />
</div>
<div>{/* className="wick-color-picker-action-button spacer">*/}
<div>
<ActionButton
color="tool"
id="color-picker-gradient-button"
Expand Down Expand Up @@ -187,7 +182,7 @@ class WickGradientColorPicker extends Component {
this.lastReceivedColor = this.props.color;
this.outOfSync = false;
}
let color = this.outOfSync ? this.state.outOfSyncColor : this.props.color;
let color = this.outOfSync ? this.props.desyncedColor : this.props.color;
let index = 0;
if (this.state.colorOnDrag !== null) {
color = this.state.colorOnDrag;
Expand Down
15 changes: 5 additions & 10 deletions src/Editor/Util/ColorPicker/_wickcolorpicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,13 @@ $color-picker-block-margin: 5px;
margin-left: auto;
}

// Style color picker inputs like the inspector.
.wick-color-picker input {
font-size: 1rem;
}

.wick-color-picker span {
padding-bottom: 0px !important;
color: $editor-primary-property-text !important;
}

.wick-color-picker-header {
height: $color-picker-bar-height;
display: flex;
align-items: stretch;
}

// Style color picker inputs like the inspector.
.wick-color-picker span {
color: $editor-primary-property-text;
}
4 changes: 2 additions & 2 deletions src/Editor/Util/WickInput/WickInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,11 +138,11 @@ class WickInput extends Component {

val = parseFloat(val);
// Constrain between min and max
if (min) {
if (typeof min === 'number') {
val = Math.max(val, min);
}

if (max) {
if (typeof max === 'number') {
val = Math.min(val, max);
}

Expand Down