Merge pull request #519 from josemitoribio/feature/#431-Create-a-link…

…-component

Feature/#431 create a link component

src/common/components/mock-components/front-text-components/index.ts

@@ -4,3 +4,4 @@ export * from './heading3-text-shape';
 export * from './normaltext-shape';
 export * from './smalltext-shape';
 export * from './paragraph-text-shape';
+export * from './link-text-shape';

src/common/components/mock-components/front-text-components/link-text-shape.tsx

@@ -0,0 +1,74 @@
+import { forwardRef } from 'react';
+import { Group, Text } from 'react-konva';
+import { ShapeProps } from '../shape.model';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const linkSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 40,
+  minHeight: 20,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 150,
+  defaultHeight: 25,
+};
+
+export const getLinkSizeRestrictions = (): ShapeSizeRestrictions =>
+  linkSizeRestrictions;
+
+const shapeType: ShapeType = 'link';
+
+export const LinkShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    linkSizeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const { textColor, textDecoration } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Text
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        text={text}
+        fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+        fontSize={20}
+        fill={textColor}
+        align="center"
+        verticalAlign="middle"
+        ellipsis={true}
+        wrap="none"
+        textDecoration={textDecoration}
+      />
+    </Group>
+  );
+});
+
+export default LinkShape;

src/core/model/index.ts

@@ -67,7 +67,8 @@ export type ShapeType =
   | 'appBar'
   | 'buttonBar'
   | 'tooltip'
-  | 'slider';
+  | 'slider'
+  | 'link';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -107,6 +108,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   normaltext: 'Normal text',
   smalltext: 'Small text',
   paragraph: 'Paragraph',
+  link: 'Link',
   triangle: 'Triangle',
   'horizontal-menu': 'Horizontal Menu',
   largeArrow: 'Large Arrow',

src/pods/canvas/model/inline-editable.model.ts

@@ -19,6 +19,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'heading1',
   'heading2',
   'heading3',
+  'link',
   'normaltext',
   'smalltext',
   'paragraph',
@@ -67,6 +68,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'appBar',
   'buttonBar',
   'tabsBar',
+  'link',
   'timepickerinput',
   'datepickerinput',
   'browser',
@@ -101,6 +103,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   appBar: 'AppBar',
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
+  link: 'Link',
   timepickerinput: 'hh:mm',
   datepickerinput: new Date().toLocaleDateString(),
   browser: 'https://example.com',

src/pods/canvas/model/shape-other-props.utils.ts

@@ -139,6 +139,11 @@ export const generateDefaultOtherProps = (
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
       };
+    case 'link':
+      return {
+        textColor: 'blue',
+        textDecoration: 'underline',
+      };
     case 'normaltext':
       return {
         textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`,

src/pods/canvas/model/shape-size.mapper.ts

@@ -64,6 +64,7 @@ import {
   getHeading1SizeRestrictions,
   getHeading2SizeRestrictions,
   getHeading3SizeRestrictions,
+  getLinkSizeRestrictions,
   getNormaltextSizeRestrictions,
   getParagraphSizeRestrictions,
   getSmalltextSizeRestrictions,
@@ -118,6 +119,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   normaltext: getNormaltextSizeRestrictions,
   smalltext: getSmalltextSizeRestrictions,
   paragraph: getParagraphSizeRestrictions,
+  link: getLinkSizeRestrictions,
   largeArrow: getLargeArrowShapeSizeRestrictions,
   radiobutton: getRadioButtonShapeSizeRestrictions,
   checkbox: getCheckboxShapeSizeRestrictions,

src/pods/canvas/model/transformer.model.ts

@@ -60,6 +60,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'heading3':
     case 'normaltext':
     case 'smalltext':
+    case 'link':
     case 'horizontalScrollBar':
     case 'appBar':
     case 'buttonBar':

src/pods/canvas/shape-renderer/index.tsx

@@ -58,6 +58,7 @@ import {
   renderHeading1,
   renderHeading2,
   renderHeading3,
+  renderLink,
   renderNormaltext,
 } from './simple-text-components';
 import { renderSmalltext } from './simple-text-components/smalltext.renderer';
@@ -151,6 +152,8 @@ export const renderShapeComponent = (
       return renderSmalltext(shape, shapeRenderedProps);
     case 'paragraph':
       return renderParagraph(shape, shapeRenderedProps);
+    case 'link':
+      return renderLink(shape, shapeRenderedProps);
     case 'largeArrow':
       return renderLargeArrowShape(shape, shapeRenderedProps);
     case 'icon':

src/pods/canvas/shape-renderer/simple-text-components/index.ts

@@ -2,3 +2,4 @@ export * from './heading1.renderer';
 export * from './heading2.renderer';
 export * from './heading3.renderer';
 export * from './normaltext.renderer';
+export * from './link.renderer';

src/pods/canvas/shape-renderer/simple-text-components/link.renderer.tsx

@@ -0,0 +1,33 @@
+import { LinkShape } from '@/common/components/mock-components/front-text-components';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderLink = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <LinkShape
+      id={shape.id}
+      key={shape.id}
+      ref={shapeRefs.current[shape.id]}
+      x={shape.x}
+      y={shape.y}
+      name="shape"
+      width={shape.width}
+      height={shape.height}
+      draggable
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      editType={shape.editType}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
+      otherProps={shape.otherProps}
+    />
+  );
+};

src/pods/galleries/text-component-gallery/text-component-galley-data/index.ts

@@ -4,6 +4,7 @@ export const mockTextCollection: ItemInfo[] = [
   { thumbnailSrc: '/text/heading1.svg', type: 'heading1' },
   { thumbnailSrc: '/text/heading2.svg', type: 'heading2' },
   { thumbnailSrc: '/text/heading3.svg', type: 'heading3' },
+  { thumbnailSrc: '/text/link.svg', type: 'link' },
   { thumbnailSrc: '/text/normaltext.svg', type: 'normaltext' },
   { thumbnailSrc: '/text/smalltext.svg', type: 'smalltext' },
   { thumbnailSrc: '/text/paragraph.svg', type: 'paragraph' },