Feature/#561 add note functionality to floating bar

src/App.css

@@ -308,19 +308,21 @@ textarea {
   width: 100%;
   border: none;
   outline: none;
-
+  font-family: inherit;
   border: 1px solid var(--input-border-color);
   transition: all 0.2s ease;
 }
 
 input:focus,
-select:focus {
+select:focus,
+textarea:focus {
   border: 1px solid var(--input-border-color-active);
   background-color: var(--hover-input);
 }
 
 select:hover,
-input:hover {
+input:hover,
+textarea:hover {
   background-color: var(--hover-input);
   box-shadow: 0 0 4px var(--hover-checkbox);
 }

src/common/canvas-draggable/canvas-draggable.hook.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useCallback } from 'react';
+import { Size } from '@/core/model';
+import { UpdatePositionFn, UpdatePositionItemInfo } from '@/core/providers';
+import { setOffSetZoomToCoords } from '@/common/helpers/set-off-set-zoom-to-coords.helper';
+
+export const useDraggable = (
+  id: string,
+  initialX: number,
+  initialY: number,
+  updatePosition: UpdatePositionFn,
+  totalHeight: number,
+  canvasSize: Size,
+  viewBoxSize: Size,
+  zoomFactor: number
+) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [startDragPosition, setStartDragPosition] = useState({ x: 0, y: 0 });
+  const [finalInfoAfterDrag, setFinalInfoAfterDrag] =
+    useState<UpdatePositionItemInfo | null>(null);
+  const [node, setNode] = React.useState<SVGElement | null>(null);
+  const ref = React.useCallback((nodeEle: SVGElement): void => {
+    setNode(nodeEle);
+  }, []);
+
+  const startDrag = (x: number, y: number) => {
+    const { x: offsetX, y: offsetY } = setOffSetZoomToCoords(
+      x,
+      y,
+      viewBoxSize,
+      canvasSize,
+      zoomFactor
+    );
+    setStartDragPosition({
+      x: offsetX - initialX,
+      y: offsetY - initialY,
+    });
+    setIsDragging(true);
+  };
+
+  const onMouseDown = useCallback(
+    (event: React.MouseEvent) => {
+      startDrag(event.clientX, event.clientY);
+    },
+    [initialX, initialY, viewBoxSize]
+  );
+
+  const onTouchStart = useCallback(
+    (event: React.TouchEvent) => {
+      event.preventDefault();
+      const touch = event.touches[0];
+      startDrag(touch.clientX, touch.clientY);
+    },
+    [initialX, initialY, viewBoxSize]
+  );
+
+  const updateDrag = (x: number, y: number) => {
+    if (isDragging) {
+      const { x: offsetX, y: offsetY } = setOffSetZoomToCoords(
+        x,
+        y,
+        viewBoxSize,
+        canvasSize,
+        zoomFactor
+      );
+      const newPosition = {
+        id,
+        position: {
+          x: offsetX - startDragPosition.x,
+          y: offsetY - startDragPosition.y,
+        },
+        totalHeight,
+        canvasSize,
+      };
+
+      updatePosition(newPosition, false);
+      setFinalInfoAfterDrag(newPosition);
+    }
+  };
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent) => {
+      updateDrag(event.clientX, event.clientY);
+    },
+    [id, isDragging, startDragPosition, updatePosition, totalHeight, canvasSize]
+  );
+
+  const onTouchMove = useCallback(
+    (event: TouchEvent) => {
+      event.preventDefault();
+      const touch = event.touches[0];
+      updateDrag(touch.clientX, touch.clientY);
+    },
+    [id, isDragging, startDragPosition, updatePosition, totalHeight, canvasSize]
+  );
+
+  const endDrag = useCallback(() => {
+    setIsDragging(false);
+    if (finalInfoAfterDrag) {
+      updatePosition(finalInfoAfterDrag, true);
+    }
+  }, [finalInfoAfterDrag, updatePosition]);
+
+  React.useEffect(() => {
+    if (!node) return;
+    if (isDragging) {
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', endDrag);
+      node.addEventListener('touchmove', onTouchMove);
+      node.addEventListener('touchend', endDrag);
+    } else {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', endDrag);
+      node.removeEventListener('touchmove', onTouchMove);
+      node.removeEventListener('touchend', endDrag);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', endDrag);
+      node.removeEventListener('touchmove', onTouchMove);
+      node.removeEventListener('touchend', endDrag);
+    };
+  }, [isDragging, onMouseMove, onTouchMove, endDrag]);
+
+  return { onMouseDown, onTouchStart, ref };
+};

src/common/canvas-draggable/index.ts

@@ -0,0 +1 @@
+export * from './canvas-draggable.hook';

src/common/components/icons/note-icon.component.tsx

@@ -0,0 +1,15 @@
+export const NoteIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M208 34H48a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h108.69a13.94 13.94 0 0 0 9.9-4.1l51.31-51.31a13.94 13.94 0 0 0 4.1-9.9V48a14 14 0 0 0-14-14M46 208V48a2 2 0 0 1 2-2h160a2 2 0 0 1 2 2v106h-50a6 6 0 0 0-6 6v50H48a2 2 0 0 1-2-2m120-6.49V166h35.52Z"
+      />
+    </svg>
+  );
+};

src/common/components/modal-dialog/modal-dialog.const.ts

@@ -3,6 +3,8 @@ export const ADD_RELATION_TITLE = 'Add Relation';
 export const EDIT_RELATION_TITLE = 'Edit Relation';
 export const ADD_COLLECTION_TITLE = 'Add Collection';
 export const EDIT_COLLECTION_TITLE = 'Edit Collection';
+export const ADD_NOTE_TITLE = 'Add Note';
+export const EDIT_NOTE_TITLE = 'Edit Note';
 export const ABOUT_TITLE = 'About us';
 export const EXPORT_MODEL_TITLE = 'Export Model';
 export const IMPORT_COLLECTION_TITLE = 'Import JSON Document';

src/common/shortcut/shortcut.hook.tsx

@@ -1,5 +1,4 @@
 import { isMacOS, isWindowsOrLinux } from '@/common/helpers/platform.helpers';
-import { useModalDialogContext } from '@/core/providers';
 import { useEffect } from 'react';
 import { ModifierType } from './shortcut.model';
 
@@ -25,10 +24,15 @@ const useShortcut = ({
   callback,
   modifierType = 'system',
 }: ShortcutHookProps) => {
-  const { modalDialog } = useModalDialogContext();
-
   const handleKeyPress = (event: KeyboardEvent) => {
-    if (modalDialog.isOpen) {
+    const target = event.target as HTMLElement;
+    const isTypingInInput =
+      target.tagName === 'INPUT' ||
+      target.tagName === 'TEXTAREA' ||
+      target.isContentEditable;
+
+    // Block single-key shortcuts when typing in inputs
+    if (isTypingInInput && modifierType === 'none') {
       return;
     }
 
@@ -45,7 +49,9 @@ const useShortcut = ({
     }[modifierType];
 
     if (isValidModifier && targetKey.includes(event.key)) {
-      event.preventDefault();
+      if (!isTypingInInput) {
+        event.preventDefault();
+      }
       callback();
     }
   };

src/core/autosave/autosave.business.spec.ts

@@ -48,6 +48,7 @@ describe('saveToLocal', () => {
         tables: [{ id: '1', fields: [], tableName: 'tableName', x: 0, y: 0 }],
         relations: [],
         selectedElementId: null,
+        notes: [],
       },
     };
     const autosaveError = 0;
@@ -107,6 +108,7 @@ describe('retrieveLocalSchema', () => {
         },
       ],
       relations: [],
+      notes: [],
       selectedElementId: null,
     };
 

src/core/autosave/autosave.business.ts

@@ -6,6 +6,7 @@ import {
   DatabaseSchemaVm,
   createDefaultDatabaseSchemaVm,
 } from '@/core/providers';
+import { mapSchemaToLatestVersion } from '../providers/canvas-schema/canvas-schema.mapper';
 
 export interface AutosaveCanvasSchema {
   filename: string | undefined;
@@ -47,7 +48,7 @@ export const retrieveLocalSchema = (
     if (retrievedValue && retrievedValue.canvasSchema.tables.length !== 0) {
       setLoadSample(false);
       setFilename(retrievedValue.filename);
-      return retrievedValue.canvasSchema;
+      return mapSchemaToLatestVersion(retrievedValue.canvasSchema);
     } else {
       return defaultSchema(setLoadSample, setFilename);
     }

src/core/autosave/autosave.hook.ts

@@ -23,7 +23,10 @@ const useAutosave = () => {
   const autosaveHandler = () => {
     if (autosaveError > 1) stopAutosave();
 
-    if (canvasSchema.tables.length !== 0 && canvasViewSettings.autoSave) {
+    if (
+      (canvasSchema.tables.length !== 0 || canvasSchema.notes.length !== 0) &&
+      canvasViewSettings.autoSave
+    ) {
       saveToLocal(
         AUTOSAVE_KEY,
         {

src/core/providers/canvas-schema/business-specs/canvas-delete-item.business.spec.ts

@@ -9,6 +9,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const dbSchema: DatabaseSchemaVm = {
       version: '0.1',
       selectedElementId: '1',
+      notes: [],
       relations: [
         {
           id: '20',
@@ -78,6 +79,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const expected = {
       version: '0.1',
       selectedElementId: null,
+      notes: [],
       relations: [],
       tables: [
         {
@@ -110,6 +112,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const dbSchema: DatabaseSchemaVm = {
       version: '0.1',
       selectedElementId: '20',
+      notes: [],
       relations: [
         {
           id: '20',
@@ -179,6 +182,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const expected = {
       version: '0.1',
       selectedElementId: null,
+      notes: [],
       relations: [
         {
           id: '30',
@@ -240,6 +244,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const dbSchema: DatabaseSchemaVm = {
       version: '0.1',
       selectedElementId: '30',
+      notes: [],
       relations: [
         {
           id: '30',
@@ -301,6 +306,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const expected = {
       version: '0.1',
       selectedElementId: null,
+      notes: [],
       relations: [],
       tables: [
         {
@@ -353,6 +359,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const dbSchema: DatabaseSchemaVm = {
       version: '0.1',
       selectedElementId: '1',
+      notes: [],
       relations: [],
       tables: [
         {
@@ -385,6 +392,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const expected = {
       version: '0.1',
       selectedElementId: null,
+      notes: [],
       relations: [],
       tables: [],
     };
@@ -396,6 +404,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const dbSchema: DatabaseSchemaVm = {
       version: '0.1',
       selectedElementId: '11',
+      notes: [],
       relations: [
         {
           id: '20',
@@ -445,6 +454,7 @@ describe('deleteItemFromCanvasSchema', () => {
     const expected = {
       version: '0.1',
       selectedElementId: null,
+      notes: [],
       relations: [
         {
           id: '20',