Comments (13)
kumilingus
commented on June 24, 2024
2
Done.
And here's a fix draft.
from joint.
kumilingus
commented on June 24, 2024
2
Fixed in v4.0.4.
from joint.
alexandernst
commented on June 24, 2024
1
I think maybe the codesandbox link is private? I can't see it ð
from joint.
alexandernst
commented on June 24, 2024
1
phew! Nice to see you saw the bug! I was that close ðĪ to assuming that it is a bug somewhere in my code and that I'd have to keep digging ð
So... JJ 4.0.4 release in the next ~10 minutes? ðĪŠ
from joint.
kumilingus
commented on June 24, 2024
I don't think this is a bug, nor regression (note that v4.0.2 reads the font from the external CSS which could cause the different behavior).
This is a race condition - which comes first - loading the font or rendering the diagram.
You need to make sure to start rendering your diagram after the font is loaded.
See StackOverflow.
Our flowchart example, where we force the font to be loaded.
from joint.
alexandernst
commented on June 24, 2024
ðĪ I don't think this is the case. I updated the POC in order to pre-load the font and then render the diagram(s). I wait 5s to give plenty of time the browser to finish loading all the assets (styles and fonts). The behaviour is still the same. Furthermore, even without the "wait", JJ3.7 is consistent at rendering the text correctly, while JJ4 inconsistently wraps the text.
I understand your suggestion that it might be because the diagram is being rendered before the font is completely loaded, but that doesn't explain why JJ3.7 is consistently behaving correctly. Shouldn't it be hit by the case problem as JJ4?
from joint.
kumilingus
commented on June 24, 2024
If you want to test JointJS v3 you need to set the font-family as SVG attribute (not using external CSS).
The support for external CSS was introduced in 4.0.2.
If you install @joint/core": "4.0.1" you should see no difference.
from joint.
alexandernst
commented on June 24, 2024
Hmmm ðĪ
I think I'm missing something (as in "I'm not sure I fully understand this"). I tested with 4.0.1 and indeed the "bug" doesn't occur. So... in my POC, the JJ4 code is doing what actually is supposed to happen, and the JJ3.7 is not wrapping the text just because it happens to fit in the width of that element (without taking into account the size of the font that is yet-to-be-applied). Is that correct?
If so, then I guess my textWrap attributes are incorrect (or maybe I misunderstood the docs).
The width of the entire box is 100px. The title element is defined as so:
title: {
textAnchor: "middle",
x: 50,
width: 92,
textWrap: {
width: 92,
ellipsis: true,
}
}
There should be 4px of unused space on each side of the text, which means that the text element should have 92px width, and the text wrap should take 100% of these 92px, right?
If "yes", then the text "Abcdefg hijkl" should fit inside the label, but it doesn't. And I'm not really sure why, since I'm pre-loading the text (the same way you're on the flowchart demo), and I'm also delaying the execution of the JJ code. Why isn't the textWrap able to properly detect the size of my font?
from joint.
kumilingus
commented on June 24, 2024
You understand correctly.
This is what usually causes this issue:
The textWrap detects the font-family correctly. But when it measure the text in order to break it, the font is not ready yet. The breaking is done based on the default font.
When the browser finishes loading the font, it updates the text again. Since the new font is narrower, an extra space around the text is created.
This is what I think is happening:
Since there is no external font being loaded in your example, I assume the problem is that you load your CSS from <body/>.
See https://stackoverflow.com/a/1642259/2921495.
from joint.
alexandernst
commented on June 24, 2024
Hi Roman!
Ok, so the textWrap is correctly setup, nice to know!
I read the link, but it basically states that styles might not have been loaded by the time "the desired action is performed", which I think is not my case, because:
- there is a text (preloader) that is using the font-related styles
- the "desired action" (the diagram being rendered) is delayed 5 seconds, which gives plenty amount of time for the browser to finish loading all styles.
Nevertheless, I created a new demo that specifically loads the styles in the <head> and then renders the diagram, and I'm still getting the same result: https://codesandbox.io/p/sandbox/jj4-bug-tetxwrap-q3kn5p
There must be something else affecting the way JJ is calculating the wrap, but I can't figure it out.
from joint.
kumilingus
commented on June 24, 2024
It is a bug ð
The font-size SVG attribute is set on the node after the text break calculation is done.
It computes the breaks with font-size 16px but later the font size is changed to 12.
Here's an updated codesandbox that shows the issue more clearly.
from joint.
alexandernst
commented on June 24, 2024
Fixed in
v4.0.4.
Did I say "~10min"? It was a typo, I meant to say "~10hours" ð
from joint.
kumilingus
commented on June 24, 2024
Well, thank you for the bug report ð
from joint.
Related Issues (20)
- Issue with JointJS in Typescript when integrated in own project
- [Bug]: Ports positioning in jointJS with angular HOT 1
- Vectorizer: can not convert zero-length arc to curve HOT 1
- [Bug]: Angular 17, Builder Application or Esbuild, does not provide an export named "dia" HOT 2
- SVG's height is overlapped by uikit.js HOT 3
- type(ui.Toolbar): wrong `widgetNamespace` type HOT 1
- jointjs+ in angular project v8.2.14 HOT 2
- [Bug]: Migration to joinjts 4.0 Not loading cells HOT 10
- Stencil Label not rendering HOT 1
- [Bug]: renderFieldContent Function Not Working as Expected HOT 2
- [Bug]: Each object assigned to portProp makes the diagram slower to render HOT 2
- [Bug]: Unsupported URL Type "workspace on @joint/[email protected] HOT 1
- Unable to get Selectors to animate my Customized Link HOT 2
- Rendering issue when paper is loaded in background. HOT 2
- [Bug]: Grid-layer display only one when two or more papers exist at the same time
- [Bug]: contextmenu in V4 is not default-preventable HOT 11
- [Bug]: JJ+ stopped rendering CSS when exporting to PNG (possibly other formats too) HOT 7
- Command manager is saving the entire attrs object on each attr() call (unexpected behaviour?) HOT 1
- linkTools.Vertices: prevent vertex creation on labels
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
ð Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ððð
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google âĪïļ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from joint.