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.

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

Ability to customize controls [$150] #1947

Closed
dandersson01 opened this issue Jan 26, 2015 · 39 comments
Closed

Ability to customize controls [$150] #1947

dandersson01 opened this issue Jan 26, 2015 · 39 comments
Assignees

Comments

@dandersson01
Copy link

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
Copy link

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.

@kangax kangax changed the title Ability to customize controls Ability to customize controls [$100] Jan 27, 2015
@kangax kangax added the bounty label Jan 27, 2015
@asturur
Copy link
Member

asturur commented Jan 27, 2015

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
Copy link
Author

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
Copy link
Member

kangax commented Jan 27, 2015

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
Copy link
Member

asturur commented Jan 27, 2015

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
Copy link
Author

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
Copy link

Godweed commented Feb 23, 2015

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
Copy link
Member

asturur commented Feb 23, 2015

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.

@kangax kangax changed the title Ability to customize controls [$100] Ability to customize controls [$150] Jul 9, 2015
@Godweed
Copy link

Godweed commented Jul 9, 2015

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
Copy link
Member

asturur commented Jul 9, 2015

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
Copy link
Contributor

MDSLKTR commented Nov 8, 2015

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
Copy link
Member

asturur commented Apr 26, 2016

#2351 And #2360

@asturur
Copy link
Member

asturur commented May 1, 2016

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
Copy link
Contributor

MDSLKTR commented May 1, 2016

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
Copy link
Member

asturur commented May 8, 2016

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:
image

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
Copy link
Contributor

inssein commented May 9, 2016

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
Copy link
Member

asturur commented May 9, 2016

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
Copy link

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

@asturur
Copy link
Member

asturur commented May 16, 2016

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
Copy link

LorenzoBoccaccia commented May 16, 2016

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
Copy link
Member

asturur commented May 16, 2016

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
Copy link

p3ndu commented May 2, 2017

Hi @asturur,

Can you provide a status update on this issue?

Best regards,
Alex

@astw
Copy link

astw commented May 18, 2017

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

Any progress of this feature?

@asa9
Copy link

asa9 commented May 24, 2017

I'm interested as well.

@p3ndu
Copy link

p3ndu commented May 24, 2017

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
Copy link
Member

asturur commented May 24, 2017

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
Copy link
Contributor

MDSLKTR commented May 24, 2017

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
Copy link

p3ndu commented May 24, 2017

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
Copy link
Contributor

MDSLKTR commented May 25, 2017

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
Copy link

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
2

Currently below controls visible which is i dont want
3

@arkuzo
Copy link

arkuzo commented Dec 24, 2018

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
Copy link
Member

asturur commented Apr 26, 2020

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

@asturur asturur closed this as completed Apr 26, 2020
@asturur asturur reopened this Apr 26, 2020
@asturur
Copy link
Member

asturur commented Apr 26, 2020

#6278

@asturur asturur closed this as completed Apr 26, 2020
@asturur asturur reopened this Apr 27, 2020
@asturur asturur closed this as completed Jun 19, 2020
@Gerwin-prog
Copy link
Contributor

@asturur I'm trying to overwrite the render functionality for custom icons, but it looks like the icons aren't rendered on TextBox elements, but they're however rendered on images, or shapes.

See: jsFiddle

Custom images also aren't loaded until: a user has clicked on atleast 2 elements, or clicked on 1 element & moved it, or re-scaled the element.

@Gerwin-prog
Copy link
Contributor

Does anyone have an update on this issue?

@asturur
Copy link
Member

asturur commented Mar 15, 2021

did not look at your fiddle yet, but probably i can today

@Gerwin-prog
Copy link
Contributor

that'd be great, thank you

@asturur
Copy link
Member

asturur commented Mar 15, 2021

Ok i had already checked this fiddle, but for some reason i couldn't answer.

http://fabricjs.com/controls-api

As written there, Texbox does not share the same control set with Object ( because has 2 different controls on ml, mr ). Simply you have to change the mtr also on fabric.Textbox.prototype.controls

@Gerwin-prog
Copy link
Contributor

aha that does make sense, I've changed it, and it works perfectly fine now.
Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests