artf / grapick Goto Github PK

The getColorValue method currently returns a string. That's great for CSS, but I'm using Grapick to create gradients for a canvas: gradient.addColorStop(color, pos), where pos is a float between 0 and 1 (opposed to an integer between 0 and 100).
Can you add a method that allows for retrieving colorstops as an array of objects?
A function that returns something like this?

[{color:'rgba(0,0,0,1)',pos:0}, {color:'rgba(0,255,0,1)',pos:50}, {color:'rgba(255,0,0,1),pos:100}

Thanks for considering!

I'd like to be able to set the initial value as the css string, rather than having to add handles via handler.setColor

instance.setColorValue('repeating-linear-gradient(to bottom, #085078 0%, #85D8CE 50%, $ffcc33 60%)')

and this would set the initial select box values and create handles at each of the stops.

it would be good to be able to interpret a standard colour value as a default linear gradient

instance.setColorValue('rgb(8, 80, 120)')

would be interpreted as a gradient with identical stops, such as

linear-gradient(to right, rgb(8, 80, 120) 0%, rgb(8, 80, 120) 100%)

Nice work, can we limit the number of handlers?

Have you tested this on touch devices? On an iPad, it doesn't really work. You can't move the color stops. I see touch events being used in the source code, but they don't seem to work.
Can you please take a look? Grapick is awesome!

If you only click, not drag, a slider handle, the drag events on that handle are not properly removed.
The slider remains "sticky" to the mouse when you click it (mouseDown), until you click it again (mouseUp). Here's the fix:

File src/Handler.js, line 186:

const stopDrag = e => {
        // Always remove eventMove and eventUp events, even if not dragged.
        off(document, eventMove, drag); 
        off(document, eventUp, stopDrag); 
        if (!dragged) {
          return;
        }
        dragged = 0;
        this.setPosition(pos);
        this.emit('handler:drag:end', this, pos);
};

Great tool. Is it possible to have multiple pickers on the same page?

Reproducible in the demo at https://artf.github.io/grapick/ as well, at least for latest Chrome Version 99.0.4844.74 (Official Build) (arm64) gives warning:

The specified value "rgba(45, 120, 145, 255)" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

When one adds new stop and clicks its color, grapick doesn't pass color values to the native input:

Able to replicate in Chrome and Firefox, while on Edge I'm not able to select the lowset pixel, as if Chrome or Firefox has extra 1 pixel at the bottom

How to set the values for colorEl, min,max,direction from the div element?
For example,

<div id="somegradient" style="background: -webkit-linear-gradient(90deg, rgb(254, 255, 0) 3.1348%, rgb(173, 255, 187) 49.5298%, rgb(251, 163, 150) 97.4922%)">
</div>

<script>
var gradient = $("#somegradient").css('background');
//now how to set this value into the grapick? 
</script>

Should I use regex to break down the
-webkit-linear-gradient(90deg, rgb(254, 255, 0) 3.1348%, rgb(173, 255, 187) 49.5298%, rgb(251, 163, 150) 97.4922%)
and then set them with:
gp.addHandler(0, 'red');

is there direct way of doing this as:

<script>
var gradient = $("#somegradient").css('background');
gp.setValue(gradient);
</script>

Is it possible to catch exception during incorrect gp value?

let value = ' linear-gradient(to right, #085078 1%, rgba(37, 111, 139, 255) 22%, rgba(42, 117, 143, 255) 26%, rgba(67, 144, 160, 255) 46%, rgba(61, 165, 114, ';
try {
    gp.setValue(value);
} catch (ex) {
    console.error('error');
}

Suggestion

When a handler is added or moved, it would be more convenient to have its matching DOM element in the correct order.

Why ?

It's more convenient to apply styles or js code to specific handlers using selector, (for example: grp-handler:first-child or grp-handler:last-child).

Example

Starting with two handlers (extreme left and right)

<div class="grp-preview">
  <div class="grp-handler" style="position: absolute; top: 0px; left: 0%;">
      ....
    </div>
   <div class="grp-handler" style="position: absolute; top: 0px; left: 100%;">
      ...
   </div>
</div>

If we add another handler, it will become :

<div class="grp-preview">
  <div class="grp-handler" style="position: absolute; top: 0px; left: 0%;">
      ....
    </div>
   <div class="grp-handler" style="position: absolute; top: 0px; left: 100%;">
      ...
   </div>
   <div class="grp-handler" style="position: absolute; top: 0px; left: 28%;">
      ...
   </div>
</div>

If I want to apply a style to the extremes handlers, I can't use styles :

.grp-handler:first-child, .grp-handler:last-child {
   width: 10px;
   background-color: red;
}

Proposal

In Handler class, modify setPosition to replace in the dom (using this.gp.handlers information)

Contribution

If the feature request is accepted, I could make a pull request as a contribution

Thanks for this great library. Is there a way to set handles? Currently I am getting all the handles and looping through each one and calling the remove function then re adding handles again. However, I do not want to call the add and remove event listeners during the redraw and It just feels dirty.

Good to be able to serve this via cdn

First of all, well done for this great script!

I made three changes:

• There is an alert in the console with Chrome when the color is assigned to the native colorpicker (the color is not selected in the colorpicker):

The specified value "rgba(255, 0, 0, 255)" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

To correct this problem I added this:

if (/^rgb/.test(color)) {
  var toHex = function (color) {
    var rgb = (color.r << 16) | (color.g << 8) | (color.b << 0);
    return '#' + (0x1000000 + rgb).toString(16).slice(1);
  }
  var c = color.match(/\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})/);
  color = toHex({r: c[1], g: c[2], b: c[3]});
}

<input type="color" data-toggle="handler-color" value="' + color + '">

• Then, it is sometimes difficult to see the controls above the gradient to move the position of the color. You can use this css property:

.grp-handler-drag {
background-color: rgba (255, 255, 255, .5);
mix-blend-mode: exclusion; // <---- this property
cursor: col-resize;
width: 100%;
height: 100%
}

.grp-handler-selected .grp-handler-drag {
background-color: rgba (255, 255, 255, 1);
}

This ensures that the control must always be visible, whatever the color.

• Sometimes, when we want to move the position of a color, we make an accidental click that adds a new color on the gradient. To avoid that I added:

 var lastOffset;
pEl && (0, _utils.on)(pEl, 'mousedown', function (e) {
     lastOffset = {x: e.offsetX, y: e.offsetY};										 
});
pEl && (0, _utils.on)(pEl, 'click', function (e) {
  if (lastOffset && Math.abs(lastOffset.x-e.offsetX) > 2) return;
  // etc...
});

Suggestion

I suggest an optimization: Of course, in use, we try to move (drag) the position of the selected color also with the color picker. We should be able to move them as with position control.

What do you think?

Grapick uses the HTML entity ⨯ as the icon for removing a stop. This entity maps to U+2A2F which was introduced somewhat later to Unicode in v3.2.0 and therefore has lower inclusion among fonts than those which have been present from early on. For example, this is the supported font list from fileformat.info for U+2A2F, which is an incomplete list but provides a point of comparison (see below).

A specific example of the issue is that Firefox and Chrome installed on some Linux versions use the FreeSerif font by default which does not include U+2A2F.

Therefore, in order to use Grapick in a compliant manner requires either using custom code to replace that HTML entity with a more supported one, or adding a webfont to the site which supports the entity, neither of which is a very ideal scenario.

I'd like to suggest a couple options to help this issue:

The first and simplest is simply switching to a similar HTML entity with broader support. A likely candidate is ×, which for comparison was introduced in Unicode 1.1.0 and has broad font support. The number of supported fonts given by fileformat.info is about 10 times larger.

Another option would be to provide an initialization option for Grapick to override the symbol used, something like

new Grapick({el: '#gp', removeStopSymbol: '×'})

However, this option may be somewhat cumbersome even though it's more adaptive, since it's likely that any such override would also necessitate overriding some Grapick CSS to accommodate inevitable slight size differences in whatever symbol is used. So, the first option may be better, but either would be a sufficient resolution. I can provide a PR if you'd prefer, if either option is agreeable.

Thanks for providing Grapick as an open source project!