Cirq icon indicating copy to clipboard operation
Cirq copied to clipboard

Add resize tab to cirq web 3d viewer

Open Strilanc opened this issue 3 years ago • 1 comments

If you put the canvas inside a div with resize: both; overflow: auto, this will add a little 'grabby tab' to the bottom right of the viewer that the user can drag around to change its size. This fixes a problem where the viewer is too small or too large and the user can't do anything about it. And you can emphasize the viewing size by adding a border and giving it a bit of a margin.

    <div id="viewer" style="border: 1px solid black; margin-bottom: 50px; width: {width}px; 
             resize: both; overflow: auto">
        <canvas [...]</canvas>
    </div>

Strilanc avatar Apr 27 '22 23:04 Strilanc