[Canvas] Feat: Zoom In/Out #38832

cqliu1 · 2019-06-12T20:06:43Z

Summary

Closes #27123.
This adds the ability to zoom in/out of the work space in Canvas.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-06-12T21:01:58Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-13T21:23:54Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

w33ble · 2019-06-13T22:13:03Z

x-pack/plugins/canvas/public/state/initial_state.js

@@ -14,6 +14,7 @@ export const getInitialState = path => {
    assets: {}, // assets end up here
    transient: {
      canUserWrite: capabilities.get().canvas.save,
+      zoomLevel: 1,


zoomScale?

w33ble · 2019-06-13T22:15:20Z

x-pack/plugins/canvas/common/lib/constants.ts

@@ -25,3 +25,6 @@ export const DEFAULT_WORKPAD_CSS = '.canvasPage {\n\n}';
 export const DEFAULT_ELEMENT_CSS = '.canvasRenderEl{\n\n}';
 export const VALID_IMAGE_TYPES = ['gif', 'jpeg', 'png', 'svg+xml'];
 export const ASSET_MAX_SIZE = 25000;
+export const ZOOM_LEVELS = [0.5, 0.75, 0.9, 1, 1.5, 2, 3, 4];


[0.2, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] Allows 5K resolution on 1K screens, FWIW.

ryankeairns · 2019-06-13T22:17:47Z

@cqliu1 design PR to delineate top and side sections, so that the page will appear to go under them as you zoom in or scroll around:

Check out this design PR - https://github.com/cqliu1/kibana/pull/9

monfera · 2019-06-14T06:08:37Z

retest

elasticmachine · 2019-06-14T07:04:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

andreadelrio · 2019-06-14T18:36:11Z

@cqliu1 what do you think of this?

elasticmachine · 2019-06-17T18:10:06Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-17T20:18:34Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cqliu1 · 2019-06-17T20:39:43Z

@cqliu1 what do you think of this?

It looks good! I think I'm going to leave the keyboard shortcuts off the menu item for now though. I've talked with @ryankeairns about adding the shortcuts to context menu items so that they align on the right, but I don't think it's possible to add them that way yet.

cqliu1 · 2019-06-18T05:08:07Z

@andreadelrio

I added the context menu for the zoom actions. I added a divider border per @ryankeairns request.

elasticmachine · 2019-06-18T06:13:56Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

ryankeairns · 2019-06-19T14:47:16Z

@cqliu1 the zoom icons have been merged on the EUI side, so we'll just have to wait for the next EUI build and subsequent Kibana update.

In the meantime, we could try out the icons if you'd like to store the SVGs in Kibana (EuiIcon now accepts a ref to an SVG file) and later remove them once master is updated. Here are the files:

🗄:arrow_down: zoom-icons.zip

Preview

cqliu1 · 2019-06-19T20:04:20Z

@ryankeairns I'm okay with waiting for the next EUI update as long as it gets into to 7.3.0 before FF.

elasticmachine · 2019-06-19T20:54:03Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

monfera

Code looks good to me so far 💪 Will approve assuming green CI, the UI steps you discussed with Andrea and Ryan and remaining checklist items, glad to take another look on Friday or next week if the code changes significantly

monfera · 2019-06-14T06:14:34Z

x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/event_handlers.js

-    x: clientX - left,
-    y: clientY - top,
+    x: (clientX - left) * (1 / zoomScale),
+    y: (clientY - top) * (1 / zoomScale),


I think the JIT will optimize it away in any case, we can also do (clientX - left) / zoomScale to save a few bytes

ryankeairns · 2019-06-20T19:38:30Z

The plan is to start a new EUI release tomorrow (6/21)... stay tuned 📺

elasticmachine · 2019-06-25T18:38:46Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

ryankeairns

👍 LGTM. This is great, nice work! We can circle back to swap out the icon later.

elasticmachine · 2019-06-25T20:13:48Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* Added zoomScale to transient state * Added scaling to workpad * Fixed transform origin * Fixed mouse coordinate calculation * Unscaled BorderResizeHandle and RotationHandle * Added keyboard shortcuts * Fixed keyboard shortcuts reference * Updated tests for getPrettyShortcut * Added tooltip shortcuts * Added preventDefault to workpad shortcuts * define interface sections * Refactor key handler * Added zoom context menu * Updated zoom levels * Fixed ts errors and tests * Simplified mouse coordinate calculation * Moved new files to x-pack/legacy/plugins/canvas * Added TODOs to change icons

ambigus9 · 2019-06-27T22:24:43Z

Excelent!!!

elasticmachine · 2019-06-27T23:12:24Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

cqliu1 force-pushed the feat/zoom-in-out branch from a070ed8 to 00c6a83 Compare June 13, 2019 19:35

w33ble reviewed Jun 13, 2019

View reviewed changes

cqliu1 mentioned this pull request Jun 17, 2019

[Canvas] Add more workpad size presets #39105

Closed

cqliu1 force-pushed the feat/zoom-in-out branch from 5654c67 to 354d03a Compare June 17, 2019 19:06

cqliu1 force-pushed the feat/zoom-in-out branch from 354d03a to 8bb6717 Compare June 18, 2019 05:08

cqliu1 and others added 12 commits June 19, 2019 12:56

Added zoomScale to transient state

ad2df92

Added scaling to workpad

3d65fa8

Fixed transform origin

5b8ff05

Fixed mouse coordinate calculation

224de56

Unscaled BorderResizeHandle and RotationHandle

f9f20c1

Added keyboard shortcuts

6848420

Fixed keyboard shortcuts reference

1494a86

Updated tests for getPrettyShortcut

fe74b4d

Added tooltip shortcuts

88d1e21

define interface sections

773c70f

Added preventDefault to workpad shortcuts

5dfd6a2

Refactor key handler

1abafb8

cqliu1 added v7.3.0 v8.0.0 loe:medium Medium Level of Effort labels Jun 19, 2019

cqliu1 marked this pull request as ready for review June 19, 2019 20:04

cqliu1 requested review from a team as code owners June 19, 2019 20:04

cqliu1 requested review from ryankeairns and monfera June 19, 2019 20:05

monfera reviewed Jun 20, 2019

View reviewed changes

cqliu1 added 3 commits June 25, 2019 10:45

Merge branch 'master' into feat/zoom-in-out

a236dee

Merge branch 'master' into feat/zoom-in-out

3758174

Simplified mouse coordinate calculation

b94e59f

cqliu1 added the review label Jun 25, 2019

ryankeairns approved these changes Jun 25, 2019

View reviewed changes

cqliu1 added 2 commits June 25, 2019 12:03

Moved new files to x-pack/legacy/plugins/canvas

9eeef5f

Added TODOs to change icons

4b44117

cqliu1 merged commit 57869c6 into elastic:master Jun 25, 2019

cqliu1 deleted the feat/zoom-in-out branch June 25, 2019 20:15

cqliu1 mentioned this pull request Jun 25, 2019

[7.x] [Canvas] Feat: Zoom In/Out (#38832) #39621

Merged

cqliu1 mentioned this pull request Jun 27, 2019

[Canvas] Ability to zoom in/out on a workpad #27123

Closed

cqliu1 mentioned this pull request Jul 16, 2019

[Canvas] Fixes toggle between edit mode/read only mode #41293

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Canvas] Feat: Zoom In/Out #38832

[Canvas] Feat: Zoom In/Out #38832

cqliu1 commented Jun 12, 2019 •

edited

Loading

elasticmachine commented Jun 12, 2019

elasticmachine commented Jun 13, 2019

w33ble Jun 13, 2019

w33ble Jun 13, 2019

ryankeairns commented Jun 13, 2019 •

edited

Loading

monfera commented Jun 14, 2019

elasticmachine commented Jun 14, 2019

andreadelrio commented Jun 14, 2019

elasticmachine commented Jun 17, 2019

elasticmachine commented Jun 17, 2019

cqliu1 commented Jun 17, 2019 •

edited

Loading

cqliu1 commented Jun 18, 2019

elasticmachine commented Jun 18, 2019

ryankeairns commented Jun 19, 2019

cqliu1 commented Jun 19, 2019

elasticmachine commented Jun 19, 2019

monfera left a comment

monfera Jun 14, 2019

ryankeairns commented Jun 20, 2019

elasticmachine commented Jun 25, 2019

ryankeairns left a comment

elasticmachine commented Jun 25, 2019

ambigus9 commented Jun 27, 2019

elasticmachine commented Jun 27, 2019

[Canvas] Feat: Zoom In/Out #38832

[Canvas] Feat: Zoom In/Out #38832

Conversation

cqliu1 commented Jun 12, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Jun 12, 2019

💚 Build Succeeded

elasticmachine commented Jun 13, 2019

💔 Build Failed

w33ble Jun 13, 2019

Choose a reason for hiding this comment

w33ble Jun 13, 2019

Choose a reason for hiding this comment

ryankeairns commented Jun 13, 2019 • edited Loading

monfera commented Jun 14, 2019

elasticmachine commented Jun 14, 2019

💔 Build Failed

andreadelrio commented Jun 14, 2019

elasticmachine commented Jun 17, 2019

💔 Build Failed

elasticmachine commented Jun 17, 2019

💔 Build Failed

cqliu1 commented Jun 17, 2019 • edited Loading

cqliu1 commented Jun 18, 2019

elasticmachine commented Jun 18, 2019

💔 Build Failed

ryankeairns commented Jun 19, 2019

Preview

cqliu1 commented Jun 19, 2019

elasticmachine commented Jun 19, 2019

💔 Build Failed

monfera left a comment

Choose a reason for hiding this comment

monfera Jun 14, 2019

Choose a reason for hiding this comment

ryankeairns commented Jun 20, 2019

elasticmachine commented Jun 25, 2019

💔 Build Failed

ryankeairns left a comment

Choose a reason for hiding this comment

elasticmachine commented Jun 25, 2019

💚 Build Succeeded

ambigus9 commented Jun 27, 2019

elasticmachine commented Jun 27, 2019

💚 Build Succeeded

cqliu1 commented Jun 12, 2019 •

edited

Loading

ryankeairns commented Jun 13, 2019 •

edited

Loading

cqliu1 commented Jun 17, 2019 •

edited

Loading