@pairbo/ui-kit 0.3.32 → 0.4.1

package/dist/src/components/handwritten-canvas/handwritten-canvas.component.d.ts

@@ -1,6 +1,7 @@
 import { CSSResultGroup } from 'lit';
 import { default as PairboElement } from '../../internal/pairbo-element.js';
 import { Canvas, FabricImage, Rect, Group, Textbox } from 'fabric';
+type DisplayType = "default" | "fullSize";
 type Size = {
     width: number;
     height: number;
@@ -32,6 +33,7 @@ export default class PboHandwrittenCanvas extends PairboElement {
     imageWidth: number | null;
     imageLeft: number | null;
     imageTop: number | null;
+    displayType: DisplayType;
     baseCanvas: HTMLCanvasElement;
     canvas: Canvas;
     backgroundFabImg: FabricImage | undefined;
@@ -41,21 +43,53 @@ export default class PboHandwrittenCanvas extends PairboElement {
     handwrittenImage: FabricImage | undefined;
     clipMaskOverlay: Group | undefined;
     areaSize: Size;
-    handleBackgroundImageUrlChange(): Promise<void>;
-    handleHandwrittenImageUrlChange(_: string | undefined, newValue: string | undefined): Promise<void>;
-    createClipMaskOverlay(): Group;
-    updateProcessedImgAreaPosition(): void;
     private _dimensionsUpdateTimeout;
-    handleHandwrittenImageDimensionsChange(oldValue: number | null, newValue: number | null): void;
-    applyHandwrittenImageDimensions(): void;
-    setHandwrittenImageDimensions(dimensions: {
-        top?: number;
-        left?: number;
-        height?: number;
-        width?: number;
-    }): void;
+    private readonly DEFAULT_BACKGROUND_URL;
+    private readonly AREA_PERCENTAGES;
+    private readonly HANDWRITTEN_IMAGE_STYLES;
+    private readonly CONTROL_VISIBILITY;
+    handleBackgroundImageUrlChange(): Promise<void>;
+    handleHandwrittenImageUrlChange(): Promise<void>;
+    handleHandwrittenImageDimensionsChange(): void;
     firstUpdated(): void;
-    appendBackgroundImageToCanvas(url: string, callback?: Function): Promise<void>;
     render(): import('lit-html').TemplateResult<1>;
+    private initializeCanvas;
+    private setupEventListeners;
+    private loadInitialContent;
+    private removeBackgroundImage;
+    private loadBackgroundImage;
+    private appendBackgroundImageToCanvas;
+    private removeHandwrittenImage;
+    private loadHandwrittenImage;
+    private configureHandwrittenImage;
+    private calculateImageScale;
+    private calculateCornerSize;
+    private calculateTouchCornerSize;
+    private createClipRect;
+    private updateHandwrittenImageDimensions;
+    private setupHandwrittenImageEvents;
+    private handleImageScaling;
+    private handleImageMoving;
+    private handleImageSelected;
+    private handleImageDeselected;
+    private showSelectionUI;
+    private hideSelectionUI;
+    private createClipMaskOverlay;
+    private createMaskRect;
+    updateClipMaskOverlay(): void;
+    resetHandwrittenImagePosition(): void;
+    private updateProcessedImgAreaPosition;
+    private getAreaPercentages;
+    private updateAreaRect;
+    private createAreaRect;
+    private debounceUpdateDimensions;
+    private applyHandwrittenImageDimensions;
+    private isValidForDimensionUpdate;
+    private setHandwrittenImageDimensions;
+    private hasValidDimensions;
+    private updateDimensionIfChanged;
+    private emitDimensionsChangedEvent;
+    private createUploadingText;
+    private handleImageProcessing;
 }
 export {};

package/dist/src/components/type-canvas/type-canvas.component.d.ts

@@ -8,6 +8,14 @@ type Position = {
     left: number;
     top: number;
 };
+type DisplayType = "default" | "fullSize";
+type FontConfig = {
+    family: string;
+    label: string;
+    fontSizePt: number;
+    lineHeight: number;
+    maxLines: Record<DisplayType, number>;
+};
 /**
  * @summary Short summary of the component's intended use.
  * @status experimental
@@ -30,6 +38,7 @@ export default class PboTypeCanvas extends PairboElement {
     font: string;
     color: string;
     alignment: "left" | "center" | "right";
+    displayType: DisplayType;
     canvas: HTMLCanvasElement;
     canvasContainer: HTMLDivElement;
     scale: number;
@@ -39,12 +48,29 @@ export default class PboTypeCanvas extends PairboElement {
     imgLoading: boolean;
     backgroundImage: HTMLImageElement | undefined;
     resizeObserver: ResizeObserver | undefined;
+    dpi: number;
+    fontConfig: FontConfig;
+    processedMessage: string;
     handleBackgroundImageUrlChange(): Promise<void>;
     handleBackgroundImageChange(): void;
+    handleProcessedMessageChange(): void;
+    private debounceTimer;
+    protected inchToPixel(inch: number, dpi: number): number;
+    protected ptToInch(pt: number): number;
     protected firstUpdated(): void;
     protected updated(props: PropertyValues): void;
     getMaxStringLength(ctx: CanvasRenderingContext2D, text: string, width: number): number;
-    wrapText(ctx: CanvasRenderingContext2D, message: string, areaPosition: Position, areaSize: Size, maxLineSize: number, alignment: "center" | "left" | "right"): void;
+    wrapText({ ctx, message, areaPosition, areaSize, maxLineSize, alignment, lineHeight, fontSizePt, verticalAlignment, }: {
+        ctx: CanvasRenderingContext2D;
+        message: string;
+        areaPosition: Position;
+        areaSize: Size;
+        maxLineSize: number;
+        alignment: "center" | "left" | "right";
+        fontSizePt: number;
+        lineHeight?: number;
+        verticalAlignment?: "top" | "middle" | "bottom";
+    }): void;
     /**
      * Updates the position and size of the text area based on the canvas dimensions.
      */

package/dist/src/components/type-form/type-form.component.d.ts

@@ -60,10 +60,14 @@ export default class PboTypeForm extends PairboElement {
         message: string;
     };
     wrappedSubmitTypeForm: SubmitTypeForm;
+    processedMessage: string;
+    maxChars: 223 | 600;
+    handleCardChange(): void;
     updateWrappedSubmitTypeForm(): void;
     protected firstUpdated(): void;
     get formData(): TypeFormData;
     private handleFormChange;
+    private handleTypeCanvasProcessed;
     hostConnected(): void;
     hostDisconnected(): void;
     submitFormHandler(e: SubmitEvent): void;

package/dist/src/events/pbo-type-canvas-processed.d.ts

@@ -0,0 +1,8 @@
+export type PboTypeCanvasProcessedEvent = CustomEvent<{
+    message: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        "pbo-type-canvas-processed": PboTypeCanvasProcessedEvent;
+    }
+}