Bug/#630 remove grid from export

src/common/components/tooltip/tooltip.component.module.css

@@ -16,11 +16,14 @@
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 0.3s ease,
-    visibility 0.3s ease;
+    opacity 0.5s ease,
+    visibility 0s linear 0.5s,
+    transform 0.5s ease;
 }
 
-.tooltipContainer:hover .tooltip {
+.tooltip.visible {
   opacity: 1;
   visibility: visible;
+  transform: translateX(-50%) translateY(-2px);
+  transition-delay: 1s;
 }

src/common/components/tooltip/tooltip.component.tsx

@@ -19,14 +19,12 @@ export const Tooltip: React.FC<TooltipProps> = props => {
       onMouseLeave={() => setVisible(false)}
     >
       {children}
-      {visible && (
-        <div
-          className={classes.tooltip}
-          style={{ left: `${leftPosition}`, bottom: `${bottomPosition}` }}
-        >
-          {label}
-        </div>
-      )}
+      <div
+        className={`${classes.tooltip} ${visible ? classes.visible : ''}`}
+        style={{ left: leftPosition, bottom: bottomPosition }}
+      >
+        {label}
+      </div>
     </div>
   );
 };

src/pods/canvas/canvas.grid.tsx

@@ -37,7 +37,7 @@ export const CanvasGridLayer: React.FC<Props> = ({ canvasSize }) => {
   }, [width, height, gridSpacing]);
 
   return (
-    <Layer>
+    <Layer name="grid">
       {/* Render vertical lines */}
       {verticalLines.map((points, index) => (
         <GridLine key={`v-line-${index}`} points={points} />

src/pods/toolbar/components/export-button/export-button.tsx

@@ -17,6 +17,7 @@ export const ExportButton = () => {
       const originalStage = stageRef.current;
       const clonedStage = originalStage.clone();
 
+      removeGridLayer(clonedStage);
       applyFiltersToImages(clonedStage);
       resetScale(clonedStage);
 
@@ -53,6 +54,10 @@ export const ExportButton = () => {
     });
   };
 
+  const removeGridLayer = (stage: Konva.Stage) => {
+    stage.findOne((node: Konva.Node) => node.name() === 'grid')?.visible(false);
+  };
+
   return (
     <ToolbarButton
       onClick={handleExport}

src/pods/toolbar/components/toolbar-button/toolbar-button.tsx

@@ -1,6 +1,7 @@
+//import { isMacOS } from '@/common/helpers/platform.helpers';
 import { useShortcut } from '../../shortcut/shortcut.hook';
-/* import { isMacOS } from '@/common/helpers/platform.helpers'; */
 import { ShortcutOptions } from '../../shortcut/shortcut.model';
+import { Tooltip } from '@/common/components/tooltip';
 
 interface Props {
   onClick?: () => void;
@@ -20,30 +21,41 @@ export const ToolbarButton: React.FC<Props> = props => {
     shortcutOptions,
   } = props;
 
-  /* const shortcutCommand = isMacOS() ? 'Ctrl' : 'Alt';
+  //const shortcutCommand = isMacOS() ? 'Cmd' : 'Ctrl';
   const showTooltip = shortcutOptions && !disabled;
-  const tooltipText = `(${shortcutCommand} + ${shortcutOptions?.targetKeyLabel})`; */
-
+  //const tooltipText = `(${shortcutCommand} + ${shortcutOptions?.targetKeyLabel})`;
+  const tooltipText = `(${shortcutOptions?.targetKeyLabel})`;
   useShortcut({
     ...shortcutOptions,
     targetKey: shortcutOptions?.targetKey || [],
     callback: onClick,
   });
 
   return (
-    <button
-      onClick={onClick}
-      className={className}
-      disabled={disabled}
-      aria-describedby={shortcutOptions?.id}
-    >
-      <span aria-hidden={true}>{icon}</span>
-      <span>{label}</span>
-      {/* {showTooltip && (
-        <span role="tooltip" id={shortcutOptions?.id}>
-          {tooltipText}
-        </span>
-      )} */}
-    </button>
+    <>
+      {showTooltip ? (
+        <Tooltip label={tooltipText} leftPosition="50%" bottomPosition="-60%">
+          <button
+            onClick={onClick}
+            className={className}
+            disabled={disabled}
+            aria-describedby={shortcutOptions?.id}
+          >
+            <span aria-hidden={true}>{icon}</span>
+            <span>{label}</span>
+          </button>
+        </Tooltip>
+      ) : (
+        <button
+          onClick={onClick}
+          className={className}
+          disabled={disabled}
+          aria-describedby={shortcutOptions?.id}
+        >
+          <span aria-hidden={true}>{icon}</span>
+          <span>{label}</span>
+        </button>
+      )}
+    </>
   );
 };