studio: floating editable text for diagrams

CHANGELOG.md

@@ -42,14 +42,15 @@ David
 ### Web Components
 
 - core: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
+- drag-resize-rotate: v1.1.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/CHANGELOG.md))
 - highlight-code: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 - social: v2.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/social/CHANGELOG.md))
 
 ### Others
 
 - gatsby-remark-highlight-code: v1.4.4 ([CHANGELOG](https://github.com/deckgo/gatsby-remark-highlight-code/blob/master/CHANGELOG.md))
 - slide-utils: v2.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md))
-- starter kit: v2.6.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-starter/blob/master/CHANGELOG.md))
+- starter kit: v2.6.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-starter/blob/master/CHANGELOG.md))
 
 <a name="1.5.0"></a>
 

docs/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - group `notes` in a single page
 - add new `header` and `footer`
+- property `text` of `@deckdeckgo/drag-resize-rotate`
 
 # 1.6.2 (2020-07-02)
 

docs/docs/components/app-components-drr/app-components-drr.md

@@ -83,12 +83,13 @@ The default slot is mandatory.
 
 This component offers the following options which could be set using attributes:
 
-| Attribute | Type                                | Default      | Description                                                                                                       |
-| --------- | ----------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------- |
-| unit      | 'percentage', 'viewport' or 'px'    | 'percentage' | The component could be use with percentage, viewport (vw/vh) or pixels (px) units. All relative to the container. |
-| resize    | boolean                             | true         | Allow or not the resize actions                                                                                   |
-| drag      | 'x-axis', 'y-axis', 'all' or 'none' | 'all'        | Allow the component to be dragged in which direction                                                              |
-| rotation  | boolean                             | true         | Allow or not the rotation of the element                                                                          |
+| Attribute | Type                                | Default      | Description                                                                                                                                                                                         |
+| --------- | ----------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| unit      | 'percentage', 'viewport' or 'px'    | 'percentage' | The component could be use with percentage, viewport (vw/vh) or pixels (px) units. All relative to the container.                                                                                   |
+| resize    | boolean                             | true         | Allow or not the resize actions                                                                                                                                                                     |
+| drag      | 'x-axis', 'y-axis', 'all' or 'none' | 'all'        | Allow the component to be dragged in which direction                                                                                                                                                |
+| rotation  | boolean                             | true         | Allow or not the rotation of the element                                                                                                                                                            |
+| text      | boolean                             | false        | To be used if your slotted element is to be defined as `contentEditable`. Useful for text edition. Note that if turns to `true`, the property `resize` is going to be set to `false` automatically. |
 
 ### Event listeners
 

docs/package.json

@@ -19,7 +19,7 @@
     "@deckdeckgo/core": "^1.1.0",
     "@deckdeckgo/deck-utils": "^2.3.1",
     "@deckdeckgo/demo": "^1.0.4",
-    "@deckdeckgo/drag-resize-rotate": "^1.0.2",
+    "@deckdeckgo/drag-resize-rotate": "^1.1.3",
     "@deckdeckgo/highlight-code": "^1.1.2",
     "@deckdeckgo/inline-editor": "^1.4.0",
     "@deckdeckgo/lazy-img": "^1.0.1",

docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx

@@ -160,6 +160,15 @@ export class AppComponentsDrr {
                 <td>true</td>
                 <td>Allow or not the rotation of the element</td>
               </tr>
+              <tr>
+                <td>text</td>
+                <td>boolean</td>
+                <td>false</td>
+                <td>
+                  To be used if your slotted element is to be defined as <code>contentEditable</code>. Useful for text edition. Note that if turns to{' '}
+                  <code>true</code>, the property <code>resize</code> is going to be set to <code>false</code> automatically.
+                </td>
+              </tr>
             </tbody>
           </table>
           <h3 id="app-components-drr-event-listeners">Event listeners</h3>

remote/package.json

@@ -19,7 +19,7 @@
     "@deckdeckgo/core": "^1.1.0",
     "@deckdeckgo/deck-utils": "^2.3.1",
     "@deckdeckgo/demo": "^1.0.4",
-    "@deckdeckgo/drag-resize-rotate": "^1.0.2",
+    "@deckdeckgo/drag-resize-rotate": "^1.1.3",
     "@deckdeckgo/highlight-code": "^1.1.2",
     "@deckdeckgo/lazy-img": "^1.0.1",
     "@deckdeckgo/math": "^1.0.1",

studio/package.json

@@ -21,7 +21,7 @@
     "@deckdeckgo/core": "^1.1.0",
     "@deckdeckgo/deck-utils": "^2.3.1",
     "@deckdeckgo/demo": "^1.0.4",
-    "@deckdeckgo/drag-resize-rotate": "^1.0.2",
+    "@deckdeckgo/drag-resize-rotate": "^1.1.3",
     "@deckdeckgo/highlight-code": "^1.1.2",
     "@deckdeckgo/inline-editor": "^1.4.0",
     "@deckdeckgo/lazy-img": "^1.0.1",

studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx

@@ -55,7 +55,7 @@ export class AppActionsElement {
   private image: boolean = false;
 
   @State()
-  private shape: boolean = false;
+  private shape: 'shape' | 'text' | undefined = undefined;
 
   @Event() private blockSlide: EventEmitter<boolean>;
 
@@ -190,10 +190,6 @@ export class AppActionsElement {
         await this.openImage();
       }
 
-      if (autoOpen && this.isSlideAspectRatioEmpty(selected)) {
-        await this.openShape();
-      }
-
       this.blockSlide.emit(!this.slide);
 
       resolve();
@@ -204,10 +200,6 @@ export class AppActionsElement {
     return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.IMG && !element.hasAttribute('img-src');
   }
 
-  private isSlideAspectRatioEmpty(element: HTMLElement): boolean {
-    return element && element.nodeName && this.slideNodeName === 'deckgo-slide-aspect-ratio' && !element.hasChildNodes();
-  }
-
   @Method()
   unSelect(): Promise<void> {
     return new Promise<void>(async (resolve) => {
@@ -257,8 +249,12 @@ export class AppActionsElement {
     return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.MATH;
   }
 
-  private isElementShape(element: HTMLElement): boolean {
-    return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.DRAG_RESIZE_ROTATE;
+  private isElementShape(element: HTMLElement): 'shape' | 'text' | undefined {
+    if (!element || !element.nodeName || element.nodeName.toLowerCase() !== SlotType.DRAG_RESIZE_ROTATE) {
+      return undefined;
+    }
+
+    return element.hasAttribute('text') ? 'text' : 'shape';
   }
 
   private isElementImage(element: HTMLElement): boolean {
@@ -401,7 +397,7 @@ export class AppActionsElement {
   }
 
   private async clone() {
-    if (this.shape) {
+    if (this.shape !== undefined) {
       await this.cloneShape();
     } else {
       await this.cloneSlide();
@@ -415,7 +411,7 @@ export class AppActionsElement {
         return;
       }
 
-      if (store.state.deckBusy || !this.shape) {
+      if (store.state.deckBusy || this.shape === undefined) {
         resolve();
         return;
       }
@@ -509,13 +505,13 @@ export class AppActionsElement {
     await popover.present();
   }
 
-  private async openShape() {
+  private async openShape(component: 'app-shape' | 'app-image-element') {
     if (!this.slide || this.slideNodeName !== 'deckgo-slide-aspect-ratio') {
       return;
     }
 
     const popover: HTMLIonPopoverElement = await popoverController.create({
-      component: 'app-shape',
+      component: component,
       componentProps: {
         selectedElement: this.selectedElement,
       },
@@ -526,13 +522,24 @@ export class AppActionsElement {
 
     popover.onWillDismiss().then(async (detail: OverlayEventDetail) => {
       if (detail.data) {
-        await this.shapeHelper.appendShape(this.selectedElement, detail.data);
+        await this.shapeHelper.appendShape(
+          this.selectedElement,
+          component === 'app-image-element'
+            ? {
+                img: detail.data,
+              }
+            : detail.data
+        );
       }
     });
 
     await popover.present();
   }
 
+  private async appendText() {
+    await this.shapeHelper.appendText(this.selectedElement);
+  }
+
   private async getImagePopover(): Promise<HTMLIonPopoverElement> {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-image-element',
@@ -976,7 +983,8 @@ export class AppActionsElement {
       component: 'app-more-element-actions',
       componentProps: {
         notes: this.slide,
-        copy: this.slide || this.shape,
+        copy: this.slide || this.shape !== undefined,
+        images: this.slideNodeName === 'deckgo-slide-aspect-ratio',
       },
       event: $event,
       mode: 'ios',
@@ -990,6 +998,8 @@ export class AppActionsElement {
           await this.clone();
         } else if (detail.data.action === MoreAction.DELETE) {
           await this.confirmDeleteElement($event);
+        } else if (detail.data.action === MoreAction.IMAGES) {
+          await this.openShape('app-image-element');
         }
       }
     });
@@ -1003,7 +1013,7 @@ export class AppActionsElement {
         <ion-buttons slot="start">
           {this.renderStyle()}
           {this.renderEdit()}
-          {this.renderShapes()}
+          {this.renderAspectRatio()}
           {this.renderImages()}
           {this.renderCodeOptions()}
           {this.renderMathOptions()}
@@ -1047,7 +1057,7 @@ export class AppActionsElement {
   }
 
   private renderCopy() {
-    const classSlide: string | undefined = `wider-devices ${this.slide || this.shape ? '' : 'hidden'}`;
+    const classSlide: string | undefined = `wider-devices ${this.slide || this.shape !== undefined ? '' : 'hidden'}`;
 
     return (
       <ion-tab-button onClick={() => this.clone()} aria-label="Copy" color="primary" mode="md" disabled={store.state.deckBusy} class={classSlide}>
@@ -1093,7 +1103,7 @@ export class AppActionsElement {
   }
 
   private renderTransform() {
-    const classToggle: string | undefined = !this.slide && !this.shape ? undefined : 'hidden';
+    const classToggle: string | undefined = !this.slide && this.shape === undefined ? undefined : 'hidden';
 
     return (
       <ion-tab-button onClick={() => this.openTransform()} aria-label="Toggle element type" color="primary" mode="md" class={classToggle}>
@@ -1103,14 +1113,27 @@ export class AppActionsElement {
     );
   }
 
-  private renderShapes() {
+  private renderAspectRatio() {
     const classSlide: string | undefined = this.slideNodeName === 'deckgo-slide-aspect-ratio' ? undefined : 'hidden';
 
     return [
-      <ion-tab-button onClick={() => this.openShape()} color="primary" aria-label="Add a shape" mode="md" class={classSlide}>
+      <ion-tab-button onClick={() => this.appendText()} color="primary" aria-label="Add a text" mode="md" class={classSlide}>
+        <ion-icon src="/assets/icons/text.svg"></ion-icon>
+        <ion-label>Add text</ion-label>
+      </ion-tab-button>,
+      <ion-tab-button onClick={() => this.openShape('app-shape')} color="primary" aria-label="Add a shape" mode="md" class={classSlide}>
         <ion-icon src="/assets/icons/ionicons/shapes.svg"></ion-icon>
         <ion-label>Add shape</ion-label>
       </ion-tab-button>,
+      <ion-tab-button
+        onClick={() => this.openShape('app-image-element')}
+        aria-label="Add an image"
+        color="primary"
+        mode="md"
+        class={`wider-devices ${classSlide}`}>
+        <ion-icon src="/assets/icons/ionicons/images.svg"></ion-icon>
+        <ion-label>Add image</ion-label>
+      </ion-tab-button>,
     ];
   }
 

studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx

@@ -36,13 +36,10 @@ export class AppSelectTargetElement {
   headerFooter: boolean = false;
 
   @Prop()
-  shapes: boolean = false;
+  image: boolean = false;
 
   @Prop()
-  images: boolean = false;
-
-  @Prop()
-  image: boolean = false;
+  shape: boolean = false;
 
   @Event()
   applyTo: EventEmitter<TargetElement>;
@@ -66,10 +63,6 @@ export class AppSelectTargetElement {
       ? TargetElement.QR_CODE
       : this.chart
       ? TargetElement.CHART
-      : this.shapes
-      ? TargetElement.SHAPES
-      : this.images
-      ? TargetElement.IMAGES
       : TargetElement.SLIDE;
 
     return (
@@ -84,8 +77,6 @@ export class AppSelectTargetElement {
         {this.renderBackground()}
         {this.renderHeaderFooter()}
         {this.renderTransition()}
-        {this.renderShapes()}
-        {this.renderImages()}
       </ion-segment>
     );
   }
@@ -154,7 +145,7 @@ export class AppSelectTargetElement {
     if (this.background) {
       return (
         <ion-segment-button value={TargetElement.BACKGROUND} mode="md">
-          <ion-label>Background</ion-label>
+          <ion-label>{this.shape ? 'Color' : 'Background'}</ion-label>
         </ion-segment-button>
       );
     } else {
@@ -209,28 +200,4 @@ export class AppSelectTargetElement {
       return undefined;
     }
   }
-
-  private renderShapes() {
-    if (this.shapes) {
-      return (
-        <ion-segment-button value={TargetElement.SHAPES} mode="md">
-          <ion-label>Shapes</ion-label>
-        </ion-segment-button>
-      );
-    } else {
-      return undefined;
-    }
-  }
-
-  private renderImages() {
-    if (this.images) {
-      return (
-        <ion-segment-button value={TargetElement.IMAGES} mode="md">
-          <ion-label>Images</ion-label>
-        </ion-segment-button>
-      );
-    } else {
-      return undefined;
-    }
-  }
 }

studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx

@@ -21,9 +21,6 @@ export class AppColorTextBackground {
   @Prop()
   deck: boolean = false;
 
-  @Prop()
-  shape: boolean = false;
-
   @Prop()
   colorType: 'text' | 'background' = 'text';