zircleUI / zircleUI

🚀 zircle-ui is a frontend library to develop zoomable user interfaces.

Home Page:https://zircleui.github.io/docs/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Blank Canvas on Refresh

NiharikaPatel opened this issue · comments

I'm using Zircle on the mixed mode and the canvas is within a container, However, on refreshing the browser the canvas appears to be the entire viewport and the Zview disappears.

Hi @NiharikaPatel! Could you provide a codepen to see the issue?

@NiharikaPatel, when you resize the browser window does the problem persist?

I couldn't see your video here, maybe you can attach an animated gif on this thread. However, I found a bug related to your issue. I'll fix tomorrow morning (Canada time).

Please update zircle to v.1.2.1. There was an error in the mixed mode that prevented zircle from taking reference to the size of the container when the browser was refreshed.

You don't have to make any change in your code for this bug fix. There is no attached image... I think you should add it trough Github website.

Maybe the problem is that you have defined a container outside the instance of vue (I mean outside the div#app). Here there is a fork of your jsfiddle https://jsfiddle.net/tinchox5/37mr5324/ (I added a border style to see the canvas container)

You should use z-canvas as container. You can add an inline style (eg: style="width: 50%") or create a class for z-canvas, like:

<div id="app">
  <z-canvas :views='$options.components' class="zircle">
  </z-canvas>
</div>
<style>
.zircle {
  width: 50% !important; 
  height:100% !important; 
  border: 2px solid red;
}
</style>

If you use a class you need to add !important on width and height properties to overrride the initial config.

There is no file attached. You need to drag and drop the image via Github website

This issue was not related to Zircle, problem maybe related to the node server.