feat: add canvas pin component placeholder

src/common/command/canvas/canvas-pin-add.command.ts

@@ -0,0 +1,59 @@
+/*
+ * This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
+ * Copyright (c) 2023 Michal Szczepanski.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { OBJ_DTO_VERSION, ObjDto, ObjTypeDto } from '../../../common/model/obj.model';
+import { BrowserApi } from '../../service/browser.api.wrapper';
+import { BusMessageType } from '../../model/bus.model';
+import { ObjCanvasPinDto } from '../../model/obj-pin.model';
+import { ObjNextIdCommand } from '../obj/id/obj-next-id.command';
+import ICommand = Pinmenote.Common.ICommand;
+
+export class CanvasPinAddCommand implements ICommand<Promise<ObjDto<ObjCanvasPinDto>>> {
+  constructor(private pin: ObjCanvasPinDto) {}
+
+  async execute(): Promise<ObjDto<ObjCanvasPinDto>> {
+    const id = await new ObjNextIdCommand().execute();
+    const dt = new Date().toISOString();
+
+    // await new ObjAddIdCommand(id).execute();
+
+    const dto: ObjDto<ObjCanvasPinDto> = {
+      id,
+      type: ObjTypeDto.PageElementPin,
+      createdAt: dt,
+      updatedAt: dt,
+      data: this.pin,
+      version: OBJ_DTO_VERSION,
+      local: {
+        visible: true
+      },
+      encryption: {
+        encrypted: false
+      },
+      hashtags: []
+    };
+
+    // const key = `${ObjectStoreKeys.OBJECT_ID}:${id}`;
+
+    // await BrowserStorageWrapper.set(key, dto);
+
+    // await LinkHrefOriginStore.addHrefOriginId(this.pin.url, id);
+
+    // Send stop - iframe loads own content scripts
+    await BrowserApi.sendRuntimeMessage<undefined>({ type: BusMessageType.CONTENT_PIN_STOP });
+    return dto;
+  }
+}

src/common/model/html.model.ts

@@ -14,8 +14,8 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+import { ObjCanvasPinDto, ObjPagePinDto } from './obj-pin.model';
 import { ObjDto, ObjLinkDto } from './obj.model';
-import { ObjPagePinDto } from './obj-pin.model';
 
 export interface HtmlIntermediateData {
   cssStyles: string[];
@@ -40,7 +40,7 @@ export interface HtmlComponentFocusable {
 }
 
 export interface PageComponent {
-  object: ObjDto<ObjPagePinDto | ObjLinkDto>;
+  object: ObjDto<ObjPagePinDto | ObjLinkDto | ObjCanvasPinDto>;
   focus(goto: boolean): void;
   cleanup(): void;
   resize(): void;

src/common/model/obj-pin.model.ts

@@ -14,8 +14,8 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+import { ObjRectangleDto, ObjSizeDto } from './obj-utils.model';
 import { ObjDrawDto } from './obj-draw.model';
-import { ObjRectangleDto } from './obj-utils.model';
 import { ObjUrlDto } from './obj.model';
 
 export interface ObjPagePinDto {
@@ -30,6 +30,16 @@ export interface ObjPagePinDto {
   htmlEdit?: string;
 }
 
+export interface ObjCanvasPinDto {
+  windowSize: ObjSizeDto;
+  rect: ObjRectangleDto;
+  screenshot?: string;
+  url: ObjUrlDto;
+  draw: ObjDrawDto[];
+  value: string;
+  title: string;
+}
+
 export interface PinVideoDataDto {
   currentTime: number;
   displayTime: number;

src/content-script/command/canvas/canvas-pin-component-add.command.ts

@@ -0,0 +1,31 @@
+/*
+ * This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
+ * Copyright (c) 2023 Michal Szczepanski.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { CanvasPinComponent } from '../../components/canvas-pin.component';
+import { HtmlComponent } from '../../../common/model/html.model';
+import { ObjCanvasPinDto } from '../../../common/model/obj-pin.model';
+import { ObjDto } from '../../../common/model/obj.model';
+import { PinStore } from '../../store/pin.store';
+import ICommand = Pinmenote.Common.ICommand;
+
+export class CanvasPinComponentAddCommand implements ICommand<HtmlComponent<HTMLElement> | undefined> {
+  constructor(private dto: ObjDto<ObjCanvasPinDto>, private focus = false) {}
+  execute(): HtmlComponent<HTMLElement> | undefined {
+    const component = new CanvasPinComponent(this.dto);
+    component.render();
+    return PinStore.add(component);
+  }
+}

src/content-script/components/canvas-pin.component.ts

@@ -0,0 +1,62 @@
+/*
+ * This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
+ * Copyright (c) 2023 Michal Szczepanski.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { HtmlComponent, PageComponent } from '../../common/model/html.model';
+import { ObjCanvasPinDto } from '../../common/model/obj-pin.model';
+import { ObjDto } from '../../common/model/obj.model';
+import { applyStylesToElement } from '../../common/style.utils';
+import { fnConsoleLog } from '../../common/fn/console.fn';
+
+const elStyles = {
+  position: 'absolute',
+  'font-family': 'Roboto,serif',
+  'z-index': 'calc(9e999)',
+  display: 'flex',
+  'flex-direction': 'column',
+  'background-color': '#ff0000'
+};
+
+export class CanvasPinComponent implements HtmlComponent<void>, PageComponent {
+  readonly el = document.createElement('div');
+
+  constructor(readonly object: ObjDto<ObjCanvasPinDto>) {}
+
+  render(): void {
+    const { x, y, width, height } = this.object.data.rect;
+    this.el.style.left = `${x}px`;
+    this.el.style.top = `${y}px`;
+    this.el.style.minWidth = `${width}px`;
+    this.el.style.minHeight = `${height}px`;
+    applyStylesToElement(this.el, elStyles);
+    document.body.appendChild(this.el);
+  }
+
+  cleanup(): void {
+    fnConsoleLog('cleanup');
+  }
+
+  focus(): void {
+    fnConsoleLog('focus');
+  }
+
+  isHidden(): boolean {
+    return false;
+  }
+
+  resize(): void {
+    fnConsoleLog('resize');
+  }
+}

src/content-script/components/pin.component.ts

@@ -37,7 +37,6 @@ import { isElementHiddenFn } from '../fn/is-element-hidden.fn';
 import { pinStyles } from './styles/pin.styles';
 
 export class PinComponent implements HtmlComponent<void>, PageComponent {
-  readonly content = document.createElement('div');
   readonly top = document.createElement('div');
   readonly bottom = document.createElement('div');
 
@@ -61,11 +60,8 @@ export class PinComponent implements HtmlComponent<void>, PageComponent {
 
   private refValue: HTMLElement;
 
-  readonly object: ObjDto<ObjPagePinDto>;
-
-  constructor(ref: HTMLElement, object: ObjDto<ObjPagePinDto>) {
+  constructor(ref: HTMLElement, readonly object: ObjDto<ObjPagePinDto>) {
     this.refValue = ref;
-    this.object = object;
     this.rect = PinPointFactory.calculateRect(this.refValue);
     this.topBar = new TopBarComponent(this, object, this.rect);
     this.text = new TextContainerComponent(object, this.rect);

src/content-script/factory/pin.factory.ts

@@ -14,8 +14,10 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+import { ObjCanvasPinDto, ObjPagePinDto } from '../../common/model/obj-pin.model';
 import { HtmlFactory } from './html.factory';
-import { ObjPagePinDto } from '../../common/model/obj-pin.model';
+import { ObjRectangleDto } from '../../common/model/obj-utils.model';
+import { ScreenshotFactory } from '../../common/factory/screenshot.factory';
 import { UrlFactory } from '../../common/factory/url.factory';
 import { XpathFactory } from '../../common/factory/xpath.factory';
 
@@ -34,4 +36,20 @@ export class PinFactory {
       draw: []
     };
   };
+
+  static objCanvasPinNew = async (rect: ObjRectangleDto): Promise<ObjCanvasPinDto> => {
+    const screenshot = await ScreenshotFactory.takeScreenshot(rect);
+    return {
+      windowSize: {
+        width: window.innerWidth,
+        height: window.innerHeight
+      },
+      rect,
+      screenshot,
+      title: document.title,
+      value: '',
+      url: UrlFactory.newUrl(),
+      draw: []
+    };
+  };
 }

src/content-script/mediator/document.mediator.ts

@@ -14,8 +14,11 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { ObjPointDto } from '../../common/model/obj-utils.model';
+import { ObjPointDto, ObjRectangleDto } from '../../common/model/obj-utils.model';
+import { CanvasPinAddCommand } from '../../common/command/canvas/canvas-pin-add.command';
+import { CanvasPinComponentAddCommand } from '../command/canvas/canvas-pin-component-add.command';
 import { PinAddFactory } from '../factory/pin-add.factory';
+import { PinFactory } from '../factory/pin.factory';
 import { applyStylesToElement } from '../../common/style.utils';
 import { pinStyles } from '../components/styles/pin.styles';
 
@@ -86,11 +89,11 @@ export class DocumentMediator {
     }
   };
 
-  private static handleOverlayClick = (e: MouseEvent): void => {
+  private static handleOverlayClick = async (e: MouseEvent): Promise<void> => {
     if (!this.pinStart) {
       this.pinStart = { x: e.offsetX, y: e.offsetY };
     } else {
-      this.resizePinDiv(e);
+      await this.addCanvasPin(e.offsetX, e.offsetY);
       this.stopListeners();
     }
   };
@@ -112,4 +115,22 @@ export class DocumentMediator {
     ctx.rect(this.pinStart.x, this.pinStart.y, width, height);
     ctx.stroke();
   };
+
+  private static addCanvasPin = async (offsetX: number, offsetY: number): Promise<void> => {
+    if (!this.pinStart) return;
+
+    const width = offsetX - this.pinStart.x;
+    const height = offsetY - this.pinStart.y;
+    const rect: ObjRectangleDto = {
+      x: this.pinStart.x,
+      y: this.pinStart.y,
+      width,
+      height
+    };
+    const canvasPin = await PinFactory.objCanvasPinNew(rect);
+
+    const obj = await new CanvasPinAddCommand(canvasPin).execute();
+
+    new CanvasPinComponentAddCommand(obj, false).execute();
+  };
 }