profile
viewpoint
Kirill Konshin kirill-konshin RingCentral, Inc. San Mateo, California, US http://dis.dj

kirill-konshin/create-react-server 140

Server & middleware for React + Router + Redux with Server Side Rendering

ioncreature/js-interview 3

Questions for interview for JS

kirill-konshin/docker-nginx-nodejs 2

Official Docker Nginx with added NodeJS

kirill-konshin/adobe-portfolio-to-airtable 0

Small CLI script that can export all

kirill-konshin/allure-js 0

Allure integrations for JavaScript test frameworks

kirill-konshin/amd-optimize 0

An AMD (RequireJS) optimizer that's stream-friendly. Made for gulp. (WIP)

kirill-konshin/amdclean 0

A build tool that converts AMD code to standard JavaScript

kirill-konshin/ansi_up 0

A javascript library that converts text with ANSI terminal codes into colorful HTML

issue commentfabricjs/fabric.js

IMPORTANT: Migrating to modern javascript/typescript

Here's an example that illustrates why Fabric has to be written in TS:

http://fabricjs.com/docs/fabric.Object.html#forEachControl https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/fabric/fabric-impl.d.ts — does not even mention this method forEachControl

And I doubt JSDOC to TS types generator will be a good solution: it is awkward and does not give all benefits that TS can provide.

asturur

comment created time in 20 hours

issue commentfabricjs/fabric.js

Single selection and ActiveSelection don't react when object becomes not selectable

Seems to work without the need to workaround http://jsfiddle.net/symvad17/8/

Not quite, selection still has to be dropped manually, e.g. object stops moving, but remains selected

kirill-konshin

comment created time in 20 hours

issue commentfabricjs/fabric.js

Single selection and ActiveSelection don't react when object becomes not selectable

This can be closed in my opinion

Is it fixed? :)

I mean that line is committed and released?

lockMovementX lockMovementY do exactly what you want

Also probably lockRotation, lockScalingX, lockScalingY, lockSkewingX and lockSkewingY. And also selectable and evented. All set to false.

kirill-konshin

comment created time in 20 hours

issue commentfabricjs/fabric.js

IMPORTANT: Migrating to modern javascript/typescript

They do not provide their own TS definitions, they are maintained separately here

I worked a lot with this project. Separate declaration is one of the reasons why bugs occur because of discrepancies. It is a very bad approach. Types should be shipped along with library.

The resulting compiled JS is committed to git when they do a release

This is also considered as bad practice, build artifacts should not be part of version-controlled repo because it leads to horrific merge conflicts.

asturur

comment created time in 20 hours

issue commentfabricjs/fabric.js

Single selection and ActiveSelection don't react when object becomes not selectable

@asturur like I said earlier, the object may become non-interactable during interaction (due to race conditions and other causes), so we need to abort transformation immediately and deselect an object.

My fiddle http://jsfiddle.net/dfuse/cyneb8rg/ allows to abort transformation when there are multiple objects selected, but when it's only one object, it can't be aborted, or I don't know how to abort it.

kirill-konshin

comment created time in a day

issue commentfabricjs/fabric.js

Unable to get true coordinates / angle when objects are selected and modified

But neither solution works when objects with different originX and originY are in selection...

This one.

kirill-konshin

comment created time in 4 days

issue commentfabricjs/fabric.js

Single selection and ActiveSelection don't react when object becomes not selectable

@ShaMan123 can you produce a build so I can verify?

kirill-konshin

comment created time in 5 days

issue commentfabricjs/fabric.js

IMPORTANT: Migrating to modern javascript/typescript

@jimmywarting

I could if i wanted to. I can code and develop in raw ESM, making sure it run just fine in latest chrome and maybe firefox, without having to compile anything. And when i want to make a release then i can run some test that builds some UMD

Yeah, you can do that, but you trade compilation time during dev at expense of testing and verification time. And again, you won't have to support DTS files separately... It's always a tradeoff. So unless you actually ship raw ESM I don't see practical benefits. I advocate for "Eating your own dog food" to be sure I am seeing what others will see, as close as it can be. And as early as I can, ideally during development, not verification.

Compilation time in watch mode of a library the size of fabric is few seconds. It's not a big deal. But then during development you can be sure the code you see is exactly what will be shipped.

To me, when you develop a LIBRARY — TS is a no brainer choice. When you develop an APP — your approach makes more sense.

Also there are rust (SWC) or Go (esbuild) based compilers that are even faster than regular TSC/Babel/Rollup/etc., and looks like it's the general direction where industry is moving, Next.js used to be a JS project, and they did full transition to TS, it's just one example... overall the trend is towards TS in lib development.

Overall the choice should be based on if team will be able to work faster with TS or with JS + custom DTS. From my experience in multiple teams and products, TS helps to speed up overall delivery if all factors are considered (development, dev experience, CI, QA, support).

asturur

comment created time in 6 days

issue commentfabricjs/fabric.js

Unable to get true coordinates / angle when objects are selected and modified

@asturur yes, I've tried qrDecompose but it had some issue in more complicated scenarios, like I said here https://github.com/fabricjs/fabric.js/issues/7407#issuecomment-997037091

kirill-konshin

comment created time in 6 days

issue commentfabricjs/fabric.js

IMPORTANT: Migrating to modern javascript/typescript

@jimmywarting Your point "annoying sourcemaps, extra compile time, bloated code that looks nowhere near the actual input" contradicts with your other point "target set to like some very old environment, it's always going to do some form of transformation to your code" — you can't publish raw ESM code.

"all browser basically have auto update now and IE it's pretty dead" — Random old browsers still exist in corporate sector, where auto update may be turned off... Also don't forget government sector. You still have to compile CJS and maybe even ES5. Obviously we should not target IE6 or IE7, but only targeting latest Chrome is another extreme.

Fabric is a very popular lib, most popular based on stars, it cannot throw away compatibility, so there WILL be a build/compile script, one or the other.

image

Competition is tough...

VSCode does have a good support for JSDoc, but I've never seen a reliable tool to check JSDoc types on CI, whereas TS compiler will do it during the build as normal part of CI process.

@asturur wrote:

which are the functions of TS that are better than JS, types apart? i thought where identical. I wonder if we can get best of bot, we write in ts, and we can build into plain js and bundled legacy js Isn't TS with ripped types just plain JS?"

This is true, for the most part JS now is TS without types, except a few features like decorators (which Fabric may use as strong-typed mixin replacement). When TS is used you get types for free, DTS for external consumption.

asturur

comment created time in 6 days

issue commentfabricjs/fabric.js

Single selection and ActiveSelection don't react when object becomes not selectable

Yep, I'm using set method.

The problem with my solution is if I drag single object, timeout kicks in, even with makeUnselectableSmart (code above) the object is not unselected: canvas.discardActiveObject() has no effect when single object.

https://user-images.githubusercontent.com/1530410/149360575-e8bf5f85-1e4b-4e14-a78a-3ccd7e91f65b.mp4

As you see when I drag the object it becomes red (at this moment rect.set({selectable: false}) and makeUnselectableSmart are executed, but I still can drag it around.

kirill-konshin

comment created time in 6 days

issue commentfabricjs/fabric.js

IMPORTANT: Migrating to modern javascript/typescript

Colleagues, main point about Typescript is it’s strong and flexible type system. No vanilla js (even with jsdoc) gives true type checking during compilation time. In all my JS projects migrated to TS, type checks found a number of potential issues that were overlooked.

Second reason is DTS (definition) files. Since we’re talking about library development, TS is a de facto standard. Definitions must be produced in any case, if we target large audience, which includes other TS projects.

Definitions on top of JS tend to have errors, mismatches and discrepancies, and require a lot of manual maintenance. Of course one can generate dts from jsdoc, but this will not do type checking… and in case JSDoc has issues those issues will silently leak into DTS, which means more maintenance efforts.

Third, TS is mature tool, with huge community, it’s safe and proven. Vanilla JS is catching up, it’s still years behind TS in terms of features. And even when it will catch up, vanilla won’t have types anyway, which brings us back to previous points.

asturur

comment created time in 6 days

issue openedfabricjs/fabric.js

Single selection and ActiveSelection don't react when object becomes not selectable

Version

4.5.0

Test Case

http://jsfiddle.net/dfuse/cyneb8rg/

Steps to reproduce

First scenario, the simple one:

  1. User selects single / multiple objects
  2. Some code (click on Unselect button) sets selected:false (and stroke:red for visual clue)

https://user-images.githubusercontent.com/1530410/149210708-1132a608-252c-474a-a619-d2eff2a20b72.mp4

Second, a bit more complicated scenario:

  1. User selects single / multiple objects
  2. User starts to move objects around
  3. Some code (setTimeout for sake of demo) sets selected:false (and stroke:red for visual clue)

Expected Behavior

Fabric should track selectable property and if it becomes false remove object from selection (scenario 1 and 2) and abort transformation (skew, scale, move, rotate) when single or multiple objects are transforming (scenario 2).

Actual Behavior

Selection is unchanged (scenario 1), transformation continues (scenario 2), object becomes unselectable only after selection is discarded (click anywhere on canvas for example).

Note that rect becomes red but nothing happens.

Proposed solution

I went ahead and created a smarter deselector makeUnselectableSmart:

const oldObjects = canvas.getActiveObjects();
const objects = oldObjects.filter(o => o !== rect);

if (objects.length === oldObjects.length) return;

canvas.discardActiveObject().requestRenderAll();
  
if (!objects.length) return;

const selection = new fabric.ActiveSelection(objects, { canvas });

canvas.setActiveObject(selection).requestRenderAll();

I suppose this kind of boilerplate code can become part of lib... or a default behavior.

@asturur @ShaMan123 pls take a look.

created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

I've also noticed in group fiddle http://jsfiddle.net/dfuse/8vm0Leun/ that when I select both group and green box and drag green box — multiple selection breaks.

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

I'm looking into relative coords. I was against it surviving and still am. But the rendering process might need them.

It's very handy because if you'll need to sync a state of a group to server, then in case of relative coords you will only sync own group properties, not touching children.

And in case of absolute coords all children will have to sync, so if group has 100 elements, it will be a huge update.

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

Yes, I can see how these changes will unlock endless possibilities and make things much more simpler.

Layers at a very least make it possible to divide objects on helpers (visual cues, alignment helpers, various handles and so on) and actual interact-able objects (boxes, lines, shapes, etc). Possibilities are looking great.

Also simple Collections will allow to group/ungroup objects in a transparent way, w/o coordinates recalculation and so on. So it's just an actual semantic collection of things.

Groups on the other hand allow to combine objects and lock them together to act as one, and it's quite handy to work in relative coordinates sometimes.

After all it leaves ample amount of choice for developers to pick the best suitable solution.

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

Overall, quite a solid solution with groups, thanks a lot. Solution with ICollection has only one issue with bounding box and also is very solid looking. Great job, thank you so much. Waiting for the merges...

We also will use layers extensively for other things, also very much awaited change.

@asturur tagging you just in case.

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

Tried text.on('changed', () => collection.set({dirty: true})); — it does the trick, but at some point artifacts still appear around the borders.

image

In your fiddle artifacts appear if text is either edited or moved around, so either same approach to set dirty on group is needed for other transformation (move,rotate,skew,scale) events or simple objectCaching:false to beat them all at once.

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

I'd appreciate it if you keep track of issues/bugs and report to the relevant PR

Sure, just add link to PR to fiddle as a comment for example?

This works with Group: http://jsfiddle.net/tr2qh4vj/

When I drag text around it leaves artifacts:

image

I've forked your fiddle http://jsfiddle.net/dfuse/8vm0Leun/ and did the same as http://jsfiddle.net/dfuse/t6L1msew/ (collection). Works like charm, but I've added objectCaching:false to get rid of artifacts. And group version does not have the bounding box issue.

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

There's no need to call enterEditing. It works out of the box.

Did not work for me... I was not able to enter editing. Can you elaborate?

Now if you don't want the textbox to move use lockXXX where XXX is the property/action like lockMovementX

I've modified your fiddle http://jsfiddle.net/dfuse/t6L1msew/ — I wanted to make text non-selectable, same as regular group, by default, unless user double-clicks a group, it has to move/rotate/behave as one. So instead of locking, I just set text.selectable = false by default and on double click on collection I set it back to true, and the after editing back to false.

Now everything works exactly as intended w/o hacks with subTargetCheck and objectCaching.

The only issue is bounding box.

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

Editing text inside groups

I think I fixed most of itext issues inside group. Could you test it? http://jsfiddle.net/ewzj24vy/

I don't see the code for editing, double click on group/text does not produce any effect :( so text is not editable in the demo.

I've added collection.on('mousedblclick', () => text.enterEditing()) and it has all the same issues as in my fiddle (http://jsfiddle.net/dfuse/k9w8sdfy/ 3rd object — no ability to move cursor or make selection via mouse due to events capturing by the group).

I have updated the fiddle: http://jsfiddle.net/cuv3b4o1/ Tell me if it behaves as expected

Bounding box is still bigger as soon as I dragged the text.

image

Expected behavior is shown in my fiddle http://jsfiddle.net/dfuse/k9w8sdfy/ (left shape) — double click to edit, click outside to exit editing, move/rotate/scale as one object (both text and rect). So user should not be able to drag text/rect individually.

What error was raised?

If you comment evented: false in first Rect of my fiddle http://jsfiddle.net/dfuse/k9w8sdfy/ it used to produce error. Not anymore... did you change anything?

And if you want to try an alpha this is branch: ShaMan123/group-selection

What is in there?

ShaMan123:coords

And what's there? :) Sorry, I'm a bit confused, which branch contain which fix... :)

kirill-konshin

comment created time in 7 days

issue commentfabricjs/fabric.js

IMPORTANT: Migrating to modern javascript/typescript

Based on my experience, most of the projects can be migrated to TS with minimal effort (obviously, the types will not be very strict, some compromises will take place), but it's a proper foundation to improve these types in future.

TS can work even w/o types as plain JS, types can be introduced function by function, file by file.

Additionally, w/o TS project will have to support custom .d.ts files, which is a nightmare, it's much easier to convert code to TS and generate .d.ts automatically.

asturur

comment created time in 7 days

issue commentfabricjs/fabric.js

How to listen for text changes in 'Textbox'?

RTFM:

http://fabricjs.com/docs/fabric.IText.html

Fires: event:changed <----- this one selection:changed editing:entered editing:exited

glk-hll

comment created time in 8 days

issue commentfabricjs/fabric.js

Editing text inside groups

Please disregard previous comments, I was exploring and writing as I go, so here's the proper summary of my experience.

After quite some time of reverse-engineering your PR, I've created a small fiddle for experiments first: http://jsfiddle.net/dfuse/wampvrgn/113/ (CDN used for fabric: https://cdn.jsdelivr.net/gh/fabricjs/fabric.js@layer-proposal/dist/fabric.js) but the problem is all items in the Layer (and ICollection) move as separate (I guess that's intentional).

With group.subTargetCheck = false collection "works" as Group (e.g. rotates/moves as one) but I need to set it back to true dynamically in order to edit text.

But then I need to set group.evented = false because click on group/rect will cause a JS error, and group.objectCaching = false to prevent text to appear in random place during editing.

Also I've figured that I have to call .set({...}) instead of assigning those properties directly.

The only issue now is that selection box around the collection is larger after text editing, even if group.strokeWidth = 0:

image

P.S. Surprisingly, I had a good results with group.objectCaching = false on regular Group: works OK, only cursor glitches and inability to select text/move cursor (since mouse events are not propagated to text).

kirill-konshin

comment created time in 8 days

issue commentfabricjs/fabric.js

Editing text inside groups

Here's the combined example: http://jsfiddle.net/dfuse/wampvrgn/77/

With subTargetCheck:false collection "kinda works" but I need to set it back to true while editing, but this allows to drag rect away from text...

https://user-images.githubusercontent.com/1530410/149010744-83035437-2364-4a30-80c6-ac3ada0f54f7.mp4

With subTargetCheck:true (middle) it works, but it's impossible to select the whole collection (if strokeWidth > 0 then area around is clickable).

kirill-konshin

comment created time in 8 days

issue commentfabricjs/fabric.js

Editing text inside groups

Surprisingly, I had a slightly better results with objectCaching: false on group/collection.

Group started to work exactly as intended, collection produced super weird results when rotated and text edited, seems like the sync between collection rotation and text rotation was broken: http://jsfiddle.net/dfuse/wampvrgn/48/

kirill-konshin

comment created time in 8 days

issue commentfabricjs/fabric.js

Editing text inside groups

I've created a small fiddle for experiments first: http://jsfiddle.net/dfuse/wampvrgn/41/ (CDN used for fabric: https://cdn.jsdelivr.net/gh/fabricjs/fabric.js@layer-proposal/dist/fabric.js) but the problem is all items in the Layer (and ICollection) move as separate (I guess that's intentional)...

And if I add {subTargetCheck:false} to fabric.ICollection, it works as a group, e.g. rotates/moves as one, but text editing does not work properly. I tried to set this property dynamically, no luck...

I've also tried new fabric.Layer([rect, text], {hasControls: true, hasBorders: true, width: 100, height: 100, left: 100, top: 100}) — w/h/left/top were ignored, but I was able to scale the layer with controls, all of which were at the borders of canvas, and all objects moved as expected (with visual artifacts as in screenshot above), even the editing worked.

I definitely need some instructions how to use layers properly...

My goal is to create a group with rect and text and make it move/rotate as one (default group behavior) but with ability to edit text on double click on group, for example.

kirill-konshin

comment created time in 8 days

issue commentfabricjs/fabric.js

Editing text inside groups

@ShaMan123 sure, if you can provide some instructions how to migrate old code to new proposal, and the NPM build I can test it in my app.

kirill-konshin

comment created time in 8 days

issue commentfabricjs/fabric.js

Editing text inside groups

@ShaMan123 yep, I've had another ticket regarding groups, I'm glad you saw it too :)

What is the projected timeline for the collections? Are we talking months or weeks? It would be great to cleanup all our own hacks and workarounds...

kirill-konshin

comment created time in 8 days

more