Merge branch 'master' into undo-origin-panel-update

x-pack/plugins/canvas/public/components/layout_annotations/alignment_guide.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+  height: number;
+  transformMatrix: TransformMatrix3d;
+  width: number;
+}
+
+export const AlignmentGuide: FC<Props> = ({ transformMatrix, width, height }) => (
+  <div
+    className="canvasAlignmentGuide canvasInteractable canvasLayoutAnnotation"
+    style={{
+      background: 'magenta',
+      height,
+      marginLeft: -width / 2,
+      marginTop: -height / 2,
+      position: 'absolute',
+      transform: matrixToCSS(transformMatrix),
+      width,
+    }}
+  />
+);
+
+AlignmentGuide.propTypes = {
+  height: PropTypes.number.isRequired,
+  transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+  width: PropTypes.number.isRequired,
+};

x-pack/plugins/canvas/public/components/layout_annotations/border_connection.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+  height: number;
+  transformMatrix: TransformMatrix3d;
+  width: number;
+}
+
+export const BorderConnection: FC<Props> = ({ transformMatrix, width, height }) => (
+  <div
+    className="canvasBorderConnection canvasLayoutAnnotation"
+    style={{
+      height,
+      marginLeft: -width / 2,
+      marginTop: -height / 2,
+      position: 'absolute',
+      transform: matrixToCSS(transformMatrix),
+      width,
+    }}
+  />
+);
+
+BorderConnection.propTypes = {
+  height: PropTypes.number.isRequired,
+  transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+  width: PropTypes.number.isRequired,
+};

x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js → x-pack/plugins/canvas/public/components/layout_annotations/border_resize_handle.tsx

@@ -4,11 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
 
-export const BorderResizeHandle = ({ transformMatrix, zoomScale }) => (
+interface Props {
+  transformMatrix: TransformMatrix3d;
+  zoomScale?: number;
+}
+
+export const BorderResizeHandle: FC<Props> = ({ transformMatrix, zoomScale = 1 }) => (
   <div
     className="canvasBorderResizeHandle canvasLayoutAnnotation"
     style={{
@@ -19,4 +25,5 @@ export const BorderResizeHandle = ({ transformMatrix, zoomScale }) => (
 
 BorderResizeHandle.propTypes = {
   transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+  zoomScale: PropTypes.number,
 };

x-pack/plugins/canvas/public/components/layout_annotations/dragbox_annotation.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+  height: number;
+  transformMatrix: TransformMatrix3d;
+  width: number;
+}
+
+export const DragBoxAnnotation: FC<Props> = ({ transformMatrix, width, height }) => (
+  <div
+    className="canvasDragBoxAnnotation canvasLayoutAnnotation"
+    style={{
+      height,
+      marginLeft: -width / 2,
+      marginTop: -height / 2,
+      transform: matrixToCSS(transformMatrix),
+      width,
+    }}
+  />
+);
+
+DragBoxAnnotation.propTypes = {
+  transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+};

x-pack/plugins/canvas/public/components/hover_annotation/hover_annotation.js → x-pack/plugins/canvas/public/components/layout_annotations/hover_annotation.tsx

@@ -4,23 +4,32 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
 
-export const HoverAnnotation = ({ transformMatrix, width, height }) => {
-  const newStyle = {
-    width,
-    height,
-    marginLeft: -width / 2,
-    marginTop: -height / 2,
-    transform: matrixToCSS(transformMatrix),
-  };
-  return <div className="canvasHoverAnnotation canvasLayoutAnnotation" style={newStyle} />;
-};
+interface Props {
+  height: number;
+  transformMatrix: TransformMatrix3d;
+  width: number;
+}
+
+export const HoverAnnotation: FC<Props> = ({ transformMatrix, width, height }) => (
+  <div
+    className="canvasHoverAnnotation canvasLayoutAnnotation"
+    style={{
+      width,
+      height,
+      marginLeft: -width / 2,
+      marginTop: -height / 2,
+      transform: matrixToCSS(transformMatrix),
+    }}
+  />
+);
 
 HoverAnnotation.propTypes = {
+  height: PropTypes.number.isRequired,
   transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
   width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
 };

x-pack/plugins/canvas/public/components/layout_annotations/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { AlignmentGuide } from './alignment_guide';
+export { DragBoxAnnotation } from './dragbox_annotation';
+export { HoverAnnotation } from './hover_annotation';
+export { TooltipAnnotation } from './tooltip_annotation';
+export { RotationHandle } from './rotation_handle';
+export { BorderConnection } from './border_connection';
+export { BorderResizeHandle } from './border_resize_handle';