Fabric.js: Ability to customize controls [$150]

[dandersson01]

Would love to be able to add, remove and modify the controls in an easy way.

For the current project I need to add "delete", "move down", "move up" (layer-wise) and "rotate by degrees" to the controls.

There is a $150 open bounty on this issue. Add to the bounty at Bountysource.

[lukejagodzinski]

Yes, it would be nice to give possibility to hook into process of rendering controls as well as manipulating controls. For example, right now controls are rendered with the solid color but I would like to apply some filter like in Photoshop, where border on black background is white and on the white background border is black (difference filter). Thanks to that, borders are always visible, no matter on what background it's displayed.

[asturur]

Would be a generic control with

-position on the object ( corner, or position on side )
-icon/drawing method
-custom function on click
-custom function on moving

would be ok for @kangax and the backer?

[dandersson01]

Sounds good!

Would be nice to be able to position the generic control relative to top-right, for example (or is that what "position on side" meant?)

[kangax]

Removing controls is already possible. Adding new ones with custom icons/position — that would definitely be a new feature. I'm sort of open to it, but maybe later. We already have lots of features and I'm trying to avoid bloating library too much.

[asturur]

So i would ask the backer what are the minimum requirement for him, what satisfy his request and if a pull in the official library is a requirement. That doesn't mean i will necessary do that, but because i'm interested ( even if i have no time now ) both in the result and the money, i'm investigating for now.

[dandersson01]

A pull to the official library is a requirement.

For the current project I need to add at least 4 buttons. I'd like to be able to position these relative to a corner (top right, for example). I should be able to define how these are drawn and action upon click. (action upon moving isn't required, but would be nice)

[Godweed]

I found this solution in fabric google group could it be possible to merge this solution to pull official distro, it would be nice to have this kind of feature build in
https://groups.google.com/forum/#!topic/fabricjs/7bzRM3RDa1I

[asturur]

We have to found a solution that works in any case, that does not pollute the code, and that we have the chance to support with future changes.
That may be a part of.

For example, if it will ever be, this customization has to work per object, with functions toObject and restoreFromObject to work as well.

Imagine a text class where you want the corner to resize the dimension and not the scale (like text box ) and for a normal object you want to keep the scale behahvior.

User has to have the chance to define is own function for that control.

[Godweed]

Hi @asturur
Do you had a chance to take a look about the issue, ability to customising will bring a lot of cons when developing ui

[asturur]

unfortunately lately i'm very busy with life changes and i did not develop too much in my free time.
This anyway is one of my favorite features after transformMatrix support and skew support.
will definitely look at it.

[MDSLKTR]

I have had a few similiar requirements in a project i have been working on the last weeks. This it what came out of it:
https://github.com/pixolith/fabricjs-customise-controls-extension

I added a few features requested in this thread but the customisation has it's limit when it comes to being object specific for everything.

[asturur]

2351 And #2360

[asturur]

I was checking the code and started to close this issue.
I see there is no global options for current controls. If i want to hide the controls for every object i have to override the objectClass or create a custom class.
I do not want to go into very specific uses case where someone could have 2 canvas on screen, one with red controls and one with green controls, but:

Would it be worth to add:
borderColors, cornerSize, borderWidth, hasBorder, transparentCorners... and so on on Canvas level?

That would mean setup canvas valuse as current object valuse, and leave object values to null, so that a check like:

borderColor = this.borderColor || this.canvas.borderColor

may work.

[MDSLKTR]

I think it would make sense since you only want to override it for very special objects. Otherwise a canvas setting for all objects would be more than enough.

[asturur]

i added some control customization function that are purely cosmetic.
I added also custom icons that are pretty useless without custom actions.
Now this thread is old and maybe the original backers are not interested anymore but still this can be a popular feature.

I arrived at the point where the current situation is this:

Code to setup those control is:

var mtr = new Image(); mtr.src = 'spin.png';
var tr = new Image(); tr.src = 'trash.png';
var tl = new Image(); tl.src = 'lock.png';
var br = new Image(); br.src = 'scale.png';

deleteObj = function(obj, x, y, corner) {
  obj.canvas.remove(obj);
}

customRotate = function(obj, x, y, corner) {
  obj.canvas._rotateObject(x, y);
}

// what about custom cursor?
var controlCustomization = {
  mtr: {icon: tr, clear: true, action: deleteObj},
  tr: {icon: mtr, clear: true, action: customRotate },
  tl: {icon: tl, clear: true},
  br: {icon: br, clear: true}
};

fabric.Object.prototype.cornerCustomization = controlCustomization;

This is pretty flexible but need tweaks.
For example i wanted to implement as a test an object lock/unlock with changing icon.
The lock/Unlock could be done with 2 templates for one corner to switch between. The point is that when creating a new object we do not get a copy of the object and a copy of the icons but a just a reference to it. This means that if i switch a behaving for one corner i switch for all objects.
And that is not nice.

I could make 9 separate properties: customMT, customBR, customBL.... and so on, in this way the obejct has copy of reference to 9 templates and we can swap a corner per object without influencing others. But i do not like to add 9 properties.

Does someone has a nice idea to do that?

@kienz, @inssein your opinion is appreciated also

[inssein]

If you ask me, this sort of customization should be easy to add, and not something as part of the core. These things are very easily over-ridden in _drawControls.

[asturur]

icons yes. actions and cursor not really easy.
Anyway i m not finishing it if i do not see some feedback from devs (on twitter) code as of now is few lines and in worst scenario i will dump it as a tutorial for how to make customizable controls.

[LorenzoBoccaccia]

snap to grid and rotation angles are in scope of this?

[asturur]

No. This will include chance to add custom icons and a chance to add custom functions to corners. You will write your own function to add to controls. So yes you can do it, No it will not come from us.

[LorenzoBoccaccia]

So yes you can do it, No it will not come from us.

Perfect! 'can do it' is enough for us. We already did most of the layer tooling out of the corner controls anyway, makes more sense than on the shape itself for those, but for rotation we couldn't find the hooks.

[asturur]

i can give you the code out so far, i wanted to postpone this issue because i have bigger to care of now.
I open a PR with the code so fare so you can download that branch.

[p3ndu]

Hi @asturur,

Can you provide a status update on this issue?

Best regards,
Alex

[astw]

Good staff! I like this feature, because I need to put the control below the control.

Any progress of this feature?

[asa9]

I'm interested as well.

[p3ndu]

What I'm using at the moment is this:
https://github.com/pixolith/fabricjs-customise-controls-extension

but the issue is that the controls are stored on the prototype of the canvas and you have to overwrite them each time. I ran into some problems, I expect more in the future.

Is there a chance to support a new way in the near future to make this easier?

Best regards,
Alex

[asturur]

For now not.
I m trying to release the new text and filters.
This will take away lot of time in docs and examples.
My next target is then supporting a better way to clip and continue to improve the speed and effectivness of cache canvas.
Improve gradients and patterns api

Those are my personal prioirities.

If i should support this kind of feature that means i should provide:
an api to set controls that pass an icon and a function per key modifier type
I should rewrite current scaling/skew and rotate to work in the same way.
Rewrite the drawing functions of the corners

maybe other things.

Is not in my list of priorities, despite the 150$ bounty.

[MDSLKTR]

Hey there, i am the author of the extension mentioned above. Frankly i think it might be a shitton of work to get this API nice and implemented in fabric. I'd be willing to help whenever you want to give it a go though. @p3ndo If you encounter any problems, feel free to open an issue in the meantime :)

Regards,
Simon

[p3ndu]

Hi @MDSLKTR,

Great work with the extension and we really appreciate it, don't take it the wrong way. I will surely open one if I can't figure out some things with the extension.

Best regards,
Alex

[MDSLKTR]

Hey p3ndu, thank you and no worries mate, it's all good :). Just wanted to chip in and underline that i eventually want to get this into the core as keeping up with new fabric versions is sometimes time consuming especially on major version bumps.

Regards,
Simon

[vijaygurjar]

Hello,
I want some help related to selection box for line.
I need selection box on first point to last point rather than square box.
i have added two line in. One is straight and another one not straight. Straight line selection box perfect but second line selection box not perfect for me. I need only two selection point like when we draw straight line.
I have attached 2 screen shot.
I need selection box like 1 image

I need

Currently below controls visible which is i dont want

[arkuzo]

Hello, vijaygurjar.
You can extend fabric.Line class by your custom class and override _renderControls() method. As I usually do, you can copy source of class and change it for a bit, to have custom behavior.

[asturur]

I feel like i finally close this with the current state of fabric 4.beta

[asturur]

https://github.com/fabricjs/fabric.js/pull/6278