konvajs / site Goto Github PK

https://konvajs.org/docs/sandbox/Rich_Text.html

When I tested with the demo in the link above, I found that the rendered serial number was incorrect.
You can see the result in the screenshot.

http://konvajs.github.io/docs/sandbox/

The source looks good to me: https://github.com/konvajs/site/blob/master/source/docs/sandbox/index.md

Maybe the website hasn't been build since the last commit? It says Last updated: Aug 28 2015

Hello there.

I've been struggling a bit with the zIndex functions in vue-konva in the last couple of hours. After looking through the source and some related issues (#34 for example), it appears that functions like moveToTop() etc. should not be used in vue-konva and do indeed cause unexpected behavior at times as vue-konva tries to order the elements by their order in the <template> section. I hope that this is still correct for the current vue-konva release and not an error on my end.

So far, I have not found a single hint about this in the official docs or in the vue-section of the Konva website (please correct me if I'm wrong).

The same thing seems to be the case in react-konva where it is indeed documented on the Konva website. Basically it describes the same situation as in vue-konva, so I suggest adding a similar section to the vue-konva section of the website.

If desired, I could do a pull-request for that and add it.

I'm using Firefox 78 on Windows, and when I view a demo page (for instance, vuejs drag and drop) the CodeSandbox area doesn't load, so I'm just left with some text.

This error shows in the console:
Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src").

I've noticed that this isn't happening on Chrome.

Not sure if this is a result of the image optimisations yesterday (all other images seem fine), however the following sandbox example:

http://konvajs.github.io/docs/sandbox/Planets_Image_Map.html

is missing some image resources and is not working:

http://konvajs.github.io/css/[email protected]
http://konvajs.github.io/css/[email protected]

I'd submit a pull request but I'm not sure what its meant to look like.

Thanks

I've found a typo in Pointer Events Doc
here: https://github.com/konvajs/site/blob/master/source/docs/events/Pointer_Events.md?plain=1
on line 9 there is typo in "pointerEup"

I believe it should be added an example regarding stage specific events like contentMousemove, contentMousedown, etc.

Some people might be mislead because of old KineticJS stack overflow questions like these:
http://stackoverflow.com/questions/17494102/kineticjs-on-mousemove-does-not-track-outside-shapes
http://stackoverflow.com/questions/12187355/kineticjs-mouseover-not-working

And will add a transparent Konva.Rect as background to detect events instead of just using stage.on("contentMousemove", function () {...}); for example.

I am following this example https://codesandbox.io/s/mjw1ywlmpy . However It drags rectangle out of canvas field. I want to limit its dragging ability. Rectangle cant go outside of canvas field.

Current behavior

Expected Behavior

The basic example in codesandbox produces a React warning. Line 34 does not work as expected. On Line 32 you initialize an array of length 10 with each element being undefined. Then call map and assume that the first parameter of the callback will give you the array index, or you may assume that ...Array(10) will give you an array of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], but in either case this is not how it works. The array index is passed as a second parameter in map() method. You need to change the code slightly like so:

- {[...Array(10)].map(i => (
+ {[...Array(10)].map((_, idx)=> (
 <Star
-  key={i}
+  key={idx}

This is a non critical error but prevents React from know which <Star /> component to update. If you are using React Dev Tools you also cannot see the <Star /> component. The above fix solves the issue.

On https://konvajs.github.io/docs/react/Complex_Animations.html (https://github.com/konvajs/site/blob/master/source/docs/react/Complex_Animations.md), the path to Konva for react-spring is react-spring/dist/konva. In the current version of react-spring (v7.2.10), it's react-spring/konva

I want to design a logo for your site, do you want it ?, free

I am pretty sure some update this week (yesterday?) broke countless codesandboxes on the react konva docs.

Example: https://konvajs.org/docs/react/DOM_Portal.html

Can you confirm this?