Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Zoom in and out the generated diagram #18

Closed
ignacy130 opened this issue Apr 3, 2017 · 11 comments
Closed

Zoom in and out the generated diagram #18

ignacy130 opened this issue Apr 3, 2017 · 11 comments
Labels
enhancement question

Comments

@ignacy130
Copy link

I read the comment, but I think that it would be a great feature as well.

  1. To check whether the diagram is correct without generating it.
  2. I use VS Code as viewer of the diagrams and don't want to generate them, just browse via the editor and generator.

Maybe there is a way? :) Unfortunately, I use VS Code for a few days now and cannot even suggest another extension where something similar works.
@qjebbs
Copy link
Owner

qjebbs commented Apr 3, 2017

To tell you the truth, I've been tried, but it does not work. If anyone has any idea will be appreciated.

@ghost
Copy link

ghost commented Apr 13, 2017

The preview pane is just an html layout, right? Can the zoom controls not be implemented via html + css? Or perhaps integrate some library like this one:
https://github.com/timmywil/jquery.panzoom

@qjebbs
Copy link
Owner

qjebbs commented Apr 13, 2017

jquery.panzoom need jquery, which is JavaScript, which is disabled in preview. I don't know a way only via html+css, and I'm not good at it. If anyone does, and he / she wrote me a page, will be appreciated.

https://github.com/qjebbs/vscode-plantuml/blob/develop/templates/preview.html

@qjebbs
Copy link
Owner

qjebbs commented Apr 13, 2017

But even zoom is implemented, it comes with other problems, how about preview page reloaded after you zoomed in? Zoom status will be lost...
The only way to update preview is reload the page, and I cannot replace part of it.

@ghost
Copy link

ghost commented Apr 13, 2017

I tried this html + css solution: https://codepen.io/Remedy/pen/ZYJrpp
It does a zoom on hover as expected, but I think to achieve proper zoom and pan type control, you'll need events -- I can't see a non-javascript solution in preview tbh.

@ghost
Copy link

ghost commented Apr 13, 2017

perhaps a new pane is needed instead. When preview is loaded a smaller window docked beneath it can track cursor by X-Y in preview and display the blown-up portion?

@qjebbs
Copy link
Owner

qjebbs commented Apr 13, 2017 •
edited
Loading

Hmm...I don't know a pane provided by vscode can do it. Or do you mean by interact with an app outside vscode, I think it's too ugly to use, and complex.

@ghost
Copy link

ghost commented Apr 13, 2017

You don't want to introduce external apps and dependencies... messy. The cleanest solution would be the jquery/js route. With that disabled in the html preview, this becomes a nice to have feature which may or may not realistically be realized.

I'll look at putting together some pure css options so you can determine if it's a viable alternative.

@qjebbs
Copy link
Owner

qjebbs commented Apr 13, 2017

Thanks, looking forward your results.

@ghost
Copy link

ghost commented Apr 13, 2017

html + css only is not going to do the job. Essentially all we can do with just those 2 is 'grow' the image within a static frame, or shift and align it respectively with an outer div.

Because js is not possible, what we actually need instead is a parent set of controls that apply zoom and scrolling to the html preview as if it were a image loaded into a container. If the previewed content is an html page, the outer pane must be some kind of browser control' -- when you change the splitter position, the content auto-fits to pane, when you move the preview to its own tab, the content resizes to fit the entire pane; this all indicates to me there must be a way to plumb into the zoom level of the 'browser'.

That's what we need to investigate, I think.

@qjebbs
Copy link
Owner

qjebbs commented Apr 14, 2017 •
edited
Loading

Good news, we can enable JS by Content-Security-Policy, like:

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-123456';">
</head>
<body style="text-align: center; background-color: #fff;">
    <div style="margin:1em;">
        <img src="${image}" alt="">
    </div>
    <script nonce="123456" src="file:///path/to/preview.js"></script>
</body>

</html>

@qjebbs qjebbs closed this as completed in 2df17f7 Apr 15, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ignacy130 @qjebbs