feat: more options to shape text

Author: peterpeterparker

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>;
 
@@ -249,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 {
@@ -393,7 +397,7 @@ export class AppActionsElement {
   }
 
   private async clone() {
-    if (this.shape) {
+    if (this.shape !== undefined) {
       await this.cloneShape();
     } else {
       await this.cloneSlide();
@@ -407,7 +411,7 @@ export class AppActionsElement {
         return;
       }
 
-      if (store.state.deckBusy || !this.shape) {
+      if (store.state.deckBusy || this.shape === undefined) {
         resolve();
         return;
       }
@@ -979,7 +983,7 @@ 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,
@@ -1053,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}>
@@ -1099,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}>

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

@@ -38,6 +38,9 @@ export class AppSelectTargetElement {
   @Prop()
   image: boolean = false;
 
+  @Prop()
+  shape: boolean = false;
+
   @Event()
   applyTo: EventEmitter<TargetElement>;
 
@@ -142,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 {

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';
 

studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx

@@ -35,7 +35,7 @@ export class AppElementStyle {
   math: boolean = false;
 
   @Prop()
-  shape: boolean = false;
+  shape: 'shape' | 'text' | undefined = undefined;
 
   @Prop()
   image: boolean = false;
@@ -164,8 +164,8 @@ export class AppElementStyle {
   }
 
   private renderSelectTarget() {
-    const elementTarget: boolean = !this.slide && !this.shape && !this.image;
-    const transition: boolean = !this.slide && !this.code && !this.math && !this.shape && !this.demo;
+    const elementTarget: boolean = !this.slide && this.shape !== 'shape' && !this.image;
+    const transition: boolean = !this.slide && !this.code && !this.math && this.shape === undefined && !this.demo;
 
     return (
       <app-select-target-element
@@ -177,6 +177,7 @@ export class AppElementStyle {
         code={this.code}
         image={this.image}
         sides={this.author || this.split}
+        shape={this.shape === 'shape'}
         transition={transition}
         onApplyTo={($event: CustomEvent<TargetElement>) => this.selectApplyToTargetElement($event)}></app-select-target-element>
     );
@@ -231,7 +232,6 @@ export class AppElementStyle {
           selectedElement={this.selectedElement}
           moreColors={this.moreColors}
           slide={this.slide}
-          shape={this.shape}
           onColorChange={() => this.emitStyleChange()}></app-color-text-background>,
       ];
     }

studio/src/app/utils/editor/align.utils.tsx

@@ -9,7 +9,7 @@ export enum TextAlign {
 
 export class AlignUtils {
   static async getAlignment(element: HTMLElement): Promise<TextAlign | undefined> {
-    if (!element || !this.isElementText(element)) {
+    if (!element || (!this.isElementText(element) && !this.isShapeText(element))) {
       return undefined;
     }
 
@@ -30,6 +30,10 @@ export class AlignUtils {
     return isRTL() ? TextAlign.RIGHT : TextAlign.LEFT;
   }
 
+  private static isShapeText(element: HTMLElement): boolean {
+    return element && element.nodeName && element.nodeName.toLowerCase() && SlotType.DRAG_RESIZE_ROTATE && element.hasAttribute('text');
+  }
+
   private static isElementText(element: HTMLElement): boolean {
     return (
       element &&

studio/src/components.d.ts

@@ -104,7 +104,6 @@ export namespace Components {
         "initCurrentColors": () => Promise<void>;
         "moreColors": boolean;
         "selectedElement": HTMLElement;
-        "shape": boolean;
         "slide": boolean;
     }
     interface AppContact {
@@ -178,7 +177,7 @@ export namespace Components {
         "imgDidChange": EventEmitter<HTMLElement>;
         "math": boolean;
         "selectedElement": HTMLElement;
-        "shape": boolean;
+        "shape": 'shape' | 'text' | undefined;
         "slide": boolean;
     }
     interface AppEmbed {
@@ -340,6 +339,7 @@ export namespace Components {
         "headerFooter": boolean;
         "image": boolean;
         "qrCode": boolean;
+        "shape": boolean;
         "sides": boolean;
         "slide": boolean;
         "textTarget": boolean;
@@ -1246,7 +1246,6 @@ declare namespace LocalJSX {
         "moreColors"?: boolean;
         "onColorChange"?: (event: CustomEvent<void>) => void;
         "selectedElement"?: HTMLElement;
-        "shape"?: boolean;
         "slide"?: boolean;
     }
     interface AppContact {
@@ -1330,7 +1329,7 @@ declare namespace LocalJSX {
         "math"?: boolean;
         "onStyleDidChange"?: (event: CustomEvent<void>) => void;
         "selectedElement"?: HTMLElement;
-        "shape"?: boolean;
+        "shape"?: 'shape' | 'text' | undefined;
         "slide"?: boolean;
     }
     interface AppEmbed {
@@ -1508,6 +1507,7 @@ declare namespace LocalJSX {
         "image"?: boolean;
         "onApplyTo"?: (event: CustomEvent<TargetElement>) => void;
         "qrCode"?: boolean;
+        "shape"?: boolean;
         "sides"?: boolean;
         "slide"?: boolean;
         "textTarget"?: boolean;