Unexpected Text Tag behaviour in API

Grasshopper ShapeDiver
1

I’m using Grasshopper’s Text Tag (not 3D) component to show model information. The setup is a Curve param for an arrow/marker and a Point for the position of the text. This is then fed to a Move component that feeds a Text Tag (Note: I have one Text Tag that receives Point info directly and the behaviour is the same).

When my model is viewed at https://app.shapediver.com it works as expected. When I view my model using the API through React, the positioning of the text is consistently off on the Z axis. See below:

image
image1333×750 67.8 KB

2

I’m not quite sure what went wrong there. Could you post a minimal definition replicating the behaviour?

I just tested it with direct embedding and it worked fine for me:

image
image1421×703 118 KB

image
image1636×611 78.1 KB

test tag.gh (25.6 KB)

3

The attached definition replicated the behaviour. “Under the curve” is positioned above the curve when viewed via the API on my localhost.

SD-text-tag-position-issue.gh (3.8 KB)

4

The 2D text tags in the viewer are html elements in an overlay on top of the 3D canvas. Therefore, in order to position correctly, make sure you include the css file in your header:

<link rel='stylesheet' type='text/css' href='https://viewer.shapediver.com/v2/2.23.0/sdv.css'>

If that doesn’t solve your issue, make sure your css stylesheet does not override any additional styles associated with ShapeDiver (by using !important for example).

I have created a page with your model without issues.

5

The only CSS being loaded on the page is sdv.css

I looked into it a bit and the issue is with the positioning of the HTML div element that contains the Text Tag info (this is being done via javascript). Looks like this:

<div class="shapediver-domElement" style="left: {someNumber}px; top: {someNumber}px;">
</div>

As it turns out, the problem seems to be between the API and the advised React.js implementation shown here: https://codepen.io/ShapeDiver/pen/oNvoBxb

In the codepen, JS line 58 reads:

<div ref={this.containerSD} style={{width: '100%', height: '600px'}} />.

At runtime there’s an issue with both the width and height of the canvas container:

<canvas id="sdv-container-viewport-canvas" width="{doubleScreenWidth}" height="1200" style="width: {screenWidth}px; height: 600px; cursor: auto;"></canvas>

I’m using React v.16.13.1

6

I’ve solved the issue by adding “shapediver-viewport-flex landscape” to the class attribute of the HTML element used as the container in ReactDOM.render().

1 Like
7

That’s great, thanks for sharing your findings.