From 97e51163e958895a8454ca1bfbac73e645a5b57a Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Wed, 16 Oct 2024 12:33:33 +0200 Subject: [PATCH 01/18] fix bug on paragraph component --- .../front-text-components/paragraph-text-shape.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx index a430b2dc..00824939 100644 --- a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx @@ -8,12 +8,12 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { useGroupShapeProps } from '../mock-components.utils'; const paragraphSizeRestrictions: ShapeSizeRestrictions = { - minWidth: 300, - minHeight: 100, + minWidth: 200, + minHeight: 70, maxWidth: -1, maxHeight: -1, defaultWidth: 420, - defaultHeight: 125, + defaultHeight: 130, }; export const getParagraphSizeRestrictions = (): ShapeSizeRestrictions => @@ -61,9 +61,7 @@ export const ParagraphShape = forwardRef((props, ref) => { fontSize={14} fill={textColor} align="left" - verticalAlign="middle" ellipsis={true} - wrap="none" /> ); From 24fb7eb22941c2d7eb4b3c6401a1bd1db85c5fa8 Mon Sep 17 00:00:00 2001 From: Alber EE <122263897+Alber-Writer@users.noreply.github.com> Date: Tue, 15 Oct 2024 11:17:55 +0200 Subject: [PATCH 02/18] Add QA test multiple selection unselect --- e2e/selection/multiple-selection.spec.ts | 26 ++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/e2e/selection/multiple-selection.spec.ts b/e2e/selection/multiple-selection.spec.ts index 5992b0ee..b30ff704 100644 --- a/e2e/selection/multiple-selection.spec.ts +++ b/e2e/selection/multiple-selection.spec.ts @@ -20,3 +20,29 @@ test('Should perform multiple selection when dragging and dropping over multiple const selectedItems = await getTransformer(page); expect(selectedItems._nodes.length).toEqual(3); }); + +test('Should deselect all previously selected items when clicking on an empty point on the canvas', async ({ + page, +}) => { + await page.goto(''); + + //Drag and drop component to canvas + const componentsAtCanvas = ['Input', 'Input', 'Icon', 'Label']; + await addComponentsToCanvas(page, componentsAtCanvas); + + //Click Away + await page.mouse.click(800, 130); + + //Perform items selection by drag and drop + await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 }); + + //Assert + const selectedItems = await getTransformer(page); + expect(selectedItems._nodes.length).toEqual(3); + + //Click Away + await page.mouse.click(800, 130); + //Assert + const updatedSelectedItems = await getTransformer(page); + expect(updatedSelectedItems._nodes.length).toEqual(0); +}); From 1de2fa80341d628468b4aef746e3f875bf4f56d8 Mon Sep 17 00:00:00 2001 From: Alberto Escribano <122263897+Alber-Writer@users.noreply.github.com> Date: Wed, 16 Oct 2024 13:04:13 +0200 Subject: [PATCH 03/18] Feature/#406 qa test multiple selection using ctrl or cmd (#451) * Add QA test multiple selection unselect * add QA test Select with ctrl-command --- e2e/helpers/konva-testing.helpers.ts | 44 ++++++++++++++++++++++++ e2e/helpers/position.helpers.ts | 1 + e2e/helpers/types/e2e-types.d.ts | 8 +++++ e2e/selection/multiple-selection.spec.ts | 31 ++++++++++++++++- 4 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 e2e/helpers/types/e2e-types.d.ts diff --git a/e2e/helpers/konva-testing.helpers.ts b/e2e/helpers/konva-testing.helpers.ts index 22f2fe21..519df69e 100644 --- a/e2e/helpers/konva-testing.helpers.ts +++ b/e2e/helpers/konva-testing.helpers.ts @@ -2,6 +2,7 @@ import { Page } from '@playwright/test'; import { Layer } from 'konva/lib/Layer'; import { Shape } from 'konva/lib/Shape'; import { Group } from 'konva/lib/Group'; +import { E2E_CanvasItemKeyAttrs } from './types/e2e-types'; const getLayer = async (page: Page): Promise => await page.evaluate(() => { @@ -59,3 +60,46 @@ export const getTransformer = async (page: Page): Promise => { }); return transformer; }; + +export const getWithinCanvasItemList = async ( + page: Page +): Promise => { + const items = await page.evaluate(() => { + return window.__TESTING_KONVA_LAYER__.find( + (c: any) => c.getType('Group') && (c.attrs['data-id'] as Group) + ); + }); + return items.map(it => it.attrs); +}; + +export const clickOnCanvasItem = async ( + page: Page, + item: E2E_CanvasItemKeyAttrs +) => { + const { x, y } = item; + const canvasWindowPos = await page.locator('canvas').boundingBox(); + if (!canvasWindowPos) throw new Error('Canvas is not loaded on ui'); + await page.mouse.move( + canvasWindowPos?.x + x + 20, + canvasWindowPos?.y + y + 20 + ); + + await page.mouse.down(); + await page.mouse.up(); + + return item; +}; + +export const ctrlClickOverCanvasItems = async ( + page: Page, + itemList: E2E_CanvasItemKeyAttrs[] +) => { + if (!itemList.length) + throw new Error('Please, add an array with at least one canvas Item'); + // NOTE: The keyboard entry 'ControlOrMeta' is the way to simulate both 'Ctrl' or 'Command' key + await page.keyboard.down('ControlOrMeta'); + for (const item of itemList) { + await clickOnCanvasItem(page, item); + } + await page.keyboard.up('ControlOrMeta'); +}; diff --git a/e2e/helpers/position.helpers.ts b/e2e/helpers/position.helpers.ts index 84485272..8eb13605 100644 --- a/e2e/helpers/position.helpers.ts +++ b/e2e/helpers/position.helpers.ts @@ -37,6 +37,7 @@ export const addComponentsToCanvas = async ( for await (const [index, c] of components.entries()) { const component = page.getByAltText(c, { exact: true }); + await component.scrollIntoViewIfNeeded(); const position = await getLocatorPosition(component); const targetPosition = ( diff --git a/e2e/helpers/types/e2e-types.d.ts b/e2e/helpers/types/e2e-types.d.ts new file mode 100644 index 00000000..d755d3f1 --- /dev/null +++ b/e2e/helpers/types/e2e-types.d.ts @@ -0,0 +1,8 @@ +export interface E2E_CanvasItemKeyAttrs { + x: number; + y: number; + ['data-id']: string; + width: number; + height: number; + shapeType: string; +} diff --git a/e2e/selection/multiple-selection.spec.ts b/e2e/selection/multiple-selection.spec.ts index b30ff704..7866ce20 100644 --- a/e2e/selection/multiple-selection.spec.ts +++ b/e2e/selection/multiple-selection.spec.ts @@ -1,5 +1,11 @@ import { test, expect } from '@playwright/test'; -import { dragAndDrop, addComponentsToCanvas, getTransformer } from '../helpers'; +import { + dragAndDrop, + addComponentsToCanvas, + getTransformer, + getWithinCanvasItemList, + ctrlClickOverCanvasItems, +} from '../helpers'; test('Should perform multiple selection when dragging and dropping over multiple components in the canvas', async ({ page, @@ -46,3 +52,26 @@ test('Should deselect all previously selected items when clicking on an empty po const updatedSelectedItems = await getTransformer(page); expect(updatedSelectedItems._nodes.length).toEqual(0); }); + +test('Should add some in-canvas-items to the current selection, by clicking on them, while pressing the CTRL / CMD keyboard.', async ({ + page, +}) => { + await page.goto(''); + + //Drag and drop component to canvas + const componentsAtCanvas = ['Input', 'Button', 'Textarea', 'Combobox']; + await addComponentsToCanvas(page, componentsAtCanvas); + const insideCanvasItemList = await getWithinCanvasItemList(page); + + //Assert no elements at current selection + const selectedItems = await getTransformer(page); + expect(selectedItems._nodes.length).toEqual(1); + + // Add 2 canvas items to current selection + const itemsToBeSelected = insideCanvasItemList.slice(1, 3); + await ctrlClickOverCanvasItems(page, itemsToBeSelected); + + //Assert the quantity of selected-items + const currentSelection = await getTransformer(page); + expect(currentSelection._nodes.length).toEqual(3); +}); From 28b67cd7097a4680264c8f1893b798204629def7 Mon Sep 17 00:00:00 2001 From: Pablo Date: Wed, 16 Oct 2024 16:22:22 +0200 Subject: [PATCH 04/18] first commit --- src/core/local-disk/use-local-disk.hook.ts | 5 +++-- src/core/providers/canvas/canvas.model.ts | 2 ++ src/core/providers/canvas/canvas.provider.tsx | 3 +++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/core/local-disk/use-local-disk.hook.ts b/src/core/local-disk/use-local-disk.hook.ts index eea12115..c05fcdc7 100644 --- a/src/core/local-disk/use-local-disk.hook.ts +++ b/src/core/local-disk/use-local-disk.hook.ts @@ -12,7 +12,7 @@ const DEFAULT_FILE_EXTENSION = 'qm'; const DEFAULT_EXTENSION_DESCRIPTION = 'quick mock'; export const useLocalDisk = () => { - const { shapes, loadDocument } = useCanvasContext(); + const { shapes, loadDocument, fileName, setFileName } = useCanvasContext(); const serializeShapes = (): string => { const quickMockDocument = mapFromShapesArrayToQuickMockFileDocument(shapes); @@ -42,7 +42,8 @@ export const useLocalDisk = () => { }; const handleSave = () => { - const filename = DEFAULT_FILE_NAME; + const filename = fileName !== '' ? fileName : DEFAULT_FILE_NAME; + setFileName(filename); const content = serializeShapes(); if ((window as any).showDirectoryPicker === undefined) { OldBrowsersDownloadFile(filename, content); diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts index 844ab71d..3807f144 100644 --- a/src/core/providers/canvas/canvas.model.ts +++ b/src/core/providers/canvas/canvas.model.ts @@ -69,6 +69,8 @@ export interface CanvasContextModel { loadDocument: (document: DocumentModel) => void; isInlineEditing: boolean; setIsInlineEditing: React.Dispatch>; + fileName: string; + setFileName: (fileName: string) => void; } export interface DocumentModel { diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx index dcfa6c4c..6248d1f3 100644 --- a/src/core/providers/canvas/canvas.provider.tsx +++ b/src/core/providers/canvas/canvas.provider.tsx @@ -21,6 +21,7 @@ export const CanvasProvider: React.FC = props => { const [scale, setScale] = React.useState(1); const stageRef = React.useRef(null); const [isInlineEditing, setIsInlineEditing] = React.useState(false); + const [fileName, setFileName] = React.useState(''); const { addSnapshot, @@ -184,6 +185,8 @@ export const CanvasProvider: React.FC = props => { loadDocument, isInlineEditing, setIsInlineEditing, + fileName, + setFileName, }} > {children} From 13975e2546021e2c8f6d241a2ff37ddf574677f1 Mon Sep 17 00:00:00 2001 From: Pablo Date: Wed, 16 Oct 2024 16:57:26 +0200 Subject: [PATCH 05/18] create remember file name --- src/core/local-disk/use-local-disk.hook.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/core/local-disk/use-local-disk.hook.ts b/src/core/local-disk/use-local-disk.hook.ts index c05fcdc7..bdb71bc7 100644 --- a/src/core/local-disk/use-local-disk.hook.ts +++ b/src/core/local-disk/use-local-disk.hook.ts @@ -38,12 +38,11 @@ export const useLocalDisk = () => { }, content ); - console.log('saveFilename', savedFilename); + setFileName(savedFilename); }; const handleSave = () => { const filename = fileName !== '' ? fileName : DEFAULT_FILE_NAME; - setFileName(filename); const content = serializeShapes(); if ((window as any).showDirectoryPicker === undefined) { OldBrowsersDownloadFile(filename, content); From fd3d0f34885d2a08db93729ef4397f858c1fc4fe Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 16 Oct 2024 19:08:49 +0200 Subject: [PATCH 06/18] #436 case added --- e2e/inline-edit/simple-inline-edit.spec.ts | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/e2e/inline-edit/simple-inline-edit.spec.ts b/e2e/inline-edit/simple-inline-edit.spec.ts index b29d1a14..7057a1b7 100644 --- a/e2e/inline-edit/simple-inline-edit.spec.ts +++ b/e2e/inline-edit/simple-inline-edit.spec.ts @@ -61,3 +61,29 @@ test('can add and edit input, and delete last letter', async ({ page }) => { ); expect(textShape).toBeDefined(); }); + +test('can edit input, press Esc key, and cancel edition', async ({ page }) => { + await page.goto(''); + const component = page.getByAltText('Input', { exact: true }); + + const position = await getLocatorPosition(component); + const targetPosition = { + x: position.x + 500, + y: position.y - 240, + }; + await dragAndDrop(page, position, targetPosition); + await page.mouse.dblclick(targetPosition.x, targetPosition.y); + const input = page.getByRole('textbox').first(); + const inputValue = await input.getAttribute('value'); + expect(inputValue).toEqual('Placeholder'); + + const textContent = 'User'; + await input.fill(textContent); + await page.keyboard.press('Escape'); + const inputShape = (await getByShapeType(page, 'input')) as Group; + expect(inputShape).toBeDefined(); + const textShape = inputShape.children.find( + child => child.attrs.text === 'Placeholder' + ); + expect(textShape).toBeDefined(); +}); From f2baf9ceaa4a512ca61ab2f649d4e72244738da9 Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 16 Oct 2024 19:27:06 +0200 Subject: [PATCH 07/18] #376 now we can edit button height --- .../mock-components/front-components/button-shape.tsx | 8 ++++---- src/pods/canvas/model/transformer.model.ts | 1 - 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/common/components/mock-components/front-components/button-shape.tsx b/src/common/components/mock-components/front-components/button-shape.tsx index a24f8a34..73c3941e 100644 --- a/src/common/components/mock-components/front-components/button-shape.tsx +++ b/src/common/components/mock-components/front-components/button-shape.tsx @@ -11,7 +11,7 @@ const buttonShapeRestrictions: ShapeSizeRestrictions = { minWidth: 50, minHeight: 35, maxWidth: -1, - maxHeight: 35, + maxHeight: 100, defaultWidth: 100, defaultHeight: 35, }; @@ -68,9 +68,9 @@ export const ButtonShape = forwardRef((props, ref) => { /> { switch (shapeType) { case 'label': case 'input': - case 'button': case 'combobox': case 'line': case 'listbox': From 3a2556db7623b6fc84b2dcaddb2b0eef01858710 Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 16 Oct 2024 21:00:55 +0200 Subject: [PATCH 08/18] #412 datapicker rebrand --- public/icons/calendar-icon.svg | 1 + .../datepickerinput-shape.tsx | 85 ++++++++++++------- src/pods/canvas/model/transformer.model.ts | 1 - 3 files changed, 55 insertions(+), 32 deletions(-) create mode 100644 public/icons/calendar-icon.svg diff --git a/public/icons/calendar-icon.svg b/public/icons/calendar-icon.svg new file mode 100644 index 00000000..841695de --- /dev/null +++ b/public/icons/calendar-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx index 21b41729..967e7781 100644 --- a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx +++ b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx @@ -2,17 +2,19 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef } from 'react'; import { ShapeProps } from '../shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { Group, Rect, Line } from 'react-konva'; +import { Group, Rect, Text, Image } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { useGroupShapeProps } from '../mock-components.utils'; +import calendarIconSrc from '/icons/calendar-icon.svg'; + const datepickerInputShapeRestrictions: ShapeSizeRestrictions = { - minWidth: 80, - minHeight: 50, + minWidth: 100, + minHeight: 30, maxWidth: -1, maxHeight: 50, - defaultWidth: 220, + defaultWidth: 180, defaultHeight: 50, }; @@ -33,11 +35,7 @@ export const DatepickerInputShape = forwardRef( const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const separatorPadding = 12; - const separator1X = restrictedWidth / 3; - const separator2X = (2 * restrictedWidth) / 3; - - const { stroke, strokeStyle, fill, borderRadius } = useShapeProps( + const { stroke, fill, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE ); @@ -49,40 +47,65 @@ export const DatepickerInputShape = forwardRef( ref ); + const iconWidth = 25; + const availableWidth = restrictedWidth - iconWidth - 20; + const fontSize = Math.min( + availableWidth * 0.2, + restrictedHeight * 0.35, + 20 + ); + const labelFontSize = Math.min(restrictedHeight * 0.3, 12); + + const calendarIcon = new window.Image(); + calendarIcon.src = calendarIconSrc; + return ( - {/* input frame */} + {/* External Rectangle */} - {/* Inverted diagonal spacers */} - - + {/* Main Text */} + + {/* Calendar Icon */} + ); diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts index e9bc1c95..224fe7af 100644 --- a/src/pods/canvas/model/transformer.model.ts +++ b/src/pods/canvas/model/transformer.model.ts @@ -51,7 +51,6 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => { case 'checkbox': case 'toggleswitch': case 'progressbar': - case 'datepickerinput': case 'timepickerinput': case 'radiobutton': case 'horizontal-menu': From 83b865409feccd808c26a91aa4c07f7591b70531 Mon Sep 17 00:00:00 2001 From: Jorge Miranda Date: Thu, 17 Oct 2024 08:42:46 +0200 Subject: [PATCH 09/18] Add-an-underline-bold-italic-properties-for-text-element --- .../front-components/shape.const.ts | 15 +++++ .../heading1-text-shape.tsx | 8 ++- .../heading2-text-shape.tsx | 8 ++- .../heading3-text-shape.tsx | 8 ++- .../normaltext-shape.tsx | 8 ++- .../front-text-components/smalltext-shape.tsx | 8 ++- .../components/shapes/use-shape-props.hook.ts | 19 +++++++ src/core/model/index.ts | 3 + .../canvas/model/shape-other-props.utils.ts | 31 +++++++++++ .../font-style/font-style.module.css | 40 ++++++++++++++ .../components/font-style/font-style.tsx | 50 +++++++++++++++++ .../properties/components/font-style/index.ts | 1 + .../font-variant/font-variant.module.css | 40 ++++++++++++++ .../components/font-variant/font-variant.tsx | 52 ++++++++++++++++++ .../components/font-variant/index.ts | 1 + .../components/text-decoration/index.ts | 1 + .../text-decoration.module.css | 40 ++++++++++++++ .../text-decoration/text-decoration.tsx | 55 +++++++++++++++++++ src/pods/properties/properties.pod.tsx | 30 ++++++++++ 19 files changed, 413 insertions(+), 5 deletions(-) create mode 100644 src/pods/properties/components/font-style/font-style.module.css create mode 100644 src/pods/properties/components/font-style/font-style.tsx create mode 100644 src/pods/properties/components/font-style/index.ts create mode 100644 src/pods/properties/components/font-variant/font-variant.module.css create mode 100644 src/pods/properties/components/font-variant/font-variant.tsx create mode 100644 src/pods/properties/components/font-variant/index.ts create mode 100644 src/pods/properties/components/text-decoration/index.ts create mode 100644 src/pods/properties/components/text-decoration/text-decoration.module.css create mode 100644 src/pods/properties/components/text-decoration/text-decoration.tsx diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts index de5e36ce..b3d155ba 100644 --- a/src/common/components/mock-components/front-components/shape.const.ts +++ b/src/common/components/mock-components/front-components/shape.const.ts @@ -12,6 +12,9 @@ const DEFAULT_FILL_TEXT_INPUT = '#8c8c8c'; const DEFAULT_FONT_SIZE_INPUT = 15; const DEFAULT_TEXT_WIDTH = 165; const DEFAULT_TEXT_HEIGHT = 38; +const DEFAULT_FONT_VARIANT = 'normal'; +const DEFAULT_FONT_STYLE = 'normal'; +const DEFAULT_TEXT_DECORATION = 'none'; export interface DefaultStyleShape { DEFAULT_CORNER_RADIUS: number; @@ -26,6 +29,9 @@ export interface DefaultStyleShape { DEFAULT_TEXT_WIDTH: number; DEFAULT_TEXT_HEIGHT: number; DEFAULT_STROKE_STYLE: number[]; + DEFAULT_FONT_VARIANT: string; + DEFAULT_FONT_STYLE: string; + DEFAULT_TEXT_DECORATION: string; } export const BASIC_SHAPE: DefaultStyleShape = { @@ -41,6 +47,9 @@ export const BASIC_SHAPE: DefaultStyleShape = { DEFAULT_TEXT_WIDTH, DEFAULT_TEXT_HEIGHT, DEFAULT_STROKE_STYLE, + DEFAULT_FONT_VARIANT, + DEFAULT_FONT_STYLE, + DEFAULT_TEXT_DECORATION, }; export const INPUT_SHAPE: DefaultStyleShape = { @@ -56,6 +65,9 @@ export const INPUT_SHAPE: DefaultStyleShape = { DEFAULT_TEXT_WIDTH, DEFAULT_TEXT_HEIGHT, DEFAULT_STROKE_STYLE, + DEFAULT_FONT_VARIANT, + DEFAULT_FONT_STYLE, + DEFAULT_TEXT_DECORATION, }; //! maybe a function to calc max height base on the text @@ -72,4 +84,7 @@ export const POSTIT_SHAPE: DefaultStyleShape = { DEFAULT_TEXT_WIDTH, DEFAULT_TEXT_HEIGHT, DEFAULT_STROKE_STYLE, + DEFAULT_FONT_VARIANT, + DEFAULT_FONT_STYLE, + DEFAULT_TEXT_DECORATION, }; diff --git a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx index c2aded9e..f7c516f6 100644 --- a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx @@ -40,7 +40,10 @@ export const Heading1Shape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const { textColor, textDecoration, fontStyle, fontVariant } = useShapeProps( + otherProps, + BASIC_SHAPE + ); const commonGroupProps = useGroupShapeProps( props, @@ -64,6 +67,9 @@ export const Heading1Shape = forwardRef((props, ref) => { verticalAlign="middle" ellipsis={true} wrap="none" + fontStyle={fontStyle} + fontVariant={fontVariant} + textDecoration={textDecoration} /> ); diff --git a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx index cd2138d5..aeecde05 100644 --- a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx @@ -40,7 +40,10 @@ export const Heading2Shape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps( + otherProps, + BASIC_SHAPE + ); const commonGroupProps = useGroupShapeProps( props, @@ -64,6 +67,9 @@ export const Heading2Shape = forwardRef((props, ref) => { verticalAlign="middle" ellipsis={true} wrap="none" + fontVariant={fontVariant} + fontStyle={fontStyle} + textDecoration={textDecoration} /> ); diff --git a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx index 9756d801..6a068cbf 100644 --- a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx @@ -41,7 +41,10 @@ export const Heading3Shape = forwardRef((props, ref) => { const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps( + otherProps, + BASIC_SHAPE + ); const commonGroupProps = useGroupShapeProps( props, @@ -65,6 +68,9 @@ export const Heading3Shape = forwardRef((props, ref) => { verticalAlign="middle" ellipsis={true} wrap="none" + fontVariant={fontVariant} + fontStyle={fontStyle} + textDecoration={textDecoration} /> ); diff --git a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx index 6e2c0649..980dc489 100644 --- a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx +++ b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx @@ -40,7 +40,10 @@ export const NormaltextShape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps( + otherProps, + BASIC_SHAPE + ); const commonGroupProps = useGroupShapeProps( props, @@ -64,6 +67,9 @@ export const NormaltextShape = forwardRef((props, ref) => { verticalAlign="middle" ellipsis={true} wrap="none" + fontVariant={fontVariant} + fontStyle={fontStyle} + textDecoration={textDecoration} /> ); diff --git a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx index 1ea6dc63..4d2da7bd 100644 --- a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx +++ b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx @@ -40,7 +40,10 @@ export const SmalltextShape = forwardRef((props, ref) => { ); const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps( + otherProps, + BASIC_SHAPE + ); const commonGroupProps = useGroupShapeProps( props, @@ -64,6 +67,9 @@ export const SmalltextShape = forwardRef((props, ref) => { verticalAlign="middle" ellipsis={true} wrap="none" + fontVariant={fontVariant} + fontStyle={fontStyle} + textDecoration={textDecoration} /> ); diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts index da65cf5b..99625bb8 100644 --- a/src/common/components/shapes/use-shape-props.hook.ts +++ b/src/common/components/shapes/use-shape-props.hook.ts @@ -22,6 +22,22 @@ export const useShapeProps = ( [otherProps?.textColor] ); + const fontVariant = useMemo( + () => otherProps?.fontVariant ?? defaultStyleShape.DEFAULT_FONT_VARIANT, + [otherProps?.fontVariant] + ); + + const fontStyle = useMemo( + () => otherProps?.fontStyle ?? defaultStyleShape.DEFAULT_FONT_STYLE, + [otherProps?.fontStyle] + ); + + const textDecoration = useMemo( + () => + otherProps?.textDecoration ?? defaultStyleShape.DEFAULT_TEXT_DECORATION, + [otherProps?.textDecoration] + ); + const strokeStyle = useMemo( () => otherProps?.strokeStyle ?? [], [otherProps?.strokeStyle] @@ -56,5 +72,8 @@ export const useShapeProps = ( isOn, progress, selectedBackgroundColor, + fontVariant, + fontStyle, + textDecoration, }; }; diff --git a/src/core/model/index.ts b/src/core/model/index.ts index cc818b3e..b735ba6a 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -155,6 +155,9 @@ export interface OtherProps { strokeStyle?: number[]; backgroundColor?: string; textColor?: string; + fontVariant?: string; + fontStyle?: string; + textDecoration?: string; checked?: boolean; icon?: IconInfo; iconSize?: IconSize; diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index 8c79411b..0079b360 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -106,10 +106,41 @@ export const generateDefaultOtherProps = ( }; case 'breadcrumb': case 'heading1': + return { + textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`, + fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`, + fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, + textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, + }; + case 'heading2': + return { + textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`, + fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`, + fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, + textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, + }; case 'heading3': + return { + textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`, + fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`, + fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, + textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, + }; case 'normaltext': + return { + textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`, + fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`, + fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, + textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, + }; case 'smalltext': + return { + textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`, + fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`, + fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`, + textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`, + }; case 'paragraph': case 'label': return { diff --git a/src/pods/properties/components/font-style/font-style.module.css b/src/pods/properties/components/font-style/font-style.module.css new file mode 100644 index 00000000..4863b13c --- /dev/null +++ b/src/pods/properties/components/font-style/font-style.module.css @@ -0,0 +1,40 @@ +.container { + display: flex; + align-items: center; + gap: 1.5em; + padding: var(--space-xs) var(--space-md); + border-bottom: 1px solid var(--primary-300); +} + +.buttonsContainer { + display: flex; + gap: 1em; + align-items: center; + margin-left: auto; +} + +.button { + border: none; + color: var(--text-color); + background-color: inherit; + width: auto; + min-width: 30px; + border-radius: 10px; + font-size: var(--fs-xs); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease-in-out; + cursor: pointer; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.button:hover { + background-color: var(--primary-100); +} + +.active { + background-color: var(--primary-200); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); + transform: translateY(2px); +} diff --git a/src/pods/properties/components/font-style/font-style.tsx b/src/pods/properties/components/font-style/font-style.tsx new file mode 100644 index 00000000..3caf0d21 --- /dev/null +++ b/src/pods/properties/components/font-style/font-style.tsx @@ -0,0 +1,50 @@ +import classes from './font-style.module.css'; + +interface Props { + fontStyle: string | undefined; + label: string; + onChange: (fontStyle: string) => void; +} + +const FONT_STYLE_NORMAL = 'normal'; +const FONT_STYLE_ITALIC = 'italic'; + +export const FontStyle: React.FC = props => { + const { label, fontStyle, onChange } = props; + + const handleToggle = () => { + const newfontStyle = + fontStyle === FONT_STYLE_ITALIC ? FONT_STYLE_NORMAL : FONT_STYLE_ITALIC; + onChange(newfontStyle); + }; + return ( +
+

{label}

+
+ +
+
+ ); +}; diff --git a/src/pods/properties/components/font-style/index.ts b/src/pods/properties/components/font-style/index.ts new file mode 100644 index 00000000..efd6eb0c --- /dev/null +++ b/src/pods/properties/components/font-style/index.ts @@ -0,0 +1 @@ +export * from './font-style'; diff --git a/src/pods/properties/components/font-variant/font-variant.module.css b/src/pods/properties/components/font-variant/font-variant.module.css new file mode 100644 index 00000000..4863b13c --- /dev/null +++ b/src/pods/properties/components/font-variant/font-variant.module.css @@ -0,0 +1,40 @@ +.container { + display: flex; + align-items: center; + gap: 1.5em; + padding: var(--space-xs) var(--space-md); + border-bottom: 1px solid var(--primary-300); +} + +.buttonsContainer { + display: flex; + gap: 1em; + align-items: center; + margin-left: auto; +} + +.button { + border: none; + color: var(--text-color); + background-color: inherit; + width: auto; + min-width: 30px; + border-radius: 10px; + font-size: var(--fs-xs); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease-in-out; + cursor: pointer; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.button:hover { + background-color: var(--primary-100); +} + +.active { + background-color: var(--primary-200); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); + transform: translateY(2px); +} diff --git a/src/pods/properties/components/font-variant/font-variant.tsx b/src/pods/properties/components/font-variant/font-variant.tsx new file mode 100644 index 00000000..f27aa293 --- /dev/null +++ b/src/pods/properties/components/font-variant/font-variant.tsx @@ -0,0 +1,52 @@ +import classes from './font-variant.module.css'; + +interface Props { + fontVariant: string | undefined; + label: string; + onChange: (fontStyle: string) => void; +} + +const FONT_VARIANT_NORMAL = 'normal'; +const FONT_VARIANT_BOLD = 'bold'; + +export const FontVariant: React.FC = props => { + const { label, fontVariant, onChange } = props; + const handleToggle = () => { + const newFontVariant = + fontVariant === FONT_VARIANT_BOLD + ? FONT_VARIANT_NORMAL + : FONT_VARIANT_BOLD; + onChange(newFontVariant); + }; + + return ( +
+

{label}

+
+ +
+
+ ); +}; diff --git a/src/pods/properties/components/font-variant/index.ts b/src/pods/properties/components/font-variant/index.ts new file mode 100644 index 00000000..230586c4 --- /dev/null +++ b/src/pods/properties/components/font-variant/index.ts @@ -0,0 +1 @@ +export * from './font-variant'; diff --git a/src/pods/properties/components/text-decoration/index.ts b/src/pods/properties/components/text-decoration/index.ts new file mode 100644 index 00000000..1f22ec94 --- /dev/null +++ b/src/pods/properties/components/text-decoration/index.ts @@ -0,0 +1 @@ +export * from './text-decoration'; diff --git a/src/pods/properties/components/text-decoration/text-decoration.module.css b/src/pods/properties/components/text-decoration/text-decoration.module.css new file mode 100644 index 00000000..4863b13c --- /dev/null +++ b/src/pods/properties/components/text-decoration/text-decoration.module.css @@ -0,0 +1,40 @@ +.container { + display: flex; + align-items: center; + gap: 1.5em; + padding: var(--space-xs) var(--space-md); + border-bottom: 1px solid var(--primary-300); +} + +.buttonsContainer { + display: flex; + gap: 1em; + align-items: center; + margin-left: auto; +} + +.button { + border: none; + color: var(--text-color); + background-color: inherit; + width: auto; + min-width: 30px; + border-radius: 10px; + font-size: var(--fs-xs); + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease-in-out; + cursor: pointer; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.button:hover { + background-color: var(--primary-100); +} + +.active { + background-color: var(--primary-200); + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); + transform: translateY(2px); +} diff --git a/src/pods/properties/components/text-decoration/text-decoration.tsx b/src/pods/properties/components/text-decoration/text-decoration.tsx new file mode 100644 index 00000000..d4fda69f --- /dev/null +++ b/src/pods/properties/components/text-decoration/text-decoration.tsx @@ -0,0 +1,55 @@ +import classes from './text-decoration.module.css'; + +interface Props { + textDecoration: string | undefined; + label: string; + onChange: (fontStyle: string) => void; +} + +const TEXT_DECORATION_NONE = 'none'; +const TEXT_DECORATION_UNDERLINE = 'underline'; + +export const TextDecoration: React.FC = props => { + const { label, textDecoration, onChange } = props; + const handleToggle = () => { + const newFontVariant = + textDecoration === TEXT_DECORATION_UNDERLINE + ? TEXT_DECORATION_NONE + : TEXT_DECORATION_UNDERLINE; + onChange(newFontVariant); + }; + + return ( +
+

{label}

+
+ +
+
+ ); +}; diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx index 839d1257..635afcf9 100644 --- a/src/pods/properties/properties.pod.tsx +++ b/src/pods/properties/properties.pod.tsx @@ -9,6 +9,9 @@ import { ImageSrc } from './components/image-src/image-selector.component'; import { ImageBlackAndWhite } from './components/image-black-and-white/image-black-and-white-selector.component'; import { Progress } from './components/progress/progress.component'; import { ActiveElementSelector } from './components/active-element-selector/active-element-selector.component'; +import { FontStyle } from './components/font-style'; +import { FontVariant } from './components/font-variant/font-variant'; +import { TextDecoration } from './components/text-decoration/text-decoration'; export const PropertiesPod = () => { const { selectionInfo } = useCanvasContext(); @@ -135,6 +138,33 @@ export const PropertiesPod = () => { } /> )} + {selectedShapeData?.otherProps?.fontStyle && ( + + updateOtherPropsOnSelected('fontStyle', fontstyle) + } + /> + )} + {selectedShapeData?.otherProps?.fontVariant && ( + + updateOtherPropsOnSelected('fontVariant', fontvariant) + } + /> + )} + {selectedShapeData?.otherProps?.textDecoration && ( + + updateOtherPropsOnSelected('textDecoration', textdecoration) + } + /> + )} )} {selectedShapeData?.otherProps?.activeElement !== undefined && ( From 60559209809d21b5c6434a0c4511434190f1c66b Mon Sep 17 00:00:00 2001 From: Braulio Date: Thu, 17 Oct 2024 11:36:10 +0200 Subject: [PATCH 10/18] fix transformer edge case --- .../use-multiple-selection-shape.hook.tsx | 32 +++++++++++++++++++ .../canvas/use-multiple-selection.business.ts | 16 ++++++++++ 2 files changed, 48 insertions(+) diff --git a/src/pods/canvas/use-multiple-selection-shape.hook.tsx b/src/pods/canvas/use-multiple-selection-shape.hook.tsx index 3e4b745a..676e1083 100644 --- a/src/pods/canvas/use-multiple-selection-shape.hook.tsx +++ b/src/pods/canvas/use-multiple-selection-shape.hook.tsx @@ -4,6 +4,7 @@ import Konva from 'konva'; import { useState } from 'react'; import { SelectionRect } from './model'; import { + areCoordsInsideRect, findFirstShapeInCoords, getSelectedShapesFromSelectionRect, } from './use-multiple-selection.business'; @@ -11,6 +12,7 @@ import { getTransformerBoxAndCoords } from './transformer.utils'; import { calculateScaledCoordsFromCanvasDivCoordinatesNoScroll } from './canvas.util'; import { Stage } from 'konva/lib/Stage'; import { isUserDoingMultipleSelectionUsingCtrlOrCmdKey } from '@/common/utils/shapes'; +import { KonvaEventObject } from 'konva/lib/Node'; // There's a bug here: if you make a multiple selectin and start dragging // inside the selection but on a blank area it won't drag the selection @@ -82,9 +84,39 @@ export const useMultipleSelectionShapeHook = ( ); }; + const isUserClickingOnTransformer = ( + e: KonvaEventObject | KonvaEventObject + ) => { + const transformerRect = transformerRef.current?.getClientRect(); + console.log(transformerRect); + const mousePosition = e.target?.getStage()?.getPointerPosition() ?? { + x: 0, + y: 0, + }; + + return ( + transformerRect && + areCoordsInsideRect( + mousePosition.x, + mousePosition.y, + transformerRect.x, + transformerRect.y, + transformerRect.width, + transformerRect.height + ) + ); + }; + const handleMouseDown = ( e: Konva.KonvaEventObject | Konva.KonvaEventObject ) => { + // Edge case if you drag on one of the transformer rectangle + // resize small boxes but you are on the outer part of the shape + // it will first select the shape that is behind (e.g. a windows or phone container) + // then the transformer (odd behavior, see: ) + if (isUserClickingOnTransformer(e)) { + return; + } // If user is holding ctrl or cmd key let's abort drag and drop multiple selection // He is trying to multiselect shape by using the keyboard if (isUserDoingMultipleSelectionUsingCtrlOrCmdKey(e)) { diff --git a/src/pods/canvas/use-multiple-selection.business.ts b/src/pods/canvas/use-multiple-selection.business.ts index 9a161cc6..f12be5eb 100644 --- a/src/pods/canvas/use-multiple-selection.business.ts +++ b/src/pods/canvas/use-multiple-selection.business.ts @@ -1,6 +1,22 @@ import { Coord, ShapeModel, ShapeRefs } from '@/core/model'; import { SelectionRect } from './model'; +export const areCoordsInsideRect = ( + pointX: number, + pointY: number, + rectX: number, + rectY: number, + rectWidth: number, + rectHeight: number +): boolean => { + return ( + pointX >= rectX && + pointX <= rectX + rectWidth && + pointY >= rectY && + pointY <= rectY + rectHeight + ); +}; + const isShapeInsideSelectionRect = ( shapeRect: SelectionRect, selectionRect: SelectionRect From 878f198d34e56cff50e978a26c4976400ad8ecd8 Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Thu, 17 Oct 2024 15:59:01 +0200 Subject: [PATCH 11/18] fix styles and tutton to checkbox component --- .../font-style/font-style.module.css | 33 +++---------------- .../components/font-style/font-style.tsx | 33 +++++-------------- .../font-variant/font-variant.module.css | 24 ++------------ .../components/font-variant/font-variant.tsx | 23 +++---------- .../text-decoration.module.css | 26 ++------------- .../text-decoration/text-decoration.tsx | 23 +++---------- 6 files changed, 26 insertions(+), 136 deletions(-) diff --git a/src/pods/properties/components/font-style/font-style.module.css b/src/pods/properties/components/font-style/font-style.module.css index 4863b13c..52b4fe3c 100644 --- a/src/pods/properties/components/font-style/font-style.module.css +++ b/src/pods/properties/components/font-style/font-style.module.css @@ -6,35 +6,12 @@ border-bottom: 1px solid var(--primary-300); } -.buttonsContainer { - display: flex; - gap: 1em; - align-items: center; - margin-left: auto; +.container :first-child { + flex: 1; } -.button { - border: none; - color: var(--text-color); - background-color: inherit; - width: auto; - min-width: 30px; - border-radius: 10px; - font-size: var(--fs-xs); - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease-in-out; +.checkbox { + width: var(--space-md); + height: var(--space-md); cursor: pointer; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -} - -.button:hover { - background-color: var(--primary-100); -} - -.active { - background-color: var(--primary-200); - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); - transform: translateY(2px); } diff --git a/src/pods/properties/components/font-style/font-style.tsx b/src/pods/properties/components/font-style/font-style.tsx index 3caf0d21..824bac05 100644 --- a/src/pods/properties/components/font-style/font-style.tsx +++ b/src/pods/properties/components/font-style/font-style.tsx @@ -20,31 +20,14 @@ export const FontStyle: React.FC = props => { return (

{label}

-
- -
+
); }; diff --git a/src/pods/properties/components/font-variant/font-variant.module.css b/src/pods/properties/components/font-variant/font-variant.module.css index 4863b13c..56aa322e 100644 --- a/src/pods/properties/components/font-variant/font-variant.module.css +++ b/src/pods/properties/components/font-variant/font-variant.module.css @@ -14,27 +14,7 @@ } .button { - border: none; - color: var(--text-color); - background-color: inherit; - width: auto; - min-width: 30px; - border-radius: 10px; - font-size: var(--fs-xs); - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease-in-out; + width: var(--space-md); + height: var(--space-md); cursor: pointer; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -} - -.button:hover { - background-color: var(--primary-100); -} - -.active { - background-color: var(--primary-200); - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); - transform: translateY(2px); } diff --git a/src/pods/properties/components/font-variant/font-variant.tsx b/src/pods/properties/components/font-variant/font-variant.tsx index f27aa293..9e6f69ec 100644 --- a/src/pods/properties/components/font-variant/font-variant.tsx +++ b/src/pods/properties/components/font-variant/font-variant.tsx @@ -23,29 +23,14 @@ export const FontVariant: React.FC = props => {

{label}

- + />
); diff --git a/src/pods/properties/components/text-decoration/text-decoration.module.css b/src/pods/properties/components/text-decoration/text-decoration.module.css index 4863b13c..026d419f 100644 --- a/src/pods/properties/components/text-decoration/text-decoration.module.css +++ b/src/pods/properties/components/text-decoration/text-decoration.module.css @@ -13,28 +13,8 @@ margin-left: auto; } -.button { - border: none; - color: var(--text-color); - background-color: inherit; - width: auto; - min-width: 30px; - border-radius: 10px; - font-size: var(--fs-xs); - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease-in-out; +.checkbox { + width: var(--space-md); + height: var(--space-md); cursor: pointer; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -} - -.button:hover { - background-color: var(--primary-100); -} - -.active { - background-color: var(--primary-200); - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); - transform: translateY(2px); } diff --git a/src/pods/properties/components/text-decoration/text-decoration.tsx b/src/pods/properties/components/text-decoration/text-decoration.tsx index d4fda69f..d8684e35 100644 --- a/src/pods/properties/components/text-decoration/text-decoration.tsx +++ b/src/pods/properties/components/text-decoration/text-decoration.tsx @@ -23,32 +23,17 @@ export const TextDecoration: React.FC = props => {

{label}

- + />
); From a584122fa35234a899128bc33fd28b0a1b2a63f9 Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Thu, 17 Oct 2024 16:01:06 +0200 Subject: [PATCH 12/18] fix styles --- .../font-variant/font-variant.module.css | 9 +++----- .../components/font-variant/font-variant.tsx | 18 +++++++-------- .../text-decoration.module.css | 7 ++---- .../text-decoration/text-decoration.tsx | 22 ++++++++----------- 4 files changed, 22 insertions(+), 34 deletions(-) diff --git a/src/pods/properties/components/font-variant/font-variant.module.css b/src/pods/properties/components/font-variant/font-variant.module.css index 56aa322e..52b4fe3c 100644 --- a/src/pods/properties/components/font-variant/font-variant.module.css +++ b/src/pods/properties/components/font-variant/font-variant.module.css @@ -6,14 +6,11 @@ border-bottom: 1px solid var(--primary-300); } -.buttonsContainer { - display: flex; - gap: 1em; - align-items: center; - margin-left: auto; +.container :first-child { + flex: 1; } -.button { +.checkbox { width: var(--space-md); height: var(--space-md); cursor: pointer; diff --git a/src/pods/properties/components/font-variant/font-variant.tsx b/src/pods/properties/components/font-variant/font-variant.tsx index 9e6f69ec..8c1b4eb1 100644 --- a/src/pods/properties/components/font-variant/font-variant.tsx +++ b/src/pods/properties/components/font-variant/font-variant.tsx @@ -22,16 +22,14 @@ export const FontVariant: React.FC = props => { return (

{label}

-
- -
+
); }; diff --git a/src/pods/properties/components/text-decoration/text-decoration.module.css b/src/pods/properties/components/text-decoration/text-decoration.module.css index 026d419f..52b4fe3c 100644 --- a/src/pods/properties/components/text-decoration/text-decoration.module.css +++ b/src/pods/properties/components/text-decoration/text-decoration.module.css @@ -6,11 +6,8 @@ border-bottom: 1px solid var(--primary-300); } -.buttonsContainer { - display: flex; - gap: 1em; - align-items: center; - margin-left: auto; +.container :first-child { + flex: 1; } .checkbox { diff --git a/src/pods/properties/components/text-decoration/text-decoration.tsx b/src/pods/properties/components/text-decoration/text-decoration.tsx index d8684e35..bb8a4e57 100644 --- a/src/pods/properties/components/text-decoration/text-decoration.tsx +++ b/src/pods/properties/components/text-decoration/text-decoration.tsx @@ -22,19 +22,15 @@ export const TextDecoration: React.FC = props => { return (

{label}

-
- -
+
); }; From 5dada92a339d831c653174915c80e80a0f6fed8f Mon Sep 17 00:00:00 2001 From: oleojake Date: Thu, 17 Oct 2024 16:57:48 +0200 Subject: [PATCH 13/18] #412 datepicker attributes fix --- public/icons/calendar-icon.svg | 1 - public/icons/calendar.svg | 1 + .../datepickerinput-shape.tsx | 34 +++++++++++++------ .../canvas/model/inline-editable.model.ts | 3 ++ .../datepickerinput.renderer.tsx | 1 + .../components/icon-selector/modal/icons.ts | 6 ++++ 6 files changed, 34 insertions(+), 12 deletions(-) delete mode 100644 public/icons/calendar-icon.svg create mode 100644 public/icons/calendar.svg diff --git a/public/icons/calendar-icon.svg b/public/icons/calendar-icon.svg deleted file mode 100644 index 841695de..00000000 --- a/public/icons/calendar-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/icons/calendar.svg b/public/icons/calendar.svg new file mode 100644 index 00000000..7b9270ce --- /dev/null +++ b/public/icons/calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx index 967e7781..17d64b21 100644 --- a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx +++ b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx @@ -3,11 +3,11 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text, Image } from 'react-konva'; -import { BASIC_SHAPE } from './shape.const'; +import { INPUT_SHAPE } from './shape.const'; import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { useGroupShapeProps } from '../mock-components.utils'; -import calendarIconSrc from '/icons/calendar-icon.svg'; +import calendarIconSrc from '/icons/calendar.svg'; const datepickerInputShapeRestrictions: ShapeSizeRestrictions = { minWidth: 100, @@ -25,8 +25,17 @@ export const getDatepickerInputShapeSizeRestrictions = export const DatepickerInputShape = forwardRef( (props, ref) => { - const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = - props; + const { + x, + y, + width, + height, + id, + onSelected, + text, + otherProps, + ...shapeProps + } = props; const restrictedSize = fitSizeToShapeSizeRestrictions( datepickerInputShapeRestrictions, width, @@ -35,10 +44,8 @@ export const DatepickerInputShape = forwardRef( const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { stroke, fill, borderRadius } = useShapeProps( - otherProps, - BASIC_SHAPE - ); + const { stroke, fill, textColor, strokeStyle, borderRadius } = + useShapeProps(otherProps, INPUT_SHAPE); const commonGroupProps = useGroupShapeProps( props, @@ -69,6 +76,7 @@ export const DatepickerInputShape = forwardRef( height={restrictedHeight} cornerRadius={borderRadius} stroke={stroke} + dash={strokeStyle} strokeWidth={2} fill={fill} /> @@ -77,7 +85,7 @@ export const DatepickerInputShape = forwardRef( x={10} y={-5} width={labelFontSize + 20} - height={labelFontSize + 5} + height={labelFontSize} cornerRadius={borderRadius} fill="white" /> @@ -89,15 +97,19 @@ export const DatepickerInputShape = forwardRef( fontSize={labelFontSize} fill={stroke} align="center" + color={stroke} /> {/* Main Text */} {/* Calendar Icon */} ([ 'buttonBar', 'tabsBar', 'tooltip', + 'datepickerinput', ]); // Check if a shape type allows inline editing @@ -64,6 +65,7 @@ const shapeTypesWithDefaultText = new Set([ 'appBar', 'buttonBar', 'tabsBar', + 'datepickerinput', ]); // Map of ShapeTypes to their default text values @@ -95,6 +97,7 @@ const defaultTextValueMap: Partial> = { appBar: 'AppBar', buttonBar: 'Button 1, Button 2, Button 3', tabsBar: 'Tab 1, Tab 2, Tab 3', + datepickerinput: new Date().toLocaleDateString(), }; export const generateDefaultTextValue = ( diff --git a/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx index 4b02957c..0eee92a7 100644 --- a/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx @@ -26,6 +26,7 @@ export const renderDatepickerinput = ( onTransform={handleTransform} onTransformEnd={handleTransform} otherProps={shape.otherProps} + text={shape.text} /> ); }; diff --git a/src/pods/properties/components/icon-selector/modal/icons.ts b/src/pods/properties/components/icon-selector/modal/icons.ts index 77f75426..b3748605 100644 --- a/src/pods/properties/components/icon-selector/modal/icons.ts +++ b/src/pods/properties/components/icon-selector/modal/icons.ts @@ -1322,4 +1322,10 @@ export const iconCollection: IconInfo[] = [ searchTerms: ['pencil', 'edit', 'editing', 'edition'], categories: ['IT'], }, + { + name: 'Calendar', + filename: 'calendar.svg', + searchTerms: ['calendar', 'days', 'date', 'hours', 'time', 'schedule'], + categories: ['IT'], + }, ]; From 30a4aa4772d1a1e7f2b60181865ac899664da93d Mon Sep 17 00:00:00 2001 From: Alber EE <122263897+Alber-Writer@users.noreply.github.com> Date: Thu, 17 Oct 2024 17:56:41 +0200 Subject: [PATCH 14/18] rename all Line component instances to Horizontal Line --- public/shapes/{line.svg => horizontalLine.svg} | 2 +- ...sic-shape.tsx => horizontal-line-basic-shape.tsx} | 12 ++++++------ .../mock-components/front-basic-shapes/index.ts | 2 +- src/core/model/index.ts | 4 ++-- src/pods/canvas/model/shape-other-props.utils.ts | 2 +- src/pods/canvas/model/shape-size.mapper.ts | 4 ++-- src/pods/canvas/model/transformer.model.ts | 2 +- src/pods/canvas/shape-renderer/index.tsx | 6 +++--- ...ine.renderer.tsx => horizontal-line.renderer.tsx} | 6 +++--- .../shape-renderer/simple-basic-shapes/index.ts | 2 +- .../basic-shapes-gallery/basic-gallery-data/index.ts | 2 +- 11 files changed, 22 insertions(+), 22 deletions(-) rename public/shapes/{line.svg => horizontalLine.svg} (83%) rename src/common/components/mock-components/front-basic-shapes/{line-basic-shape.tsx => horizontal-line-basic-shape.tsx} (81%) rename src/pods/canvas/shape-renderer/simple-basic-shapes/{line.renderer.tsx => horizontal-line.renderer.tsx} (82%) diff --git a/public/shapes/line.svg b/public/shapes/horizontalLine.svg similarity index 83% rename from public/shapes/line.svg rename to public/shapes/horizontalLine.svg index 2c40684d..967d76cd 100644 --- a/public/shapes/line.svg +++ b/public/shapes/horizontalLine.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/horizontal-line-basic-shape.tsx similarity index 81% rename from src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/horizontal-line-basic-shape.tsx index 21600aa2..35b3e729 100644 --- a/src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/horizontal-line-basic-shape.tsx @@ -7,7 +7,7 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; import { useGroupShapeProps } from '../mock-components.utils'; -const lineShapeRestrictions: ShapeSizeRestrictions = { +const horizontalLineShapeRestrictions: ShapeSizeRestrictions = { minWidth: 50, minHeight: 10, maxWidth: -1, @@ -16,12 +16,12 @@ const lineShapeRestrictions: ShapeSizeRestrictions = { defaultHeight: 10, }; -export const getlineShapeRestrictions = (): ShapeSizeRestrictions => - lineShapeRestrictions; +export const getHorizontalLineShapeRestrictions = (): ShapeSizeRestrictions => + horizontalLineShapeRestrictions; -const shapeType: ShapeType = 'line'; +const shapeType: ShapeType = 'horizontalLine'; -export const LineShape = forwardRef((props, ref) => { +export const HorizontalLineShape = forwardRef((props, ref) => { const { x, y, @@ -34,7 +34,7 @@ export const LineShape = forwardRef((props, ref) => { ...shapeProps } = props; const restrictedSize = fitSizeToShapeSizeRestrictions( - lineShapeRestrictions, + horizontalLineShapeRestrictions, width, height ); diff --git a/src/common/components/mock-components/front-basic-shapes/index.ts b/src/common/components/mock-components/front-basic-shapes/index.ts index 602fa0ba..a9a1fa88 100644 --- a/src/common/components/mock-components/front-basic-shapes/index.ts +++ b/src/common/components/mock-components/front-basic-shapes/index.ts @@ -1,7 +1,7 @@ export * from './rectangle-basic-shape'; export * from './postit-basic-shape'; export * from './diamond-shape'; -export * from './line-basic-shape'; +export * from './horizontal-line-basic-shape'; export * from './triangle-basic-shape'; export * from './circle-basic-shape'; export * from './star-shape'; diff --git a/src/core/model/index.ts b/src/core/model/index.ts index b735ba6a..0450ac95 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -32,7 +32,7 @@ export type ShapeType = | 'audioPlayer' | 'diamond' | 'icon' - | 'line' + | 'horizontalLine' | 'accordion' | 'pie' | 'horizontal-menu' @@ -89,7 +89,7 @@ export const ShapeDisplayName: Record = { videoPlayer: 'Video Player', audioPlayer: 'Audio Player', diamond: 'Diamond', - line: 'Line', + horizontalLine: 'Horizontal Line', accordion: 'Accordion', pie: 'Pie', breadcrumb: 'Breadcrumb', diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index 0079b360..dede2f2e 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -99,7 +99,7 @@ export const generateDefaultOtherProps = ( strokeStyle: [], borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`, }; - case 'line': + case 'horizontalLine': return { stroke: '#000000', strokeStyle: [], diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts index 208ff6ea..0409adf7 100644 --- a/src/pods/canvas/model/shape-size.mapper.ts +++ b/src/pods/canvas/model/shape-size.mapper.ts @@ -33,7 +33,7 @@ import { getDiamondShapeSizeRestrictions, getImageShapeSizeRestrictions, getLargeArrowShapeSizeRestrictions, - getlineShapeRestrictions, + getHorizontalLineShapeRestrictions, getPostItShapeSizeRestrictions, getRectangleShapeSizeRestrictions, getStarShapeSizeRestrictions, @@ -97,7 +97,7 @@ const shapeSizeMap: Record ShapeSizeRestrictions> = { rectangle: getRectangleShapeSizeRestrictions, videoPlayer: getVideoPlayerShapeSizeRestrictions, diamond: getDiamondShapeSizeRestrictions, - line: getlineShapeRestrictions, + horizontalLine: getHorizontalLineShapeRestrictions, accordion: getAccordionShapeSizeRestrictions, triangle: getTriangleShapeSizeRestrictions, postit: getPostItShapeSizeRestrictions, diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts index e9bc1c95..e778a116 100644 --- a/src/pods/canvas/model/transformer.model.ts +++ b/src/pods/canvas/model/transformer.model.ts @@ -46,7 +46,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => { case 'label': case 'input': case 'combobox': - case 'line': + case 'horizontalLine': case 'listbox': case 'checkbox': case 'toggleswitch': diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx index ea4ae166..966ff6c4 100644 --- a/src/pods/canvas/shape-renderer/index.tsx +++ b/src/pods/canvas/shape-renderer/index.tsx @@ -46,7 +46,7 @@ import { renderDiamond, renderTriangle, renderRectangle, - renderLine, + renderHorizontalLine, renderCircle, renderStar, renderPostit, @@ -119,8 +119,8 @@ export const renderShapeComponent = ( return renderLineChart(shape, shapeRenderedProps); case 'diamond': return renderDiamond(shape, shapeRenderedProps); - case 'line': - return renderLine(shape, shapeRenderedProps); + case 'horizontalLine': + return renderHorizontalLine(shape, shapeRenderedProps); case 'accordion': return renderAccordion(shape, shapeRenderedProps); case 'triangle': diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/horizontal-line.renderer.tsx similarity index 82% rename from src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx rename to src/pods/canvas/shape-renderer/simple-basic-shapes/horizontal-line.renderer.tsx index 2ce67348..08403bfc 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/horizontal-line.renderer.tsx @@ -1,8 +1,8 @@ -import { LineShape } from '@/common/components/mock-components/front-basic-shapes'; +import { HorizontalLineShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; -export const renderLine = ( +export const renderHorizontalLine = ( shape: ShapeModel, shapeRenderedProps: ShapeRendererProps ) => { @@ -10,7 +10,7 @@ export const renderLine = ( shapeRenderedProps; return ( - Date: Thu, 17 Oct 2024 18:12:52 +0200 Subject: [PATCH 15/18] add Vertical Line component --- public/shapes/verticalLine.svg | 4 ++ .../front-basic-shapes/index.ts | 1 + .../vertical-line-basic-shape.tsx | 72 +++++++++++++++++++ src/core/model/index.ts | 2 + .../canvas/model/shape-other-props.utils.ts | 5 ++ src/pods/canvas/model/shape-size.mapper.ts | 2 + src/pods/canvas/model/transformer.model.ts | 1 + src/pods/canvas/shape-renderer/index.tsx | 3 + .../simple-basic-shapes/index.ts | 1 + .../vertical-line.renderer.tsx | 31 ++++++++ .../basic-gallery-data/index.ts | 1 + 11 files changed, 123 insertions(+) create mode 100644 public/shapes/verticalLine.svg create mode 100644 src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx create mode 100644 src/pods/canvas/shape-renderer/simple-basic-shapes/vertical-line.renderer.tsx diff --git a/public/shapes/verticalLine.svg b/public/shapes/verticalLine.svg new file mode 100644 index 00000000..e8f76fac --- /dev/null +++ b/public/shapes/verticalLine.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/common/components/mock-components/front-basic-shapes/index.ts b/src/common/components/mock-components/front-basic-shapes/index.ts index a9a1fa88..8a8940da 100644 --- a/src/common/components/mock-components/front-basic-shapes/index.ts +++ b/src/common/components/mock-components/front-basic-shapes/index.ts @@ -2,6 +2,7 @@ export * from './rectangle-basic-shape'; export * from './postit-basic-shape'; export * from './diamond-shape'; export * from './horizontal-line-basic-shape'; +export * from './vertical-line-basic-shape'; export * from './triangle-basic-shape'; export * from './circle-basic-shape'; export * from './star-shape'; diff --git a/src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx new file mode 100644 index 00000000..198d588d --- /dev/null +++ b/src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx @@ -0,0 +1,72 @@ +import { forwardRef } from 'react'; +import { Group, Line, Rect } from 'react-konva'; +import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; +import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; +import { ShapeProps } from '../shape.model'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { BASIC_SHAPE } from '../front-components/shape.const'; +import { useGroupShapeProps } from '../mock-components.utils'; + +const verticalLineShapeRestrictions: ShapeSizeRestrictions = { + minWidth: 10, + minHeight: 50, + maxWidth: 10, + maxHeight: -1, + defaultWidth: 10, + defaultHeight: 200, +}; + +export const getVerticalLineShapeRestrictions = (): ShapeSizeRestrictions => + verticalLineShapeRestrictions; + +const shapeType: ShapeType = 'verticalLine'; + +export const VerticalLineShape = forwardRef((props, ref) => { + const { + x, + y, + width, + height, + id, + onSelected, + text, + otherProps, + ...shapeProps + } = props; + const restrictedSize = fitSizeToShapeSizeRestrictions( + verticalLineShapeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; + + const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE); + + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + + return ( + + {/* Transparent rectangle for applying margin */} + + + + + ); +}); diff --git a/src/core/model/index.ts b/src/core/model/index.ts index 0450ac95..4ade6751 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -33,6 +33,7 @@ export type ShapeType = | 'diamond' | 'icon' | 'horizontalLine' + | 'verticalLine' | 'accordion' | 'pie' | 'horizontal-menu' @@ -90,6 +91,7 @@ export const ShapeDisplayName: Record = { audioPlayer: 'Audio Player', diamond: 'Diamond', horizontalLine: 'Horizontal Line', + verticalLine: 'Vertical Line', accordion: 'Accordion', pie: 'Pie', breadcrumb: 'Breadcrumb', diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index dede2f2e..4af75dd4 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -104,6 +104,11 @@ export const generateDefaultOtherProps = ( stroke: '#000000', strokeStyle: [], }; + case 'verticalLine': + return { + stroke: '#000000', + strokeStyle: [], + }; case 'breadcrumb': case 'heading1': return { diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts index 0409adf7..57a03ace 100644 --- a/src/pods/canvas/model/shape-size.mapper.ts +++ b/src/pods/canvas/model/shape-size.mapper.ts @@ -34,6 +34,7 @@ import { getImageShapeSizeRestrictions, getLargeArrowShapeSizeRestrictions, getHorizontalLineShapeRestrictions, + getVerticalLineShapeRestrictions, getPostItShapeSizeRestrictions, getRectangleShapeSizeRestrictions, getStarShapeSizeRestrictions, @@ -98,6 +99,7 @@ const shapeSizeMap: Record ShapeSizeRestrictions> = { videoPlayer: getVideoPlayerShapeSizeRestrictions, diamond: getDiamondShapeSizeRestrictions, horizontalLine: getHorizontalLineShapeRestrictions, + verticalLine: getVerticalLineShapeRestrictions, accordion: getAccordionShapeSizeRestrictions, triangle: getTriangleShapeSizeRestrictions, postit: getPostItShapeSizeRestrictions, diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts index e778a116..60e9ec00 100644 --- a/src/pods/canvas/model/transformer.model.ts +++ b/src/pods/canvas/model/transformer.model.ts @@ -66,6 +66,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => { case 'buttonBar': case 'slider': return ['middle-left', 'middle-right']; + case 'verticalLine': case 'verticalScrollBar': return ['top-center', 'bottom-center']; case 'icon': diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx index 966ff6c4..d9005801 100644 --- a/src/pods/canvas/shape-renderer/index.tsx +++ b/src/pods/canvas/shape-renderer/index.tsx @@ -47,6 +47,7 @@ import { renderTriangle, renderRectangle, renderHorizontalLine, + renderVerticalLine, renderCircle, renderStar, renderPostit, @@ -121,6 +122,8 @@ export const renderShapeComponent = ( return renderDiamond(shape, shapeRenderedProps); case 'horizontalLine': return renderHorizontalLine(shape, shapeRenderedProps); + case 'verticalLine': + return renderVerticalLine(shape, shapeRenderedProps); case 'accordion': return renderAccordion(shape, shapeRenderedProps); case 'triangle': diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts b/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts index 46377c09..a676e622 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts @@ -3,6 +3,7 @@ export * from './postit.rerender'; export * from './diamond.renderer'; export * from './triangle.renderer'; export * from './horizontal-line.renderer'; +export * from './vertical-line.renderer'; export * from './circle.renderer'; export * from './star.renderer'; export * from './large-arrow.renderer'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/vertical-line.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/vertical-line.renderer.tsx new file mode 100644 index 00000000..fcfde41f --- /dev/null +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/vertical-line.renderer.tsx @@ -0,0 +1,31 @@ +import { VerticalLineShape } from '@/common/components/mock-components/front-basic-shapes'; +import { ShapeRendererProps } from '../model'; +import { ShapeModel } from '@/core/model'; + +export const renderVerticalLine = ( + shape: ShapeModel, + shapeRenderedProps: ShapeRendererProps +) => { + const { handleSelected, shapeRefs, handleDragEnd, handleTransform } = + shapeRenderedProps; + + return ( + + ); +}; diff --git a/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts b/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts index 6d31b335..0c4b912e 100644 --- a/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts +++ b/src/pods/galleries/basic-shapes-gallery/basic-gallery-data/index.ts @@ -9,5 +9,6 @@ export const mockBasicShapesCollection: ItemInfo[] = [ { thumbnailSrc: '/shapes/diamond.svg', type: 'diamond' }, { thumbnailSrc: '/shapes/star.svg', type: 'star' }, { thumbnailSrc: '/shapes/horizontalLine.svg', type: 'horizontalLine' }, + { thumbnailSrc: '/shapes/verticalLine.svg', type: 'verticalLine' }, { thumbnailSrc: '/shapes/largeArrow.svg', type: 'largeArrow' }, ]; From 62b192a3bf6825152757e8abc3495233c9022660 Mon Sep 17 00:00:00 2001 From: Alber EE <122263897+Alber-Writer@users.noreply.github.com> Date: Thu, 17 Oct 2024 18:34:55 +0200 Subject: [PATCH 16/18] adjust small text component min width --- .../mock-components/front-text-components/smalltext-shape.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx index 4d2da7bd..aa392a5f 100644 --- a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx +++ b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx @@ -8,7 +8,7 @@ import { BASIC_SHAPE } from '../front-components/shape.const'; import { useGroupShapeProps } from '../mock-components.utils'; const smalltextSizeRestrictions: ShapeSizeRestrictions = { - minWidth: 150, + minWidth: 40, minHeight: 20, maxWidth: -1, maxHeight: -1, From d0acfb7df45f4d7c7d9eacee750835462f887865 Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Thu, 17 Oct 2024 18:39:38 +0200 Subject: [PATCH 17/18] fix some errors --- src/pods/properties/components/font-style/font-style.tsx | 5 ++++- .../properties/components/font-variant/font-variant.tsx | 5 ++++- .../components/text-decoration/text-decoration.tsx | 7 ++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/pods/properties/components/font-style/font-style.tsx b/src/pods/properties/components/font-style/font-style.tsx index 824bac05..54eb5f65 100644 --- a/src/pods/properties/components/font-style/font-style.tsx +++ b/src/pods/properties/components/font-style/font-style.tsx @@ -22,7 +22,10 @@ export const FontStyle: React.FC = props => {

{label}

= props => {

{label}

= props => {

{label}

Date: Thu, 17 Oct 2024 18:54:06 +0200 Subject: [PATCH 18/18] fix errors --- src/pods/properties/components/font-style/font-style.tsx | 4 +--- .../properties/components/font-variant/font-variant.tsx | 4 +--- .../components/text-decoration/text-decoration.tsx | 6 +----- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/pods/properties/components/font-style/font-style.tsx b/src/pods/properties/components/font-style/font-style.tsx index 54eb5f65..9667a98c 100644 --- a/src/pods/properties/components/font-style/font-style.tsx +++ b/src/pods/properties/components/font-style/font-style.tsx @@ -22,9 +22,7 @@ export const FontStyle: React.FC = props => {

{label}

= props => {

{label}

= props => {

{label}