Merge pull request box#1 from benjamin-shen/add-edit-icon-component

Add edit icon component

src/lib/viewers/controls/edit/EditControl.scss

@@ -0,0 +1,5 @@
+@import '../styles';
+
+.bp-EditControl {
+    @include bp-Control;
+}

src/lib/viewers/controls/edit/EditControl.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import IconEdit24 from '../icons/IconEdit24';
+import './EditControl.scss';
+
+export type Props = {
+    onEditImageClick: () => void;
+};
+
+export default function EditControl({ onEditImageClick }: Props): JSX.Element {
+    return (
+        <button className="bp-EditControl" onClick={onEditImageClick} title={__('edit_image')} type="button">
+            <IconEdit24 />
+        </button>
+    );
+}

src/lib/viewers/controls/edit/index.ts

@@ -0,0 +1,2 @@
+export * from './EditControl';
+export { default } from './EditControl';

src/lib/viewers/controls/icons/IconEdit24.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+function IconEdit24(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg fill="#fff" focusable="false" height={24} viewBox="2 1 20 20" width={24} {...props}>
+            <path d="M21.73682,3.751,19.31689,1.33105a.99964.99964,0,0,0-1.41406,0L13.32275,5.91113a1.00013,1.00013,0,0,0-.293.707V9.03809a1.00005,1.00005,0,0,0,1,1H16.4502a1.00014,1.00014,0,0,0,.707-.293L21.73682,5.165A.99964.99964,0,0,0,21.73682,3.751ZM16.03613,8.03809H15.02979V7.03223l3.58007-3.58008L19.61572,4.458ZM19,11a1,1,0,0,0-1,1v2.3916l-1.48047-1.48047a2.78039,2.78039,0,0,0-3.92822,0l-.698.698L9.40723,11.123a2.777,2.777,0,0,0-3.92432,0L4,12.606V7A1.0013,1.0013,0,0,1,5,6h6a1,1,0,0,0,0-2H5A3.00328,3.00328,0,0,0,2,7V19a3.00328,3.00328,0,0,0,3,3H17a3.00328,3.00328,0,0,0,3-3V12A1,1,0,0,0,19,11ZM5,20a1.0013,1.0013,0,0,1-1-1V15.43408l2.897-2.897a.79926.79926,0,0,1,1.09619,0l3.168,3.16711c.00849.00916.0116.02179.02045.03064L15.44714,20Zm13-1a.97137.97137,0,0,1-.17877.53705l-4.51386-4.51386.698-.698a.77979.77979,0,0,1,1.1001,0L18,17.21973Z" />
+        </svg>
+    );
+}
+
+export default IconEdit24;

src/lib/viewers/image/ImageControls.tsx

@@ -4,11 +4,13 @@ import ControlsBar, { ControlsBarGroup } from '../controls/controls-bar';
 import DrawingControls, { Props as DrawingControlsProps } from '../controls/annotations/DrawingControls';
 import ExperiencesProvider, { Props as ExperiencesProviderProps } from '../controls/experiences';
 import FullscreenToggle, { Props as FullscreenToggleProps } from '../controls/fullscreen';
+import EditControl, { Props as EditControlProps } from '../controls/edit';
 import RotateControl, { Props as RotateControlProps } from '../controls/rotate';
 import ZoomControls, { Props as ZoomControlsProps } from '../controls/zoom';
 
 export type Props = AnnotationsControlsProps &
     DrawingControlsProps &
+    EditControlProps &
     ExperiencesProviderProps &
     FullscreenToggleProps &
     RotateControlProps &
@@ -24,6 +26,7 @@ export default function ImageControls({
     onAnnotationColorChange,
     onAnnotationModeClick,
     onAnnotationModeEscape,
+    onEditImageClick,
     onFullscreenToggle,
     onRotateLeft,
     onZoomIn,
@@ -48,6 +51,7 @@ export default function ImageControls({
                         onAnnotationModeClick={onAnnotationModeClick}
                         onAnnotationModeEscape={onAnnotationModeEscape}
                     />
+                    <EditControl onEditImageClick={onEditImageClick} />
                 </ControlsBarGroup>
             </ControlsBar>
             <ControlsBar>

src/lib/viewers/image/ImageViewer.js

@@ -29,6 +29,7 @@ class ImageViewer extends ImageBaseViewer {
         this.handleAnnotationControlsClick = this.handleAnnotationControlsClick.bind(this);
         this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
         this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
+        this.handleEditImageClick = this.handleEditImageClick.bind(this);
         this.handleImageDownloadError = this.handleImageDownloadError.bind(this);
         this.handleZoomEvent = this.handleZoomEvent.bind(this);
         this.rotateLeft = this.rotateLeft.bind(this);
@@ -400,6 +401,7 @@ class ImageViewer extends ImageBaseViewer {
                 onAnnotationColorChange={this.handleAnnotationColorChange}
                 onAnnotationModeClick={this.handleAnnotationControlsClick}
                 onAnnotationModeEscape={this.handleAnnotationControlsEscape}
+                onEditImageClick={this.handleEditImageClick}
                 onFullscreenToggle={this.toggleFullscreen}
                 onRotateLeft={this.rotateLeft}
                 onZoomIn={this.zoomIn}
@@ -570,6 +572,30 @@ class ImageViewer extends ImageBaseViewer {
         }
     }
 
+    /**
+     * Handler for edit image button click event.
+     *
+     * @private
+     * @return {void}
+     */
+    handleEditImageClick() {
+        this.currentRotationAngle = ((this.currentRotationAngle + 90) % 3600) % 360;
+        this.imageEl.setAttribute('data-rotation-angle', this.currentRotationAngle);
+        this.imageEl.style.transform = `rotate(${this.currentRotationAngle}deg)`;
+        this.emit('rotate');
+
+        // Disallow creating annotations on rotated images
+        if (this.currentRotationAngle === 0) {
+            this.enableAnnotationControls();
+        } else {
+            this.disableAnnotationControls();
+        }
+
+        // Re-adjust image position after rotation
+        this.handleOrientationChange();
+        this.setScale(this.imageEl.offsetwidth, this.imageEl.offsetHeight);
+    }
+
     updateDiscoverabilityResinTag() {
         if (!this.containerEl) {
             return;