roipeker / graphx Goto Github PK

hi, I tried something, but still don't know the method drawPoly how to work.

Scene layers can only be back or front, according to the docs and code. You can’t have more ?

I am wanting to build graphics editors with graphx and that requires many layers for example a vector editor like svg edit or a game editor.

Hi,

Currently the scene config and the ticker code assumes that if you want a ticker, you want it to cover both scenes but there are scenarios where you want control over when to render / update the back scene which contains heavy things to draw but let Graphx redraw the front / hud scene automatically.

Could we have an enum (tickerScope maybe ?) in the scene config to drive this ? I think you either want both or front_only.

the super nova tween demo is very cool !!

could you give any hint on how to implement this by using graphx? thank you.

Hi:

Looks like we have a bug on mouseup event.

#1. MouseDown GShape A
#2. directly move to GShape B
#3. loosen fingers

the GShape A MouseUp event not trigger.

I think it's related to when I loosen fingers,the target element move to B, not A.
I think we need a Global event manager to handle it for 100% make sure the event mouseup can be happen after mousedown happed, alright ?

maybe we need store the last GdisplayObject on class State when MouseDown happened and focus use the cached GdisplayObject to trigger mouseup ?

I came across this package recently and it is awesome, but deep down I always feel that it should have had a different name.

Whenever I hear the term graphx the first thing that comes to my mind is network theory (search networkx) and graph data structures. There is also a popular library named graphx which does the same.

Please note that this is just a personal opinion and I know it is too late to change the name. Also, the logic of deriving this name must have had origin in charts and graphs, but this library is much more than that. I just wanted to let you know as I was expecting something to do with graph algortihms in dart when I first heard about this package.

Awesome work. Good luck 👍

Why is there no code prompt? It's important that there are so many apis, and it's not an editor problem, I tried idea and VsCode

This is really cool.

Any chance you can publish the demos that are animated gifs ?

Firstly, I would express my appreciation for your work, which is amazing and cool.

If convenient for you, could you give my any hint on doing some stuffs which AE/Pr would do, like video composing, with Flutter widgets and your graphx abilities?

Sorry for my poor knowledge but I want to know if it is possible, for I've known that Flutter is based on Skia. May it be okay to do some special work to be capable of video composing. Which document I should refer to?

Excuse my strange language and thank you 👍

Hi:

Maybe a bug Gtext not update UI when container scale changed, but gshape work.

Hi, have you planned any improvements for text rendering. I’m painting >1000 paragraph objects per frame and it’s causing a huge lag.

Apology for raising this as an issue.

Hi:

I know we current has the API addChildAt for define z-index, but the max value must less than children.length.
The limit not friendly build a UI keep it last layer if dynamic add children.

So, I am thinking we can define the Index same as CSS z-index, we can define any int, and just sort children with the index when rending, I also do something before on Myself SVG render engine.

Future<ByteData?> getImageBytes(GDisplayObject object) async {
var texture = await object.createImageTexture(); <--------- Here
return texture.root?.toByteData();
// texture?.dispose();
// texture = null;
}

[ +95 ms] [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Exception: Invalid image dimensions.
[ ] #0 Picture.toImage (dart:ui/painting.dart:5791:7)
[ ] #1 GDisplayObject.createImage (package:graphx/src/display/display_object.dart:1132:34)
[ ] #2 GDisplayObject.createImageTexture (package:graphx/src/display/display_object.dart:1099:23)
[ ] #3 getImageBytes (package:neuron/widgets/studio/components/right_menu/atomic_ui/color_palette_utils.dart:35:30)
[ ] #4 HueScene.addedToStage (package:neuron/widgets/studio/components/right_menu/atomic_ui/color_palette_hue_scene.dart:108:5)
[ ] #5 GDisplayObjectContainer.addChildAt (package:graphx/src/display/display_object_container.dart:152:15)

Hi:

as well as we know, We can set different mouse cursor for a child widget on flutter use MouseRegion, and I am not sure how to apply set mouse cursor on Shape region.

a solution is :
#1. a Stage level mouse move event handler, and use hittest for check which child already hit, then change mouse cursor ?
#2. configure mouse curosr for a shape.

While i was debugging an issue with mouse input, I noticed that globalToLocal(input.stagePosition, input.localPosition); is always called even though it is only needed for the hitTouch which is only happening when the input has not been captured already.

https://github.com/roipeker/graphx/blob/master/lib/src/display/display_object.dart#L113

We should avoid this op in that case given this op will be called for each sprite / shape in your entire scene.

Hi @roipeker,

Would there be an easy way to add support to draw dashed lines with Graphx ?
I remember having a similar ask when I was working with Graphic and the PR addressing it might give some pointers on how to implement it relatively easily.

entronad/graphic@33385a9

The gist of it being:

Hi @roipeker,

Depending on where the cursor is on my stage, I customize it and sometimes, i hide it so I can draw something myself. The issue I have is that when the user is moving the mouse outside the stage, i can't seem to be able to restore the default cursor.

I have tried to use stage!.onMouseLeave((event) => GMouse.basic()); but it does not work.

Any idea how to do this ?
Thanks !

As it can be seen in the image above, if the local point has either x or y negative, it's impossible to have a hit test so we should bail as early as possible.

For context, this is happening because I compute a layout of my background scene and then place each container / sprite using sprite.setPosition(x,y) to that their children are positioned in relative position to their parent.

Hi @roipeker,

I have observed some weird behaviors regarding the coordinate system and its origin depending on the platform.
I have tested it on OSX and on the web with Flutter 3.3.9

My expectation is as follow, given the following code :

final rect = GShape();
rect.graphics.lineStyle(1, Colors.red, false).drawRect(0, 0, 9, 9);
addChild(rect);

I would expect to see a rectangle of 10px * 10px starting at the very top left of the stage.

1. OSX

With OSX, no matter the app / stage dimension I consistently get the following:

The height of the rectangle is 8px and the width is 9px.

If i want to draw a line at the very top of the stage, i have to do

final vline = GShape();
vline.graphics.lineStyle(1, Colors.green, false).moveTo(0, 2).lineTo(100, 2).endFill();
addChild(vline);

2. Web (Chrome)

Things get funky here, 1px is always missing on the left so the rectangle is 9px wide, same as on OSX.

However depending on the height of the chrome window, the stage origin float between 2 int coordinates and can even fall in between resulting in more than 1 pixel being painted for the line.

The code for the following is exactly as before and what was posted above for the rectangle and the line.
Only the height of the Chrome window changed.

There are probably multiple things at play here but is my expectation correct to begin with ?

The current used version prevent users to build the example project due to missing nullOk parameter missing in the Framework, this was fixed in the latest version of that package.

Proposal

Update flutter_svg version

hi:
how to listen dragging position like mousemove event ?

I found that the handler set using onMouseDoubleClick is always called when a GShape object is clicked on twice using a mouse even if the time between clicks is several seconds. The cause is due to the value of MouseInputData.time being in seconds while the value of MouseInputData.doubleClickTime is in milliseconds. The comparison at line 949 in display_object.dart ends up using an interval of 250 seconds as a result and always succeeds.

Changing line 9 in pointer_data.dart so that the value of doubleClickTime is in seconds fixed the issue for me:

static double doubleClickTime = 0.250;

When I tried to install the latest version Graphx on the Stable Channel. I get this issue.

https://github.com/roipeker/graphx/blob/master/lib/src/render/graphics.dart#L497

As said in the title - it's not possible to use graphx and flutter_map in the same project due to dependency conflict:

Because graphx >=1.0.0-nullsafety.0 <1.0.1 depends on http ^0.13.1 and graphx <1.0.0-nullsafety.0 doesn't support null safety, graphx <1.0.1 requires http ^0.13.1.
And because graphx >=1.0.1 <1.0.4 depends on http ^0.13.3, graphx <1.0.4 requires http ^0.13.1.
And because graphx >=1.0.4 <1.0.5 depends on http ^0.13.4 and graphx >=1.0.5 depends on http ^0.13.5, every version of graphx requires http ^0.13.1.
Because no versions of flutter_map match >5.0.0 <6.0.0 and flutter_map 5.0.0 depends on http ^1.0.0, flutter_map ^5.0.0 requires http ^1.0.0.
Thus, flutter_map ^5.0.0 is incompatible with graphx.
So, because dartgcs depends on both flutter_map ^5.0.0 and graphx any, version solving failed.

Hi @roipeker ,

Unless I am missing something, requiresRedraw is missing an implementation, in its current form it does nothing

I guess that's probably why there is a TODO 😄

Running on MacOS

Example: Facebook Rections

Exception has occurred.
SocketException (SocketException: Connection failed (OS Error: Operation not permitted, errno = 1), address = source.unsplash.com, port = 443)

There are many situations where you simply don't need to detect mouseover mouseout events when the mouse is still but objects are moving or being hidden / displayed.

The issue is that I soon as you have a ticker, this will feed the system with still events every 16ms where the system will traverse the whole graph of object and proceed to do some hit test on them. This is expensive and should be avoided when you actually don't need it.

We should have a flag in the stage to turn this off.

hi:

#1. give a gshape a mousedown event handler
#2. let the shape x = 0, and y = 0,
#3. touch out of bounds
#4. the gshape mousedown event still happed.

#5. I think the issue is localPosition will be {x:0,y:0} if out of bounds.

Hi:

i am have a scenebuildwidget on a singlechildscrollview, and when I drag a shape, the singlechildscrollview also following hand scroll.

I don't know how to disable the singlechildscrollview when I drag something.

Am thinking about trying to make a game .

anyone know of a flutter package that works with gamepads ?

Sorry for the beginner's question.
How to make GSprite from Uint8List Image?

I see most of the examples here support web.
in pub.dev it does not have web support

Hey there!

I really do love this lib and the use cases of it are tremendous.
Do you also plan to upgrade the lib to v3 of Flutter? There are some binding issues as I'm aware of.

Regards