From 4529d9e8b6c6ed21e065c7c8c418ef459ecfadea Mon Sep 17 00:00:00 2001 From: "daniel.sanchez" Date: Sat, 21 Sep 2024 16:03:51 +0200 Subject: [PATCH 01/18] #379: Add e2e plumbing --- .gitignore | 4 +++ package-lock.json | 84 +++++++++++++++++++++++++++++++++++++++----- package.json | 10 ++++-- playwright.config.ts | 38 ++++++++++++++++++++ 4 files changed, 126 insertions(+), 10 deletions(-) create mode 100644 playwright.config.ts diff --git a/.gitignore b/.gitignore index 503bb516..c018db17 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,7 @@ dist-ssr *.sw? .vite +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/package-lock.json b/package-lock.json index e14cb219..d130752c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "quickmock", "version": "0.0.0", + "hasInstallScript": true, "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.2.1", "@fontsource-variable/montserrat": "^5.0.20", @@ -24,7 +25,9 @@ "uuid": "^10.0.0" }, "devDependencies": { + "@playwright/test": "^1.47.2", "@types/jest": "^29.5.12", + "@types/node": "^22.5.5", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/uuid": "^10.0.0", @@ -1163,6 +1166,22 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@playwright/test": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.2.tgz", + "integrity": "sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.47.2" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", @@ -1472,12 +1491,13 @@ } }, "node_modules/@types/node": { - "version": "20.14.10", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz", - "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==", + "version": "22.5.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz", + "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==", "dev": true, + "license": "MIT", "dependencies": { - "undici-types": "~5.26.4" + "undici-types": "~6.19.2" } }, "node_modules/@types/prop-types": { @@ -4404,6 +4424,53 @@ "pathe": "^1.1.2" } }, + "node_modules/playwright": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.2.tgz", + "integrity": "sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.47.2" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.47.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.2.tgz", + "integrity": "sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.4.39", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", @@ -5250,10 +5317,11 @@ "dev": true }, "node_modules/undici-types": { - "version": "5.26.5", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", - "dev": true + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", + "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "dev": true, + "license": "MIT" }, "node_modules/universalify": { "version": "0.2.0", diff --git a/package.json b/package.json index 12e9ce87..ead5a3a7 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,17 @@ "version": "0.0.0", "type": "module", "scripts": { + "postinstall": "npm run install:e2e-browsers", + "install:e2e-browsers": "npx playwright install", "dev": "vite", "build": "tsc -b && vite build", "test": "vitest", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", - "prepare": "husky install", - "tsc-check": "tsc --noEmit" + "prepare": "husky || \"No need to install husky\"", + "tsc-check": "tsc --noEmit", + "e2e": "playwright test --ui", + "ci:e2e": "playwright test" }, "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.2.1", @@ -29,7 +33,9 @@ "uuid": "^10.0.0" }, "devDependencies": { + "@playwright/test": "^1.47.2", "@types/jest": "^29.5.12", + "@types/node": "^22.5.5", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/uuid": "^10.0.0", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..a6495241 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,38 @@ +import { defineConfig, devices } from '@playwright/test'; + +const BASE_URL = 'http://localhost:5173/editor.html'; + +export default defineConfig({ + testDir: './e2e', + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 1, + workers: process.env.CI ? 1 : undefined, + reporter: 'html', + use: { + baseURL: BASE_URL, + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + ], + webServer: { + command: 'npm run dev', + reuseExistingServer: !process.env.CI, + }, +}); From 6fe1c2239bc233f98efc875094289e83ba797f00 Mon Sep 17 00:00:00 2001 From: "daniel.sanchez" Date: Sat, 21 Sep 2024 16:04:54 +0200 Subject: [PATCH 02/18] update workflows --- .github/workflows/cd.yml | 2 +- .github/workflows/ci.yml | 30 +++++++++++++++++++++++++++--- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index 44077597..c5ffb23d 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -14,7 +14,7 @@ jobs: name: Deploy Quickmock steps: - name: Checkout repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install run: npm ci diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 843f6978..ae482095 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -3,14 +3,14 @@ name: CI Workflow on: pull_request jobs: - ci: + unit-tests: runs-on: ubuntu-latest steps: - name: Checkout repository - uses: actions/checkout@v2 + uses: actions/checkout@v4 - name: Use Node.js 18.13.0 - uses: actions/setup-node@v2 + uses: actions/setup-node@v4 with: node-version: '18.13.0' cache: 'npm' @@ -26,3 +26,27 @@ jobs: - name: Run tests run: npm test + + e2e-tests: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Use Node.js 18.13.0 + uses: actions/setup-node@v4 + with: + node-version: '18.13.0' + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Check TypeScript types + run: npm run tsc-check + + - name: Run E2E tests + run: npm run ci:e2e From bf31ac301ef6456f02c939944dc6865da6e695fc Mon Sep 17 00:00:00 2001 From: "daniel.sanchez" Date: Sat, 21 Sep 2024 17:46:35 +0200 Subject: [PATCH 03/18] add basic devices specs --- e2e/devices.spec.ts | 53 +++++++++++++++++++ playwright.config.ts | 1 + .../gallery/components/item-component.tsx | 1 + .../zindex/zindex-button.component.tsx | 5 +- .../zindex/zindex-option.component.tsx | 12 +++-- 5 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 e2e/devices.spec.ts diff --git a/e2e/devices.spec.ts b/e2e/devices.spec.ts new file mode 100644 index 00000000..35f590be --- /dev/null +++ b/e2e/devices.spec.ts @@ -0,0 +1,53 @@ +import { test, expect, Locator } from '@playwright/test'; + +test('has Devices group', async ({ page }) => { + await page.goto(''); + + await expect(page.getByText('Devices')).toBeVisible(); +}); + +test('has browser component', async ({ page }) => { + await page.goto(''); + await page.getByText('Devices').click(); + + await expect(page.getByAltText('Browser')).toBeVisible(); +}); + +const getPosition = async (locator: Locator) => { + const box = (await locator.boundingBox()) || { + x: 0, + y: 0, + width: 0, + height: 0, + }; + return { x: box.x + box.width / 2, y: box.y + box.height / 2 }; +}; + +test('can add browser component to canvas', async ({ page }) => { + await page.goto(''); + await page.getByText('Devices').click(); + const browser = page.getByAltText('Browser'); + + const browserPosition = await getPosition(browser); + await page.mouse.move(browserPosition.x, browserPosition.y); + await page.mouse.down(); + await page.mouse.move(browserPosition.x + 500, browserPosition.y); + await page.mouse.up(); + + // TODO: Pending to add spec to be visible on canvas + + // Properties visibles + await expect(page.getByText('Layering')).toBeVisible(); + await expect( + page.getByRole('button', { name: 'Bring to front' }) + ).toBeVisible(); + await expect( + page.getByRole('button', { name: 'Bring forward' }) + ).toBeVisible(); + await expect( + page.getByRole('button', { name: 'Send backward' }) + ).toBeVisible(); + await expect( + page.getByRole('button', { name: 'Send to back' }) + ).toBeVisible(); +}); diff --git a/playwright.config.ts b/playwright.config.ts index a6495241..a812abf1 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -33,6 +33,7 @@ export default defineConfig({ ], webServer: { command: 'npm run dev', + url: BASE_URL, reuseExistingServer: !process.env.CI, }, }); diff --git a/src/common/components/gallery/components/item-component.tsx b/src/common/components/gallery/components/item-component.tsx index 9bf0ec36..7f4b6bea 100644 --- a/src/common/components/gallery/components/item-component.tsx +++ b/src/common/components/gallery/components/item-component.tsx @@ -65,6 +65,7 @@ export const ItemComponent: React.FC = props => { >
{ShapeDisplayName[item.type diff --git a/src/pods/properties/components/zindex/zindex-button.component.tsx b/src/pods/properties/components/zindex/zindex-button.component.tsx index 5ae0770c..cad333e7 100644 --- a/src/pods/properties/components/zindex/zindex-button.component.tsx +++ b/src/pods/properties/components/zindex/zindex-button.component.tsx @@ -3,12 +3,13 @@ import classes from './zindex-option.module.css'; interface ButtonProps { onClick: () => void; Icon: React.ComponentType; + label: string; } export const ZIndexButton: React.FC = props => { - const { onClick, Icon } = props; + const { onClick, Icon, label } = props; return ( - ); diff --git a/src/pods/properties/components/zindex/zindex-option.component.tsx b/src/pods/properties/components/zindex/zindex-option.component.tsx index 186bb2a2..a9ba2b35 100644 --- a/src/pods/properties/components/zindex/zindex-option.component.tsx +++ b/src/pods/properties/components/zindex/zindex-option.component.tsx @@ -14,13 +14,14 @@ import { ZIndexButton } from './zindex-button.component'; interface LayerOption { position: ZIndexAction; Icon: React.ComponentType; + label: string; } const layersOptions: LayerOption[] = [ - { position: 'top', Icon: BringToFrontIcon }, - { position: 'up', Icon: BringForwardIcon }, - { position: 'down', Icon: SendBackwardIcon }, - { position: 'bottom', Icon: SendToBackIcon }, + { position: 'top', Icon: BringToFrontIcon, label: 'Bring to front' }, + { position: 'up', Icon: BringForwardIcon, label: 'Bring forward' }, + { position: 'down', Icon: SendBackwardIcon, label: 'Send backward' }, + { position: 'bottom', Icon: SendToBackIcon, label: 'Send to back' }, ]; interface Props { @@ -37,11 +38,12 @@ export const ZIndexOptions: React.FC = props => { return (

Layering

- {layersOptions.map(({ position, Icon }) => ( + {layersOptions.map(({ position, Icon, label }) => ( handleZIndexChange(position)} Icon={Icon} + label={label} /> ))}
From 84424d358fd3b07cf9bd016d23aa3cf3dacba195 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 21 Sep 2024 18:07:31 +0200 Subject: [PATCH 04/18] work in progress, only rectangles and not working fine --- .../rectangle-basic-shape.tsx | 1 + .../canvas/use-selection.business.ts | 0 .../providers/canvas/use-selection.hook.ts | 43 ++++++++++++++++--- 3 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 src/core/providers/canvas/use-selection.business.ts diff --git a/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx b/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx index ae4ed965..6008b939 100644 --- a/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx +++ b/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx @@ -53,6 +53,7 @@ export const RectangleShape = forwardRef((props, ref) => { height={restrictedHeight} {...shapeProps} onClick={handleSelection} + data-id={id} > { + return ( + arrayIds.length === 1 && + selectedShapesRefs.current.find( + item => item.attrs['data-id'].toString() === arrayIds[0] + ) !== undefined + ); + }; + + const deselectSingleItemOnMultipleSelection = ( + formerShapeIds: string[], + unselectId: string + ) => { + if (selectedShapesRefs.current) { + const trimmedShapeIds = formerShapeIds.filter(id => id !== unselectId); + + selectedShapesRefs.current = trimmedShapeIds.map( + id => shapeRefs.current[id].current + ); + + setSelectedShapesIds(trimmedShapeIds); + } + }; + const handleSelected = ( ids: string[] | string, type: ShapeType, @@ -67,12 +91,19 @@ export const useSelection = ( ); setSelectedShapesIds(arrayIds); } else { - // Multiple selection, just push what is selected to the current selection - selectedShapesRefs.current = selectedShapesRefs.current.concat( - arrayIds.map(id => shapeRefs.current[id].current) - ); - - setSelectedShapesIds(formerShapeIds => [...formerShapeIds, ...arrayIds]); + if (isDeselectSingleItem(arrayIds)) { + deselectSingleItemOnMultipleSelection(selectedShapesIds, arrayIds[0]); + } else { + // Multiple selection, just push what is selected to the current selection + selectedShapesRefs.current = selectedShapesRefs.current.concat( + arrayIds.map(id => shapeRefs.current[id].current) + ); + + setSelectedShapesIds(formerShapeIds => [ + ...formerShapeIds, + ...arrayIds, + ]); + } } transformerRef?.current?.nodes(selectedShapesRefs.current); From 19d41fa55b9a2c8c68e360da70b7909b94e88391 Mon Sep 17 00:00:00 2001 From: "daniel.sanchez" Date: Tue, 24 Sep 2024 09:11:40 +0200 Subject: [PATCH 05/18] add rectangle shape basic specs --- e2e/devices.spec.ts | 53 ------------------- e2e/helpers/index.ts | 2 + e2e/helpers/konva-testing.helpers.ts | 49 +++++++++++++++++ e2e/helpers/position.helpers.ts | 29 ++++++++++ e2e/rectangle-shape.spec.ts | 32 +++++++++++ .../rectangle-basic-shape.tsx | 2 + src/pods/canvas/canvas.pod.tsx | 9 +++- 7 files changed, 121 insertions(+), 55 deletions(-) delete mode 100644 e2e/devices.spec.ts create mode 100644 e2e/helpers/index.ts create mode 100644 e2e/helpers/konva-testing.helpers.ts create mode 100644 e2e/helpers/position.helpers.ts create mode 100644 e2e/rectangle-shape.spec.ts diff --git a/e2e/devices.spec.ts b/e2e/devices.spec.ts deleted file mode 100644 index 35f590be..00000000 --- a/e2e/devices.spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { test, expect, Locator } from '@playwright/test'; - -test('has Devices group', async ({ page }) => { - await page.goto(''); - - await expect(page.getByText('Devices')).toBeVisible(); -}); - -test('has browser component', async ({ page }) => { - await page.goto(''); - await page.getByText('Devices').click(); - - await expect(page.getByAltText('Browser')).toBeVisible(); -}); - -const getPosition = async (locator: Locator) => { - const box = (await locator.boundingBox()) || { - x: 0, - y: 0, - width: 0, - height: 0, - }; - return { x: box.x + box.width / 2, y: box.y + box.height / 2 }; -}; - -test('can add browser component to canvas', async ({ page }) => { - await page.goto(''); - await page.getByText('Devices').click(); - const browser = page.getByAltText('Browser'); - - const browserPosition = await getPosition(browser); - await page.mouse.move(browserPosition.x, browserPosition.y); - await page.mouse.down(); - await page.mouse.move(browserPosition.x + 500, browserPosition.y); - await page.mouse.up(); - - // TODO: Pending to add spec to be visible on canvas - - // Properties visibles - await expect(page.getByText('Layering')).toBeVisible(); - await expect( - page.getByRole('button', { name: 'Bring to front' }) - ).toBeVisible(); - await expect( - page.getByRole('button', { name: 'Bring forward' }) - ).toBeVisible(); - await expect( - page.getByRole('button', { name: 'Send backward' }) - ).toBeVisible(); - await expect( - page.getByRole('button', { name: 'Send to back' }) - ).toBeVisible(); -}); diff --git a/e2e/helpers/index.ts b/e2e/helpers/index.ts new file mode 100644 index 00000000..dd15b414 --- /dev/null +++ b/e2e/helpers/index.ts @@ -0,0 +1,2 @@ +export * from './konva-testing.helpers'; +export * from './position.helpers'; diff --git a/e2e/helpers/konva-testing.helpers.ts b/e2e/helpers/konva-testing.helpers.ts new file mode 100644 index 00000000..89b34d5e --- /dev/null +++ b/e2e/helpers/konva-testing.helpers.ts @@ -0,0 +1,49 @@ +import { Page } from '@playwright/test'; +import { Layer } from 'konva/lib/Layer'; +import { Shape } from 'konva/lib/Shape'; + +const getLayer = async (page: Page): Promise => + await page.evaluate(() => { + const layer = (window as any).KONVA_LAYER; + return layer; + }); + +const getChildren = async (page: Page): Promise => { + const layer = await getLayer(page); + return layer?.children.flatMap(child => + Boolean((child as any)?.children) ? (child as any).children : child + ); +}; + +export const getAllByShapeType = async ( + page: Page, + shape: string +): Promise => { + const children = await getChildren(page); + const shapes = children?.filter(child => child.attrs.shapeType === shape); + if (shapes.length === 0) { + throw new Error(`No shapes found with shapeType ${shape}`); + } else { + return shapes; + } +}; + +export const getByShapeType = async ( + page: Page, + shape: string +): Promise => { + const children = await getChildren(page); + const count = children?.filter( + child => child.attrs.shapeType === shape + )?.length; + + if (count === 1) { + return children.find(child => child.attrs.shapeType === shape)!; + } else if (count > 1) { + throw new Error( + `Found ${count} shapes with shapeType ${shape} you should use getAllByShapeType` + ); + } else { + return undefined!; + } +}; diff --git a/e2e/helpers/position.helpers.ts b/e2e/helpers/position.helpers.ts new file mode 100644 index 00000000..7b11dc50 --- /dev/null +++ b/e2e/helpers/position.helpers.ts @@ -0,0 +1,29 @@ +import { Locator, Page } from '@playwright/test'; + +interface Position { + x: number; + y: number; +} + +export const getLocatorPosition = async ( + locator: Locator +): Promise => { + const box = (await locator.boundingBox()) || { + x: 0, + y: 0, + width: 0, + height: 0, + }; + return { x: box.x + box.width / 2, y: box.y + box.height / 2 }; +}; + +export const dragAndDrop = async ( + page: Page, + aPosition: Position, + bPosition: Position +): Promise => { + await page.mouse.move(aPosition.x, aPosition.y); + await page.mouse.down(); + await page.mouse.move(bPosition.x, bPosition.y); + await page.mouse.up(); +}; diff --git a/e2e/rectangle-shape.spec.ts b/e2e/rectangle-shape.spec.ts new file mode 100644 index 00000000..ea59af68 --- /dev/null +++ b/e2e/rectangle-shape.spec.ts @@ -0,0 +1,32 @@ +import { test, expect } from '@playwright/test'; +import { dragAndDrop, getByShapeType, getLocatorPosition } from './helpers'; + +test('has Basic Shapes group', async ({ page }) => { + await page.goto(''); + + await expect(page.getByText('Basic Shapes')).toBeVisible(); +}); + +test('has rectangle component', async ({ page }) => { + await page.goto(''); + await page.getByText('Basic Shapes').click(); + + await expect(page.getByAltText('Rectangle')).toBeVisible(); +}); + +test('can add rectangle component to canvas', async ({ page }) => { + await page.goto(''); + await page.getByText('Basic Shapes').click(); + const component = page.getByAltText('Rectangle'); + + const position = await getLocatorPosition(component); + await dragAndDrop(page, position, { + x: position.x + 500, + y: position.y - 240, + }); + + const rectangle = await getByShapeType(page, 'rectangle'); + expect(rectangle).toBeDefined(); + expect(rectangle.attrs.width).toEqual(160); + expect(rectangle.attrs.height).toEqual(160); +}); diff --git a/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx b/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx index ae4ed965..b9a55792 100644 --- a/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx +++ b/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx @@ -53,6 +53,8 @@ export const RectangleShape = forwardRef((props, ref) => { height={restrictedHeight} {...shapeProps} onClick={handleSelection} + data-id={id} + shapeType={shapeType} > { useKeyboardDisplacement(); + const layerRef = useRef(null); + if (typeof window !== 'undefined') { + (window as any).KONVA_LAYER = layerRef.current; + } + { /* TODO: add other animation for isDraggerOver */ } @@ -127,7 +132,7 @@ export const CanvasPod = () => { onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} > - + { /* TODO compentize and simplify this */ shapes.map(shape => { From c51004e8f8df4124a757142be036522f7689ac2f Mon Sep 17 00:00:00 2001 From: "daniel.sanchez" Date: Tue, 24 Sep 2024 09:27:50 +0200 Subject: [PATCH 06/18] update type --- e2e/helpers/konva-testing.helpers.ts | 11 ++++++----- e2e/rectangle-shape.spec.ts | 3 ++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/e2e/helpers/konva-testing.helpers.ts b/e2e/helpers/konva-testing.helpers.ts index 89b34d5e..2aa1dbe7 100644 --- a/e2e/helpers/konva-testing.helpers.ts +++ b/e2e/helpers/konva-testing.helpers.ts @@ -1,6 +1,7 @@ import { Page } from '@playwright/test'; import { Layer } from 'konva/lib/Layer'; import { Shape } from 'konva/lib/Shape'; +import { Group } from 'konva/lib/Group'; const getLayer = async (page: Page): Promise => await page.evaluate(() => { @@ -8,7 +9,7 @@ const getLayer = async (page: Page): Promise => return layer; }); -const getChildren = async (page: Page): Promise => { +const getChildren = async (page: Page): Promise<(Group | Shape)[]> => { const layer = await getLayer(page); return layer?.children.flatMap(child => Boolean((child as any)?.children) ? (child as any).children : child @@ -18,7 +19,7 @@ const getChildren = async (page: Page): Promise => { export const getAllByShapeType = async ( page: Page, shape: string -): Promise => { +): Promise<(Group | Shape)[]> => { const children = await getChildren(page); const shapes = children?.filter(child => child.attrs.shapeType === shape); if (shapes.length === 0) { @@ -31,19 +32,19 @@ export const getAllByShapeType = async ( export const getByShapeType = async ( page: Page, shape: string -): Promise => { +): Promise => { const children = await getChildren(page); const count = children?.filter( child => child.attrs.shapeType === shape )?.length; if (count === 1) { - return children.find(child => child.attrs.shapeType === shape)!; + return children.find(child => child.attrs.shapeType === shape); } else if (count > 1) { throw new Error( `Found ${count} shapes with shapeType ${shape} you should use getAllByShapeType` ); } else { - return undefined!; + return undefined; } }; diff --git a/e2e/rectangle-shape.spec.ts b/e2e/rectangle-shape.spec.ts index ea59af68..be35ae18 100644 --- a/e2e/rectangle-shape.spec.ts +++ b/e2e/rectangle-shape.spec.ts @@ -1,4 +1,5 @@ import { test, expect } from '@playwright/test'; +import { Group } from 'konva/lib/Group'; import { dragAndDrop, getByShapeType, getLocatorPosition } from './helpers'; test('has Basic Shapes group', async ({ page }) => { @@ -25,7 +26,7 @@ test('can add rectangle component to canvas', async ({ page }) => { y: position.y - 240, }); - const rectangle = await getByShapeType(page, 'rectangle'); + const rectangle = (await getByShapeType(page, 'rectangle')) as Group; expect(rectangle).toBeDefined(); expect(rectangle.attrs.width).toEqual(160); expect(rectangle.attrs.height).toEqual(160); From c905742beb9e6bf01eb82e1eb0d324557456d37e Mon Sep 17 00:00:00 2001 From: "daniel.sanchez" Date: Tue, 24 Sep 2024 09:36:59 +0200 Subject: [PATCH 07/18] update ci workflows --- .github/workflows/ci.yml | 11 ++++++----- playwright.config.ts | 8 -------- vite.config.ts | 16 ++++++---------- 3 files changed, 12 insertions(+), 23 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ae482095..e3518c44 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,10 +9,10 @@ jobs: - name: Checkout repository uses: actions/checkout@v4 - - name: Use Node.js 18.13.0 + - name: Use Node.js 20.17.0 uses: actions/setup-node@v4 with: - node-version: '18.13.0' + node-version: '20.17.0' cache: 'npm' - name: Install dependencies @@ -33,14 +33,15 @@ jobs: - name: Checkout repository uses: actions/checkout@v4 - - name: Use Node.js 18.13.0 + - name: Use Node.js 20.17.0 uses: actions/setup-node@v4 with: - node-version: '18.13.0' + node-version: '20.17.0' cache: 'npm' - name: Install dependencies - run: npm ci + run: | + npm ci - name: Build run: npm run build diff --git a/playwright.config.ts b/playwright.config.ts index a812abf1..f09b5f3c 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -13,23 +13,15 @@ export default defineConfig({ baseURL: BASE_URL, trace: 'on-first-retry', }, - - /* Configure projects for major browsers */ projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, - { name: 'firefox', use: { ...devices['Desktop Firefox'] }, }, - - { - name: 'webkit', - use: { ...devices['Desktop Safari'] }, - }, ], webServer: { command: 'npm run dev', diff --git a/vite.config.ts b/vite.config.ts index c71f18f2..55ba0a94 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,16 +1,10 @@ import { defineConfig } from 'vite'; import { fileURLToPath, URL } from 'node:url'; import react from '@vitejs/plugin-react'; - -import type { UserConfig as VitestUserConfigInterface } from 'vitest/config'; - -const vitestConfig: VitestUserConfigInterface = { - test: { - globals: true, - restoreMocks: true, - environment: 'jsdom', - }, -}; +import { + type UserConfig as VitestUserConfigInterface, + configDefaults, +} from 'vitest/config'; // https://vitejs.dev/config/ export default defineConfig({ @@ -26,6 +20,8 @@ export default defineConfig({ test: { globals: true, environment: 'jsdom', + restoreMocks: true, + exclude: [...configDefaults.exclude, 'e2e/*'], }, resolve: { alias: { From 147ec24ff4f2fc3fa4380831ce8c79338a5e697b Mon Sep 17 00:00:00 2001 From: "daniel.sanchez" Date: Tue, 24 Sep 2024 09:37:47 +0200 Subject: [PATCH 08/18] update --- .github/workflows/ci.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e3518c44..a58eaccc 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -40,8 +40,7 @@ jobs: cache: 'npm' - name: Install dependencies - run: | - npm ci + run: npm ci - name: Build run: npm run build From 6be00534881afde618bef27eae952c3c7f29130a Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Fri, 27 Sep 2024 12:45:27 +0200 Subject: [PATCH 09/18] add unit test for mapTextToSections function --- .../accordion/accordion.business.spec.ts | 83 +++++++++++++++++++ .../accordion/accordion.business.ts | 9 -- 2 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 src/common/components/front-rich-components/accordion/accordion.business.spec.ts diff --git a/src/common/components/front-rich-components/accordion/accordion.business.spec.ts b/src/common/components/front-rich-components/accordion/accordion.business.spec.ts new file mode 100644 index 00000000..2bbb8e99 --- /dev/null +++ b/src/common/components/front-rich-components/accordion/accordion.business.spec.ts @@ -0,0 +1,83 @@ +import { describe, it, expect } from 'vitest'; +import { mapTextToSections } from './accordion.business'; + +describe('mapTextToSections', () => { + it('should return default sections when text is empty', () => { + const emptyText = ''; + + const result = mapTextToSections(emptyText); + + expect(result).toEqual({ + sections: ['Section A', 'Section B'], + selectedSectionIndex: 0, + }); + }); + + it('should return 1 section and selectedSectionIndex = 0 when text has 1 section', () => { + const singleSectionText = 'Section A'; + + const result = mapTextToSections(singleSectionText); + + expect(result).toEqual({ + sections: ['Section A'], + selectedSectionIndex: 0, + }); + }); + + it('should return 2 sections and selectedSectionIndex = 1 when second section starts with [*]', () => { + const twoSectionsText = 'Section A\n[*]Section B'; + + const result = mapTextToSections(twoSectionsText); + + expect(result).toEqual({ + sections: ['Section A', 'Section B'], + selectedSectionIndex: 1, + }); + }); + + it('should return 2 sections and selectedSectionIndex = 0 when no section starts with [*]', () => { + const twoSectionsText = 'Section A\nSection B'; + + const result = mapTextToSections(twoSectionsText); + + expect(result).toEqual({ + sections: ['Section A', 'Section B'], + selectedSectionIndex: 0, + }); + }); + + it('should pick the first section with [*] and remove [*] from all sections', () => { + const multipleSelectedSectionsText = + '[*]Section A\n[*]Section B\n[*]Section C'; + + const result = mapTextToSections(multipleSelectedSectionsText); + + expect(result).toEqual({ + sections: ['Section A', 'Section B', 'Section C'], + selectedSectionIndex: 0, + }); + }); + + it('should handle sections with special characters', () => { + const textWithSpecialChars = 'Section @A!\n[*]Section #B$'; + + const result = mapTextToSections(textWithSpecialChars); + + expect(result).toEqual({ + sections: ['Section @A!', 'Section #B$'], + selectedSectionIndex: 1, + }); + }); + + it('should select the first marked section and remove [*] from all when multiple sections have [*]', () => { + const multipleSelectedText = + 'Section A\n[*]Section B\nSection C\n[*]Section D'; + + const result = mapTextToSections(multipleSelectedText); + + expect(result).toEqual({ + sections: ['Section A', 'Section B', 'Section C', 'Section D'], + selectedSectionIndex: 1, + }); + }); +}); diff --git a/src/common/components/front-rich-components/accordion/accordion.business.ts b/src/common/components/front-rich-components/accordion/accordion.business.ts index beacf84d..08422104 100644 --- a/src/common/components/front-rich-components/accordion/accordion.business.ts +++ b/src/common/components/front-rich-components/accordion/accordion.business.ts @@ -1,8 +1,6 @@ import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { ShapeSizeRestrictions } from '@/core/model'; -// TODO: Add unit tests #169 - interface SizeInfo { width: number; height: number; @@ -42,13 +40,6 @@ interface SectionsInfo { selectedSectionIndex: number; } -// TODO: Add Unit tests -// case 1 if text is empty just show default sections -// case 2 if text has 1 section, then show 1 section and selectedSectionIndex = 0 -// case 3 if text has 2 sections, and section to starts with [*] then show 2 sections and selectedSectionIndex = 1, and section with removed [*] -// case 4 if text has 2 sections, and no section to starts with [*] then show 2 sections and selectedSectionIndex = 0, and section with removed [*] -// ... -// If there are more than one section selected, pick the first one and remove the [*] from all of them export const mapTextToSections = (text: string): SectionsInfo => { if (!text) { return { From dbe224816bd995e6ef0ba8ef5e17eddec22a8f9e Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 28 Sep 2024 19:27:19 +0200 Subject: [PATCH 10/18] fix un selecte cmd --- .gitignore | 4 ++++ src/common/utils/shapes/on-click-keyboard.ts | 2 +- src/core/providers/canvas/use-selection.hook.ts | 3 +++ src/pods/canvas/use-multiple-selection-shape.hook.tsx | 6 ++++++ 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 503bb516..dfc9ccb2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ +# Playwright +playwright-report/ +test-results/ + # Logs logs *.log diff --git a/src/common/utils/shapes/on-click-keyboard.ts b/src/common/utils/shapes/on-click-keyboard.ts index 468d4725..72c03ce6 100644 --- a/src/common/utils/shapes/on-click-keyboard.ts +++ b/src/common/utils/shapes/on-click-keyboard.ts @@ -1,7 +1,7 @@ import Konva from 'konva'; export const isUserDoingMultipleSelectionUsingCtrlOrCmdKey = ( - e: Konva.KonvaEventObject + e: Konva.KonvaEventObject | Konva.KonvaEventObject ) => { // Ctrl in Windows o Cmd en Mac const isCtrlOrCmdPressed = e.evt.ctrlKey || e.evt.metaKey; diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts index c066460b..3efa945d 100644 --- a/src/core/providers/canvas/use-selection.hook.ts +++ b/src/core/providers/canvas/use-selection.hook.ts @@ -81,6 +81,8 @@ export const useSelection = ( type: ShapeType, isUserDoingMultipleSelection: boolean ) => { + console.log('** handleSelected **'); + console.trace(); // I want to kniw if the ids is string or array const arrayIds = typeof ids === 'string' ? [ids] : ids; @@ -107,6 +109,7 @@ export const useSelection = ( } transformerRef?.current?.nodes(selectedShapesRefs.current); + //transformerRef?.current?.nodes([shapeRefs.current[id].current]); // Todo set type only if single selection setSelectedShapeType(type); diff --git a/src/pods/canvas/use-multiple-selection-shape.hook.tsx b/src/pods/canvas/use-multiple-selection-shape.hook.tsx index 13bf5cdd..4e53fa6c 100644 --- a/src/pods/canvas/use-multiple-selection-shape.hook.tsx +++ b/src/pods/canvas/use-multiple-selection-shape.hook.tsx @@ -85,6 +85,12 @@ export const useMultipleSelectionShapeHook = ( const handleMouseDown = ( e: Konva.KonvaEventObject | Konva.KonvaEventObject ) => { + // 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)) { + return; + } + let mousePointerStageBasedCoord = e.target ?.getStage() ?.getPointerPosition() ?? { From 96f4149b6479472b201cc779475e8171c151a509 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 28 Sep 2024 19:51:44 +0200 Subject: [PATCH 11/18] refactor folders --- .../front-basic-shapes}/circle-basic-shape.tsx | 4 ++-- .../front-basic-shapes}/diamond-shape.tsx | 4 ++-- .../image-shape/components/no-image.component.tsx | 0 .../front-basic-shapes}/image-shape/image-shape.tsx | 2 +- .../front-basic-shapes}/image-shape/index.ts | 0 .../front-basic-shapes}/index.ts | 0 .../front-basic-shapes}/large-arrow-shape.tsx | 4 ++-- .../front-basic-shapes}/line-basic-shape.tsx | 4 ++-- .../front-basic-shapes}/postit-basic-shape.tsx | 4 ++-- .../front-basic-shapes}/rectangle-basic-shape.tsx | 4 ++-- .../front-basic-shapes}/star-shape.tsx | 4 ++-- .../front-basic-shapes}/triangle-basic-shape.tsx | 4 ++-- .../front-components/button-shape.tsx | 4 ++-- .../front-components/checkbox-shape.tsx | 4 ++-- .../front-components/combobox-shape.tsx | 4 ++-- .../front-components/datepickerinput-shape.tsx | 4 ++-- .../front-components/horizontalscrollbar-shape.tsx | 2 +- .../front-components/icon-shape.tsx | 2 +- .../{ => mock-components}/front-components/index.ts | 0 .../front-components/input-shape.tsx | 4 ++-- .../front-components/label-shape.tsx | 4 ++-- .../front-components/listbox/index.ts | 0 .../listbox/listbox-shape.business.ts | 0 .../front-components/listbox/listbox-shape.tsx | 2 +- .../front-components/progressbar-shape.tsx | 4 ++-- .../front-components/radiobutton-shape.tsx | 4 ++-- .../front-components/shape.const.ts | 0 .../front-components/shape.model.ts | 0 .../front-components/slider-shape.tsx | 2 +- .../front-components/textarea-shape.tsx | 4 ++-- .../front-components/timepickerinput-shape.tsx | 4 ++-- .../front-components/toggleswitch-shape.tsx | 4 ++-- .../front-components/tooltip-shape.tsx | 4 ++-- .../front-components/verticalscrollbar-shape.tsx | 2 +- .../front-containers/browserwindow-shape.tsx | 2 +- .../{ => mock-components}/front-containers/index.ts | 0 .../front-containers/mobilephone-shape.tsx | 2 +- .../front-containers/modal-dialog-shape.tsx | 2 +- .../front-containers/tablet-shape.tsx | 2 +- .../accordion/accordion.business.ts | 0 .../front-rich-components/accordion/accordion.tsx | 2 +- .../components/accordion-all-parts.component.tsx | 0 .../components/accordion-body.component.tsx | 2 +- .../components/accordion-header.component.tsx | 2 +- .../accordion/components/index.ts | 0 .../accordion/components/triangle-down.component.tsx | 0 .../accordion/components/triangle-lef.component.tsx | 0 .../components/triangle-selector.component.tsx | 0 .../front-rich-components/accordion/index.ts | 0 .../front-rich-components/appBar.tsx | 4 ++-- .../front-rich-components/bar-chart.tsx | 2 +- .../breadcrumb/breadcrumb.business.ts | 0 .../front-rich-components/breadcrumb/breadcrumb.tsx | 4 ++-- .../front-rich-components/breadcrumb/index.ts | 0 .../front-rich-components/buttonBar/buttonBar.tsx | 4 ++-- .../calendar/calendar.business.spec.ts | 0 .../calendar/calendar.business.tsx | 0 .../front-rich-components/calendar/calendar.tsx | 2 +- .../front-rich-components/calendar/index.ts | 0 .../horizontal-menu/horizontal-menu.tsx | 4 ++-- .../front-rich-components/index.ts | 0 .../front-rich-components/line-chart.tsx | 2 +- .../front-rich-components/map-chart.tsx | 2 +- .../front-rich-components/modal/index.ts | 0 .../front-rich-components/modal/modal.tsx | 4 ++-- .../front-rich-components/modal/modal.utils.ts | 0 .../front-rich-components/pie-chart.tsx | 2 +- .../table/components/filter-triangle.tsx | 0 .../front-rich-components/table/index.ts | 0 .../table/table-col-width.utils.spec.ts | 0 .../table/table-col-width.utils.ts | 0 .../front-rich-components/table/table.tsx | 2 +- .../front-rich-components/table/table.utils.ts | 0 .../front-rich-components/tabsbar/index.ts | 0 .../front-rich-components/tabsbar/tabsbar-shape.tsx | 2 +- .../front-rich-components/vertical-menu/index.ts | 0 .../vertical-menu/vertical-menu.business.ts | 0 .../vertical-menu/vertical-menu.tsx | 4 ++-- .../front-rich-components/video-player.tsx | 2 +- .../front-text-components/heading1-text-shape.tsx | 4 ++-- .../front-text-components/heading2-text-shape.tsx | 4 ++-- .../front-text-components/heading3-text-shape.tsx | 4 ++-- .../front-text-components/index.ts | 0 .../front-text-components/normaltext-shape.tsx | 4 ++-- .../front-text-components/paragraph-text-shape.tsx | 4 ++-- .../front-text-components/smalltext-shape.tsx | 4 ++-- src/common/components/shapes/use-shape-props.hook.ts | 2 +- .../components/shapes/use-shape-selection.hook.ts | 2 +- src/pods/canvas/canvas.model.ts | 12 ++++++------ .../simple-basic-shapes/circle.renderer.tsx | 2 +- .../simple-basic-shapes/diamond.renderer.tsx | 2 +- .../simple-basic-shapes/image.renderer.tsx | 2 +- .../simple-basic-shapes/large-arrow.renderer.tsx | 2 +- .../simple-basic-shapes/line.renderer.tsx | 2 +- .../simple-basic-shapes/postit.rerender.tsx | 2 +- .../simple-basic-shapes/rectangle.rerender.tsx | 2 +- .../simple-basic-shapes/star.renderer.tsx | 2 +- .../simple-basic-shapes/triangle.renderer.tsx | 2 +- .../simple-component/button.renderer.tsx | 2 +- .../simple-component/checkbox.renderer.tsx | 2 +- .../simple-component/combobox.renderer.tsx | 2 +- .../simple-component/datepickerinput.renderer.tsx | 2 +- .../horizontalscrollbar.renderer.tsx | 2 +- .../simple-component/icon.renderer.tsx | 2 +- .../simple-component/input.renderer.tsx | 2 +- .../simple-component/label.renderer.tsx | 2 +- .../simple-component/listbox.renderer.tsx | 2 +- .../simple-component/notfound.renderer.tsx | 2 +- .../simple-component/progressbar.renderer.tsx | 2 +- .../simple-component/radiobutton.renderer.tsx | 2 +- .../simple-component/slider.renderer.tsx | 2 +- .../simple-component/textarea.renderer.tsx | 2 +- .../simple-component/timepickerinput.renderer.tsx | 2 +- .../simple-component/toggleswitch.renderer.tsx | 2 +- .../simple-component/tooltip.renderer.tsx | 2 +- .../simple-component/verticalscrollbar.renderer.tsx | 2 +- .../simple-container/browserwindow.renderer.tsx | 2 +- .../mobilephonecontainer.renderer.tsx | 2 +- .../modal-dialog-container.renderer.tsx | 2 +- .../simple-container/tablet.render.tsx | 2 +- .../simple-rich-components/accordion.renderer.tsx | 2 +- .../simple-rich-components/appBar.renderer.tsx | 2 +- .../simple-rich-components/bar-chart.renderer.tsx | 2 +- .../simple-rich-components/breadcrumb.renderer.tsx | 2 +- .../simple-rich-components/button-bar.renderer.tsx | 2 +- .../simple-rich-components/calendar.renderer.tsx | 2 +- .../horizontal-menu.renderer.tsx | 2 +- .../simple-rich-components/line-chart.renderer.tsx | 2 +- .../simple-rich-components/map-chart.renderer.tsx | 2 +- .../simple-rich-components/modal.renderer.tsx | 2 +- .../simple-rich-components/pie-chart.renderer.tsx | 2 +- .../simple-rich-components/table.renderer.tsx | 2 +- .../simple-rich-components/tabsbar.renderer.tsx | 2 +- .../vertical-menu.renderer.tsx | 2 +- .../simple-rich-components/video-player.renderer.tsx | 2 +- .../simple-text-components/heading1.renderer.tsx | 2 +- .../simple-text-components/heading2.renderer.tsx | 2 +- .../simple-text-components/heading3.renderer.tsx | 2 +- .../simple-text-components/normaltext.renderer.tsx | 2 +- .../simple-text-components/paragraph.renderer.tsx | 2 +- .../simple-text-components/smalltext.renderer.tsx | 2 +- src/pods/canvas/use-drop-image-from-desktop.tsx | 2 +- .../border-radius/border-radius.component.tsx | 2 +- 143 files changed, 147 insertions(+), 147 deletions(-) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/circle-basic-shape.tsx (91%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/diamond-shape.tsx (92%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/image-shape/components/no-image.component.tsx (100%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/image-shape/image-shape.tsx (96%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/image-shape/index.ts (100%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/index.ts (100%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/large-arrow-shape.tsx (93%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/line-basic-shape.tsx (91%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/postit-basic-shape.tsx (94%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/rectangle-basic-shape.tsx (91%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/star-shape.tsx (91%) rename src/common/components/{front-basic-sapes => mock-components/front-basic-shapes}/triangle-basic-shape.tsx (92%) rename src/common/components/{ => mock-components}/front-components/button-shape.tsx (92%) rename src/common/components/{ => mock-components}/front-components/checkbox-shape.tsx (94%) rename src/common/components/{ => mock-components}/front-components/combobox-shape.tsx (94%) rename src/common/components/{ => mock-components}/front-components/datepickerinput-shape.tsx (94%) rename src/common/components/{ => mock-components}/front-components/horizontalscrollbar-shape.tsx (97%) rename src/common/components/{ => mock-components}/front-components/icon-shape.tsx (96%) rename src/common/components/{ => mock-components}/front-components/index.ts (100%) rename src/common/components/{ => mock-components}/front-components/input-shape.tsx (93%) rename src/common/components/{ => mock-components}/front-components/label-shape.tsx (91%) rename src/common/components/{ => mock-components}/front-components/listbox/index.ts (100%) rename src/common/components/{ => mock-components}/front-components/listbox/listbox-shape.business.ts (100%) rename src/common/components/{ => mock-components}/front-components/listbox/listbox-shape.tsx (98%) rename src/common/components/{ => mock-components}/front-components/progressbar-shape.tsx (92%) rename src/common/components/{ => mock-components}/front-components/radiobutton-shape.tsx (94%) rename src/common/components/{ => mock-components}/front-components/shape.const.ts (100%) rename src/common/components/{ => mock-components}/front-components/shape.model.ts (100%) rename src/common/components/{ => mock-components}/front-components/slider-shape.tsx (96%) rename src/common/components/{ => mock-components}/front-components/textarea-shape.tsx (92%) rename src/common/components/{ => mock-components}/front-components/timepickerinput-shape.tsx (94%) rename src/common/components/{ => mock-components}/front-components/toggleswitch-shape.tsx (92%) rename src/common/components/{ => mock-components}/front-components/tooltip-shape.tsx (95%) rename src/common/components/{ => mock-components}/front-components/verticalscrollbar-shape.tsx (97%) rename src/common/components/{ => mock-components}/front-containers/browserwindow-shape.tsx (97%) rename src/common/components/{ => mock-components}/front-containers/index.ts (100%) rename src/common/components/{ => mock-components}/front-containers/mobilephone-shape.tsx (96%) rename src/common/components/{ => mock-components}/front-containers/modal-dialog-shape.tsx (96%) rename src/common/components/{ => mock-components}/front-containers/tablet-shape.tsx (96%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/accordion.business.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/accordion.tsx (96%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/components/accordion-all-parts.component.tsx (100%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/components/accordion-body.component.tsx (85%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/components/accordion-header.component.tsx (90%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/components/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/components/triangle-down.component.tsx (100%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/components/triangle-lef.component.tsx (100%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/components/triangle-selector.component.tsx (100%) rename src/common/components/{ => mock-components}/front-rich-components/accordion/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/appBar.tsx (95%) rename src/common/components/{ => mock-components}/front-rich-components/bar-chart.tsx (96%) rename src/common/components/{ => mock-components}/front-rich-components/breadcrumb/breadcrumb.business.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/breadcrumb/breadcrumb.tsx (94%) rename src/common/components/{ => mock-components}/front-rich-components/breadcrumb/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/buttonBar/buttonBar.tsx (94%) rename src/common/components/{ => mock-components}/front-rich-components/calendar/calendar.business.spec.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/calendar/calendar.business.tsx (100%) rename src/common/components/{ => mock-components}/front-rich-components/calendar/calendar.tsx (98%) rename src/common/components/{ => mock-components}/front-rich-components/calendar/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/horizontal-menu/horizontal-menu.tsx (95%) rename src/common/components/{ => mock-components}/front-rich-components/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/line-chart.tsx (97%) rename src/common/components/{ => mock-components}/front-rich-components/map-chart.tsx (97%) rename src/common/components/{ => mock-components}/front-rich-components/modal/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/modal/modal.tsx (96%) rename src/common/components/{ => mock-components}/front-rich-components/modal/modal.utils.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/pie-chart.tsx (96%) rename src/common/components/{ => mock-components}/front-rich-components/table/components/filter-triangle.tsx (100%) rename src/common/components/{ => mock-components}/front-rich-components/table/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/table/table-col-width.utils.spec.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/table/table-col-width.utils.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/table/table.tsx (98%) rename src/common/components/{ => mock-components}/front-rich-components/table/table.utils.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/tabsbar/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/tabsbar/tabsbar-shape.tsx (97%) rename src/common/components/{ => mock-components}/front-rich-components/vertical-menu/index.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/vertical-menu/vertical-menu.business.ts (100%) rename src/common/components/{ => mock-components}/front-rich-components/vertical-menu/vertical-menu.tsx (95%) rename src/common/components/{ => mock-components}/front-rich-components/video-player.tsx (98%) rename src/common/components/{ => mock-components}/front-text-components/heading1-text-shape.tsx (91%) rename src/common/components/{ => mock-components}/front-text-components/heading2-text-shape.tsx (91%) rename src/common/components/{ => mock-components}/front-text-components/heading3-text-shape.tsx (91%) rename src/common/components/{ => mock-components}/front-text-components/index.ts (100%) rename src/common/components/{ => mock-components}/front-text-components/normaltext-shape.tsx (92%) rename src/common/components/{ => mock-components}/front-text-components/paragraph-text-shape.tsx (92%) rename src/common/components/{ => mock-components}/front-text-components/smalltext-shape.tsx (92%) diff --git a/src/common/components/front-basic-sapes/circle-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/circle-basic-shape.tsx similarity index 91% rename from src/common/components/front-basic-sapes/circle-basic-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/circle-basic-shape.tsx index 7ceb61d0..54b6495a 100644 --- a/src/common/components/front-basic-sapes/circle-basic-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/circle-basic-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Circle, Group } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const circleShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-basic-sapes/diamond-shape.tsx b/src/common/components/mock-components/front-basic-shapes/diamond-shape.tsx similarity index 92% rename from src/common/components/front-basic-sapes/diamond-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/diamond-shape.tsx index 3113f79c..c603229b 100644 --- a/src/common/components/front-basic-sapes/diamond-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/diamond-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Line } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const diamondShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-basic-sapes/image-shape/components/no-image.component.tsx b/src/common/components/mock-components/front-basic-shapes/image-shape/components/no-image.component.tsx similarity index 100% rename from src/common/components/front-basic-sapes/image-shape/components/no-image.component.tsx rename to src/common/components/mock-components/front-basic-shapes/image-shape/components/no-image.component.tsx diff --git a/src/common/components/front-basic-sapes/image-shape/image-shape.tsx b/src/common/components/mock-components/front-basic-shapes/image-shape/image-shape.tsx similarity index 96% rename from src/common/components/front-basic-sapes/image-shape/image-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/image-shape/image-shape.tsx index d1265aac..8850921c 100644 --- a/src/common/components/front-basic-sapes/image-shape/image-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/image-shape/image-shape.tsx @@ -6,7 +6,7 @@ import { Group, Image as KonvaImage } from 'react-konva'; import { NoImageSelected } from './components/no-image.component'; import useImage from 'use-image'; import Konva from 'konva'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; const imageShapeRestrictions: ShapeSizeRestrictions = { minWidth: 10, diff --git a/src/common/components/front-basic-sapes/image-shape/index.ts b/src/common/components/mock-components/front-basic-shapes/image-shape/index.ts similarity index 100% rename from src/common/components/front-basic-sapes/image-shape/index.ts rename to src/common/components/mock-components/front-basic-shapes/image-shape/index.ts diff --git a/src/common/components/front-basic-sapes/index.ts b/src/common/components/mock-components/front-basic-shapes/index.ts similarity index 100% rename from src/common/components/front-basic-sapes/index.ts rename to src/common/components/mock-components/front-basic-shapes/index.ts diff --git a/src/common/components/front-basic-sapes/large-arrow-shape.tsx b/src/common/components/mock-components/front-basic-shapes/large-arrow-shape.tsx similarity index 93% rename from src/common/components/front-basic-sapes/large-arrow-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/large-arrow-shape.tsx index b6c9b5a2..f71aa854 100644 --- a/src/common/components/front-basic-sapes/large-arrow-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/large-arrow-shape.tsx @@ -3,8 +3,8 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef, useMemo } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const LargeArrowShapeSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-basic-sapes/line-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx similarity index 91% rename from src/common/components/front-basic-sapes/line-basic-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx index d5a238dd..eeaf2235 100644 --- a/src/common/components/front-basic-sapes/line-basic-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx @@ -3,8 +3,8 @@ import { Group, Line, Rect } from 'react-konva'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { ShapeProps } from '../front-components/shape.model'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const lineShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-basic-sapes/postit-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/postit-basic-shape.tsx similarity index 94% rename from src/common/components/front-basic-sapes/postit-basic-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/postit-basic-shape.tsx index 72ff9f67..1097ad10 100644 --- a/src/common/components/front-basic-sapes/postit-basic-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/postit-basic-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text } from 'react-konva'; import { POSTIT_SHAPE } from '../front-components/shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const postItShapeRestrictions: ShapeSizeRestrictions = { minWidth: 80, diff --git a/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/rectangle-basic-shape.tsx similarity index 91% rename from src/common/components/front-basic-sapes/rectangle-basic-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/rectangle-basic-shape.tsx index 6008b939..e022f026 100644 --- a/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/rectangle-basic-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect } from 'react-konva'; import { BASIC_SHAPE } from '../front-components/shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const rectangleShapeRestrictions: ShapeSizeRestrictions = { minWidth: 10, diff --git a/src/common/components/front-basic-sapes/star-shape.tsx b/src/common/components/mock-components/front-basic-shapes/star-shape.tsx similarity index 91% rename from src/common/components/front-basic-sapes/star-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/star-shape.tsx index d018c676..e47d66a6 100644 --- a/src/common/components/front-basic-sapes/star-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/star-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Star } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const starShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-basic-sapes/triangle-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/triangle-basic-shape.tsx similarity index 92% rename from src/common/components/front-basic-sapes/triangle-basic-shape.tsx rename to src/common/components/mock-components/front-basic-shapes/triangle-basic-shape.tsx index 857c5546..ac260d29 100644 --- a/src/common/components/front-basic-sapes/triangle-basic-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/triangle-basic-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Line } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const WIDTH = 160; diff --git a/src/common/components/front-components/button-shape.tsx b/src/common/components/mock-components/front-components/button-shape.tsx similarity index 92% rename from src/common/components/front-components/button-shape.tsx rename to src/common/components/mock-components/front-components/button-shape.tsx index 5a032c80..b6a81b3f 100644 --- a/src/common/components/front-components/button-shape.tsx +++ b/src/common/components/mock-components/front-components/button-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const buttonShapeRestrictions: ShapeSizeRestrictions = { minWidth: 50, diff --git a/src/common/components/front-components/checkbox-shape.tsx b/src/common/components/mock-components/front-components/checkbox-shape.tsx similarity index 94% rename from src/common/components/front-components/checkbox-shape.tsx rename to src/common/components/mock-components/front-components/checkbox-shape.tsx index 58e2d6fe..2a87ea46 100644 --- a/src/common/components/front-components/checkbox-shape.tsx +++ b/src/common/components/mock-components/front-components/checkbox-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Line, Text } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from './shape.const'; const CHECKBOX_DEFAULT_HEIGHT = 20; diff --git a/src/common/components/front-components/combobox-shape.tsx b/src/common/components/mock-components/front-components/combobox-shape.tsx similarity index 94% rename from src/common/components/front-components/combobox-shape.tsx rename to src/common/components/mock-components/front-components/combobox-shape.tsx index 37f41311..b3d39b56 100644 --- a/src/common/components/front-components/combobox-shape.tsx +++ b/src/common/components/mock-components/front-components/combobox-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Text, Rect, Line } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from './shape.const'; const comboBoxShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx similarity index 94% rename from src/common/components/front-components/datepickerinput-shape.tsx rename to src/common/components/mock-components/front-components/datepickerinput-shape.tsx index 4d7f83e4..13748b62 100644 --- a/src/common/components/front-components/datepickerinput-shape.tsx +++ b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Line } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const datepickerInputShapeRestrictions: ShapeSizeRestrictions = { minWidth: 80, diff --git a/src/common/components/front-components/horizontalscrollbar-shape.tsx b/src/common/components/mock-components/front-components/horizontalscrollbar-shape.tsx similarity index 97% rename from src/common/components/front-components/horizontalscrollbar-shape.tsx rename to src/common/components/mock-components/front-components/horizontalscrollbar-shape.tsx index 2118cefe..8f3888cf 100644 --- a/src/common/components/front-components/horizontalscrollbar-shape.tsx +++ b/src/common/components/mock-components/front-components/horizontalscrollbar-shape.tsx @@ -3,7 +3,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const HorizontalScrollBarShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 100, diff --git a/src/common/components/front-components/icon-shape.tsx b/src/common/components/mock-components/front-components/icon-shape.tsx similarity index 96% rename from src/common/components/front-components/icon-shape.tsx rename to src/common/components/mock-components/front-components/icon-shape.tsx index a956492c..ab047832 100644 --- a/src/common/components/front-components/icon-shape.tsx +++ b/src/common/components/mock-components/front-components/icon-shape.tsx @@ -12,7 +12,7 @@ import { ShapeProps } from './shape.model'; import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider'; import { IconModal } from '@/pods/properties/components/icon-selector/modal'; import { useCanvasContext } from '@/core/providers'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const iconShapeRestrictions: ShapeSizeRestrictions = { minWidth: 25, diff --git a/src/common/components/front-components/index.ts b/src/common/components/mock-components/front-components/index.ts similarity index 100% rename from src/common/components/front-components/index.ts rename to src/common/components/mock-components/front-components/index.ts diff --git a/src/common/components/front-components/input-shape.tsx b/src/common/components/mock-components/front-components/input-shape.tsx similarity index 93% rename from src/common/components/front-components/input-shape.tsx rename to src/common/components/mock-components/front-components/input-shape.tsx index 32899dc3..b3305d3a 100644 --- a/src/common/components/front-components/input-shape.tsx +++ b/src/common/components/mock-components/front-components/input-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text } from 'react-konva'; import { INPUT_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const inputShapeRestrictions: ShapeSizeRestrictions = { minWidth: 60, diff --git a/src/common/components/front-components/label-shape.tsx b/src/common/components/mock-components/front-components/label-shape.tsx similarity index 91% rename from src/common/components/front-components/label-shape.tsx rename to src/common/components/mock-components/front-components/label-shape.tsx index 2a92b29a..ebac3f92 100644 --- a/src/common/components/front-components/label-shape.tsx +++ b/src/common/components/mock-components/front-components/label-shape.tsx @@ -3,8 +3,8 @@ 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 { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from './shape.const'; const labelSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-components/listbox/index.ts b/src/common/components/mock-components/front-components/listbox/index.ts similarity index 100% rename from src/common/components/front-components/listbox/index.ts rename to src/common/components/mock-components/front-components/listbox/index.ts diff --git a/src/common/components/front-components/listbox/listbox-shape.business.ts b/src/common/components/mock-components/front-components/listbox/listbox-shape.business.ts similarity index 100% rename from src/common/components/front-components/listbox/listbox-shape.business.ts rename to src/common/components/mock-components/front-components/listbox/listbox-shape.business.ts diff --git a/src/common/components/front-components/listbox/listbox-shape.tsx b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx similarity index 98% rename from src/common/components/front-components/listbox/listbox-shape.tsx rename to src/common/components/mock-components/front-components/listbox/listbox-shape.tsx index 30cc3484..82dd8ff7 100644 --- a/src/common/components/front-components/listbox/listbox-shape.tsx +++ b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx @@ -7,7 +7,7 @@ import { mapListboxTextToItems, } from './listbox-shape.business'; import { BASIC_SHAPE } from '../shape.const'; -import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { useShapeProps } from '../../../shapes/use-shape-props.hook'; const listboxShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 75, diff --git a/src/common/components/front-components/progressbar-shape.tsx b/src/common/components/mock-components/front-components/progressbar-shape.tsx similarity index 92% rename from src/common/components/front-components/progressbar-shape.tsx rename to src/common/components/mock-components/front-components/progressbar-shape.tsx index 4b2e5b97..b2c4f062 100644 --- a/src/common/components/front-components/progressbar-shape.tsx +++ b/src/common/components/mock-components/front-components/progressbar-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef, useMemo } from 'react'; import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from './shape.const'; const progressBarShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-components/radiobutton-shape.tsx b/src/common/components/mock-components/front-components/radiobutton-shape.tsx similarity index 94% rename from src/common/components/front-components/radiobutton-shape.tsx rename to src/common/components/mock-components/front-components/radiobutton-shape.tsx index 42d93ed1..bb6c5e75 100644 --- a/src/common/components/front-components/radiobutton-shape.tsx +++ b/src/common/components/mock-components/front-components/radiobutton-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { Group, Circle, Text } from 'react-konva'; import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from './shape.const'; const RADIO_BUTTON_DEFAULT_HEIGHT = 18; diff --git a/src/common/components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts similarity index 100% rename from src/common/components/front-components/shape.const.ts rename to src/common/components/mock-components/front-components/shape.const.ts diff --git a/src/common/components/front-components/shape.model.ts b/src/common/components/mock-components/front-components/shape.model.ts similarity index 100% rename from src/common/components/front-components/shape.model.ts rename to src/common/components/mock-components/front-components/shape.model.ts diff --git a/src/common/components/front-components/slider-shape.tsx b/src/common/components/mock-components/front-components/slider-shape.tsx similarity index 96% rename from src/common/components/front-components/slider-shape.tsx rename to src/common/components/mock-components/front-components/slider-shape.tsx index 4dce9737..245626ca 100644 --- a/src/common/components/front-components/slider-shape.tsx +++ b/src/common/components/mock-components/front-components/slider-shape.tsx @@ -3,7 +3,7 @@ import { Group, Line, Circle } from 'react-konva'; import { ShapeProps } from './shape.model'; import { ShapeSizeRestrictions } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from './shape.const'; const sliderShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-components/textarea-shape.tsx b/src/common/components/mock-components/front-components/textarea-shape.tsx similarity index 92% rename from src/common/components/front-components/textarea-shape.tsx rename to src/common/components/mock-components/front-components/textarea-shape.tsx index 64509c17..6660b283 100644 --- a/src/common/components/front-components/textarea-shape.tsx +++ b/src/common/components/mock-components/front-components/textarea-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const textAreaShapeRestrictions: ShapeSizeRestrictions = { minWidth: 80, diff --git a/src/common/components/front-components/timepickerinput-shape.tsx b/src/common/components/mock-components/front-components/timepickerinput-shape.tsx similarity index 94% rename from src/common/components/front-components/timepickerinput-shape.tsx rename to src/common/components/mock-components/front-components/timepickerinput-shape.tsx index 65ec6d69..817e8f29 100644 --- a/src/common/components/front-components/timepickerinput-shape.tsx +++ b/src/common/components/mock-components/front-components/timepickerinput-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const timepickerInputShapeRestrictions: ShapeSizeRestrictions = { minWidth: 100, diff --git a/src/common/components/front-components/toggleswitch-shape.tsx b/src/common/components/mock-components/front-components/toggleswitch-shape.tsx similarity index 92% rename from src/common/components/front-components/toggleswitch-shape.tsx rename to src/common/components/mock-components/front-components/toggleswitch-shape.tsx index a7b1f846..7ff79b6f 100644 --- a/src/common/components/front-components/toggleswitch-shape.tsx +++ b/src/common/components/mock-components/front-components/toggleswitch-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Circle, Group, Rect } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from './shape.const'; const toggleSwitchShapeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-components/tooltip-shape.tsx b/src/common/components/mock-components/front-components/tooltip-shape.tsx similarity index 95% rename from src/common/components/front-components/tooltip-shape.tsx rename to src/common/components/mock-components/front-components/tooltip-shape.tsx index 96fb6ca0..df70ff55 100644 --- a/src/common/components/front-components/tooltip-shape.tsx +++ b/src/common/components/mock-components/front-components/tooltip-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Text, Group, Rect, Line } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const tooltipShapeRestrictions: ShapeSizeRestrictions = { minWidth: 80, diff --git a/src/common/components/front-components/verticalscrollbar-shape.tsx b/src/common/components/mock-components/front-components/verticalscrollbar-shape.tsx similarity index 97% rename from src/common/components/front-components/verticalscrollbar-shape.tsx rename to src/common/components/mock-components/front-components/verticalscrollbar-shape.tsx index 8a491e68..0d0942a1 100644 --- a/src/common/components/front-components/verticalscrollbar-shape.tsx +++ b/src/common/components/mock-components/front-components/verticalscrollbar-shape.tsx @@ -3,7 +3,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const VerticalScrollBarShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 10, diff --git a/src/common/components/front-containers/browserwindow-shape.tsx b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx similarity index 97% rename from src/common/components/front-containers/browserwindow-shape.tsx rename to src/common/components/mock-components/front-containers/browserwindow-shape.tsx index cd963717..cc89d8a9 100644 --- a/src/common/components/front-containers/browserwindow-shape.tsx +++ b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx @@ -3,7 +3,7 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Circle, Text } from 'react-konva'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const browserWindowShapeSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-containers/index.ts b/src/common/components/mock-components/front-containers/index.ts similarity index 100% rename from src/common/components/front-containers/index.ts rename to src/common/components/mock-components/front-containers/index.ts diff --git a/src/common/components/front-containers/mobilephone-shape.tsx b/src/common/components/mock-components/front-containers/mobilephone-shape.tsx similarity index 96% rename from src/common/components/front-containers/mobilephone-shape.tsx rename to src/common/components/mock-components/front-containers/mobilephone-shape.tsx index 47702427..b1a66235 100644 --- a/src/common/components/front-containers/mobilephone-shape.tsx +++ b/src/common/components/mock-components/front-containers/mobilephone-shape.tsx @@ -3,7 +3,7 @@ import { Group, Rect, Circle } from 'react-konva'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const mobilePhoneShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 150, diff --git a/src/common/components/front-containers/modal-dialog-shape.tsx b/src/common/components/mock-components/front-containers/modal-dialog-shape.tsx similarity index 96% rename from src/common/components/front-containers/modal-dialog-shape.tsx rename to src/common/components/mock-components/front-containers/modal-dialog-shape.tsx index def30a17..d65a2924 100644 --- a/src/common/components/front-containers/modal-dialog-shape.tsx +++ b/src/common/components/mock-components/front-containers/modal-dialog-shape.tsx @@ -3,7 +3,7 @@ import { Group, Rect, Text } from 'react-konva'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const modalDialogShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 250, diff --git a/src/common/components/front-containers/tablet-shape.tsx b/src/common/components/mock-components/front-containers/tablet-shape.tsx similarity index 96% rename from src/common/components/front-containers/tablet-shape.tsx rename to src/common/components/mock-components/front-containers/tablet-shape.tsx index cecd7ffb..249b92d4 100644 --- a/src/common/components/front-containers/tablet-shape.tsx +++ b/src/common/components/mock-components/front-containers/tablet-shape.tsx @@ -3,7 +3,7 @@ import { Group, Rect, Circle } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const tabletShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 200, diff --git a/src/common/components/front-rich-components/accordion/accordion.business.ts b/src/common/components/mock-components/front-rich-components/accordion/accordion.business.ts similarity index 100% rename from src/common/components/front-rich-components/accordion/accordion.business.ts rename to src/common/components/mock-components/front-rich-components/accordion/accordion.business.ts diff --git a/src/common/components/front-rich-components/accordion/accordion.tsx b/src/common/components/mock-components/front-rich-components/accordion/accordion.tsx similarity index 96% rename from src/common/components/front-rich-components/accordion/accordion.tsx rename to src/common/components/mock-components/front-rich-components/accordion/accordion.tsx index 4c57ec2f..d8a471f4 100644 --- a/src/common/components/front-rich-components/accordion/accordion.tsx +++ b/src/common/components/mock-components/front-rich-components/accordion/accordion.tsx @@ -8,7 +8,7 @@ import { calculateSelectedAccordionHeight, mapTextToSections, } from './accordion.business'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; const accordionShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 315, diff --git a/src/common/components/front-rich-components/accordion/components/accordion-all-parts.component.tsx b/src/common/components/mock-components/front-rich-components/accordion/components/accordion-all-parts.component.tsx similarity index 100% rename from src/common/components/front-rich-components/accordion/components/accordion-all-parts.component.tsx rename to src/common/components/mock-components/front-rich-components/accordion/components/accordion-all-parts.component.tsx diff --git a/src/common/components/front-rich-components/accordion/components/accordion-body.component.tsx b/src/common/components/mock-components/front-rich-components/accordion/components/accordion-body.component.tsx similarity index 85% rename from src/common/components/front-rich-components/accordion/components/accordion-body.component.tsx rename to src/common/components/mock-components/front-rich-components/accordion/components/accordion-body.component.tsx index 64b59ee0..6faef5cd 100644 --- a/src/common/components/front-rich-components/accordion/components/accordion-body.component.tsx +++ b/src/common/components/mock-components/front-rich-components/accordion/components/accordion-body.component.tsx @@ -1,6 +1,6 @@ import { forwardRef } from 'react'; import { Group, Rect } from 'react-konva'; -import { ShapeProps } from '@/common/components/front-components/shape.model'; +import { ShapeProps } from '@/common/components/mock-components/front-components/shape.model'; export const AccordionBody = forwardRef( ({ x, y, width, height, ...shapeProps }, ref) => { diff --git a/src/common/components/front-rich-components/accordion/components/accordion-header.component.tsx b/src/common/components/mock-components/front-rich-components/accordion/components/accordion-header.component.tsx similarity index 90% rename from src/common/components/front-rich-components/accordion/components/accordion-header.component.tsx rename to src/common/components/mock-components/front-rich-components/accordion/components/accordion-header.component.tsx index dea949c0..4c6b120f 100644 --- a/src/common/components/front-rich-components/accordion/components/accordion-header.component.tsx +++ b/src/common/components/mock-components/front-rich-components/accordion/components/accordion-header.component.tsx @@ -1,7 +1,7 @@ import { forwardRef } from 'react'; import { Group, Rect, Text } from 'react-konva'; import { TriangleSelector } from './triangle-selector.component'; -import { ShapeProps } from '@/common/components/front-components/shape.model'; +import { ShapeProps } from '@/common/components/mock-components/front-components/shape.model'; interface Props extends ShapeProps { isSelected: boolean; diff --git a/src/common/components/front-rich-components/accordion/components/index.ts b/src/common/components/mock-components/front-rich-components/accordion/components/index.ts similarity index 100% rename from src/common/components/front-rich-components/accordion/components/index.ts rename to src/common/components/mock-components/front-rich-components/accordion/components/index.ts diff --git a/src/common/components/front-rich-components/accordion/components/triangle-down.component.tsx b/src/common/components/mock-components/front-rich-components/accordion/components/triangle-down.component.tsx similarity index 100% rename from src/common/components/front-rich-components/accordion/components/triangle-down.component.tsx rename to src/common/components/mock-components/front-rich-components/accordion/components/triangle-down.component.tsx diff --git a/src/common/components/front-rich-components/accordion/components/triangle-lef.component.tsx b/src/common/components/mock-components/front-rich-components/accordion/components/triangle-lef.component.tsx similarity index 100% rename from src/common/components/front-rich-components/accordion/components/triangle-lef.component.tsx rename to src/common/components/mock-components/front-rich-components/accordion/components/triangle-lef.component.tsx diff --git a/src/common/components/front-rich-components/accordion/components/triangle-selector.component.tsx b/src/common/components/mock-components/front-rich-components/accordion/components/triangle-selector.component.tsx similarity index 100% rename from src/common/components/front-rich-components/accordion/components/triangle-selector.component.tsx rename to src/common/components/mock-components/front-rich-components/accordion/components/triangle-selector.component.tsx diff --git a/src/common/components/front-rich-components/accordion/index.ts b/src/common/components/mock-components/front-rich-components/accordion/index.ts similarity index 100% rename from src/common/components/front-rich-components/accordion/index.ts rename to src/common/components/mock-components/front-rich-components/accordion/index.ts diff --git a/src/common/components/front-rich-components/appBar.tsx b/src/common/components/mock-components/front-rich-components/appBar.tsx similarity index 95% rename from src/common/components/front-rich-components/appBar.tsx rename to src/common/components/mock-components/front-rich-components/appBar.tsx index 18896efb..67208aef 100644 --- a/src/common/components/front-rich-components/appBar.tsx +++ b/src/common/components/mock-components/front-rich-components/appBar.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { BASIC_SHAPE } from '../front-components/shape.const'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const AppBarShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 155, diff --git a/src/common/components/front-rich-components/bar-chart.tsx b/src/common/components/mock-components/front-rich-components/bar-chart.tsx similarity index 96% rename from src/common/components/front-rich-components/bar-chart.tsx rename to src/common/components/mock-components/front-rich-components/bar-chart.tsx index ece7bf96..bbcd2962 100644 --- a/src/common/components/front-rich-components/bar-chart.tsx +++ b/src/common/components/mock-components/front-rich-components/bar-chart.tsx @@ -3,7 +3,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const BarChartShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 100, diff --git a/src/common/components/front-rich-components/breadcrumb/breadcrumb.business.ts b/src/common/components/mock-components/front-rich-components/breadcrumb/breadcrumb.business.ts similarity index 100% rename from src/common/components/front-rich-components/breadcrumb/breadcrumb.business.ts rename to src/common/components/mock-components/front-rich-components/breadcrumb/breadcrumb.business.ts diff --git a/src/common/components/front-rich-components/breadcrumb/breadcrumb.tsx b/src/common/components/mock-components/front-rich-components/breadcrumb/breadcrumb.tsx similarity index 94% rename from src/common/components/front-rich-components/breadcrumb/breadcrumb.tsx rename to src/common/components/mock-components/front-rich-components/breadcrumb/breadcrumb.tsx index e06bc64d..0430b0bc 100644 --- a/src/common/components/front-rich-components/breadcrumb/breadcrumb.tsx +++ b/src/common/components/mock-components/front-rich-components/breadcrumb/breadcrumb.tsx @@ -3,8 +3,8 @@ import { Group, Text } from 'react-konva'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { ShapeProps } from '../../front-components/shape.model'; import { calculatePositions, mapTextToSections } from './breadcrumb.business'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../../front-components/shape.const'; export const breadcrumbShapeSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-rich-components/breadcrumb/index.ts b/src/common/components/mock-components/front-rich-components/breadcrumb/index.ts similarity index 100% rename from src/common/components/front-rich-components/breadcrumb/index.ts rename to src/common/components/mock-components/front-rich-components/breadcrumb/index.ts diff --git a/src/common/components/front-rich-components/buttonBar/buttonBar.tsx b/src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx similarity index 94% rename from src/common/components/front-rich-components/buttonBar/buttonBar.tsx rename to src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx index a4c460f0..dae97612 100644 --- a/src/common/components/front-rich-components/buttonBar/buttonBar.tsx +++ b/src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx @@ -3,8 +3,8 @@ import { Group, Rect, Text } from 'react-konva'; import { ShapeProps } from '../../front-components/shape.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 { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; import { forwardRef } from 'react'; import { extractCSVHeaders, diff --git a/src/common/components/front-rich-components/calendar/calendar.business.spec.ts b/src/common/components/mock-components/front-rich-components/calendar/calendar.business.spec.ts similarity index 100% rename from src/common/components/front-rich-components/calendar/calendar.business.spec.ts rename to src/common/components/mock-components/front-rich-components/calendar/calendar.business.spec.ts diff --git a/src/common/components/front-rich-components/calendar/calendar.business.tsx b/src/common/components/mock-components/front-rich-components/calendar/calendar.business.tsx similarity index 100% rename from src/common/components/front-rich-components/calendar/calendar.business.tsx rename to src/common/components/mock-components/front-rich-components/calendar/calendar.business.tsx diff --git a/src/common/components/front-rich-components/calendar/calendar.tsx b/src/common/components/mock-components/front-rich-components/calendar/calendar.tsx similarity index 98% rename from src/common/components/front-rich-components/calendar/calendar.tsx rename to src/common/components/mock-components/front-rich-components/calendar/calendar.tsx index 433d6aac..78368c84 100644 --- a/src/common/components/front-rich-components/calendar/calendar.tsx +++ b/src/common/components/mock-components/front-rich-components/calendar/calendar.tsx @@ -8,7 +8,7 @@ import { calculatePreviousMonth, getCurrentMonthDays, } from './calendar.business'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; import { BASIC_SHAPE } from '../../front-components/shape.const'; const calendarShapeSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-rich-components/calendar/index.ts b/src/common/components/mock-components/front-rich-components/calendar/index.ts similarity index 100% rename from src/common/components/front-rich-components/calendar/index.ts rename to src/common/components/mock-components/front-rich-components/calendar/index.ts diff --git a/src/common/components/front-rich-components/horizontal-menu/horizontal-menu.tsx b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx similarity index 95% rename from src/common/components/front-rich-components/horizontal-menu/horizontal-menu.tsx rename to src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx index 32722125..c91ba7a2 100644 --- a/src/common/components/front-rich-components/horizontal-menu/horizontal-menu.tsx +++ b/src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx @@ -4,8 +4,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { BASIC_SHAPE } from '../../front-components/shape.const'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../../shapes/use-shape-props.hook'; import { extractCSVHeaders, splitCSVContentIntoRows, diff --git a/src/common/components/front-rich-components/index.ts b/src/common/components/mock-components/front-rich-components/index.ts similarity index 100% rename from src/common/components/front-rich-components/index.ts rename to src/common/components/mock-components/front-rich-components/index.ts diff --git a/src/common/components/front-rich-components/line-chart.tsx b/src/common/components/mock-components/front-rich-components/line-chart.tsx similarity index 97% rename from src/common/components/front-rich-components/line-chart.tsx rename to src/common/components/mock-components/front-rich-components/line-chart.tsx index 5a24a149..49571b79 100644 --- a/src/common/components/front-rich-components/line-chart.tsx +++ b/src/common/components/mock-components/front-rich-components/line-chart.tsx @@ -3,7 +3,7 @@ import { Group, Line, Circle, Rect } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const LineChartShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 100, diff --git a/src/common/components/front-rich-components/map-chart.tsx b/src/common/components/mock-components/front-rich-components/map-chart.tsx similarity index 97% rename from src/common/components/front-rich-components/map-chart.tsx rename to src/common/components/mock-components/front-rich-components/map-chart.tsx index bea008f6..69f5b4ae 100644 --- a/src/common/components/front-rich-components/map-chart.tsx +++ b/src/common/components/mock-components/front-rich-components/map-chart.tsx @@ -3,7 +3,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef, useMemo } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const MapChartShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 50, diff --git a/src/common/components/front-rich-components/modal/index.ts b/src/common/components/mock-components/front-rich-components/modal/index.ts similarity index 100% rename from src/common/components/front-rich-components/modal/index.ts rename to src/common/components/mock-components/front-rich-components/modal/index.ts diff --git a/src/common/components/front-rich-components/modal/modal.tsx b/src/common/components/mock-components/front-rich-components/modal/modal.tsx similarity index 96% rename from src/common/components/front-rich-components/modal/modal.tsx rename to src/common/components/mock-components/front-rich-components/modal/modal.tsx index 09037c47..23898f1f 100644 --- a/src/common/components/front-rich-components/modal/modal.tsx +++ b/src/common/components/mock-components/front-rich-components/modal/modal.tsx @@ -4,8 +4,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { darkenColor, getModalPartsText } from './modal.utils'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../../front-components/shape.const'; const modalShapeSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-rich-components/modal/modal.utils.ts b/src/common/components/mock-components/front-rich-components/modal/modal.utils.ts similarity index 100% rename from src/common/components/front-rich-components/modal/modal.utils.ts rename to src/common/components/mock-components/front-rich-components/modal/modal.utils.ts diff --git a/src/common/components/front-rich-components/pie-chart.tsx b/src/common/components/mock-components/front-rich-components/pie-chart.tsx similarity index 96% rename from src/common/components/front-rich-components/pie-chart.tsx rename to src/common/components/mock-components/front-rich-components/pie-chart.tsx index 9bf54406..3ea0fd46 100644 --- a/src/common/components/front-rich-components/pie-chart.tsx +++ b/src/common/components/mock-components/front-rich-components/pie-chart.tsx @@ -3,7 +3,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef, useMemo } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const PieChartShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 100, diff --git a/src/common/components/front-rich-components/table/components/filter-triangle.tsx b/src/common/components/mock-components/front-rich-components/table/components/filter-triangle.tsx similarity index 100% rename from src/common/components/front-rich-components/table/components/filter-triangle.tsx rename to src/common/components/mock-components/front-rich-components/table/components/filter-triangle.tsx diff --git a/src/common/components/front-rich-components/table/index.ts b/src/common/components/mock-components/front-rich-components/table/index.ts similarity index 100% rename from src/common/components/front-rich-components/table/index.ts rename to src/common/components/mock-components/front-rich-components/table/index.ts diff --git a/src/common/components/front-rich-components/table/table-col-width.utils.spec.ts b/src/common/components/mock-components/front-rich-components/table/table-col-width.utils.spec.ts similarity index 100% rename from src/common/components/front-rich-components/table/table-col-width.utils.spec.ts rename to src/common/components/mock-components/front-rich-components/table/table-col-width.utils.spec.ts diff --git a/src/common/components/front-rich-components/table/table-col-width.utils.ts b/src/common/components/mock-components/front-rich-components/table/table-col-width.utils.ts similarity index 100% rename from src/common/components/front-rich-components/table/table-col-width.utils.ts rename to src/common/components/mock-components/front-rich-components/table/table-col-width.utils.ts diff --git a/src/common/components/front-rich-components/table/table.tsx b/src/common/components/mock-components/front-rich-components/table/table.tsx similarity index 98% rename from src/common/components/front-rich-components/table/table.tsx rename to src/common/components/mock-components/front-rich-components/table/table.tsx index 8d783835..91e17ab4 100644 --- a/src/common/components/front-rich-components/table/table.tsx +++ b/src/common/components/mock-components/front-rich-components/table/table.tsx @@ -12,7 +12,7 @@ import { } from './table.utils'; import { calculateCellWidths } from './table-col-width.utils'; import { Triangle } from './components/filter-triangle'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; const tableSizeRestrictions: ShapeSizeRestrictions = { minWidth: 1, diff --git a/src/common/components/front-rich-components/table/table.utils.ts b/src/common/components/mock-components/front-rich-components/table/table.utils.ts similarity index 100% rename from src/common/components/front-rich-components/table/table.utils.ts rename to src/common/components/mock-components/front-rich-components/table/table.utils.ts diff --git a/src/common/components/front-rich-components/tabsbar/index.ts b/src/common/components/mock-components/front-rich-components/tabsbar/index.ts similarity index 100% rename from src/common/components/front-rich-components/tabsbar/index.ts rename to src/common/components/mock-components/front-rich-components/tabsbar/index.ts diff --git a/src/common/components/front-rich-components/tabsbar/tabsbar-shape.tsx b/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx similarity index 97% rename from src/common/components/front-rich-components/tabsbar/tabsbar-shape.tsx rename to src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx index 6136239a..b2dda464 100644 --- a/src/common/components/front-rich-components/tabsbar/tabsbar-shape.tsx +++ b/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx @@ -7,7 +7,7 @@ import { extractCSVHeaders, splitCSVContentIntoRows, } from '@/common/utils/active-element-selector.utils'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; const tabsBarShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 450, diff --git a/src/common/components/front-rich-components/vertical-menu/index.ts b/src/common/components/mock-components/front-rich-components/vertical-menu/index.ts similarity index 100% rename from src/common/components/front-rich-components/vertical-menu/index.ts rename to src/common/components/mock-components/front-rich-components/vertical-menu/index.ts diff --git a/src/common/components/front-rich-components/vertical-menu/vertical-menu.business.ts b/src/common/components/mock-components/front-rich-components/vertical-menu/vertical-menu.business.ts similarity index 100% rename from src/common/components/front-rich-components/vertical-menu/vertical-menu.business.ts rename to src/common/components/mock-components/front-rich-components/vertical-menu/vertical-menu.business.ts diff --git a/src/common/components/front-rich-components/vertical-menu/vertical-menu.tsx b/src/common/components/mock-components/front-rich-components/vertical-menu/vertical-menu.tsx similarity index 95% rename from src/common/components/front-rich-components/vertical-menu/vertical-menu.tsx rename to src/common/components/mock-components/front-rich-components/vertical-menu/vertical-menu.tsx index 0e2166d7..b96d4f62 100644 --- a/src/common/components/front-rich-components/vertical-menu/vertical-menu.tsx +++ b/src/common/components/mock-components/front-rich-components/vertical-menu/vertical-menu.tsx @@ -7,8 +7,8 @@ import { mapTextToOptions, } from './vertical-menu.business'; import { BASIC_SHAPE } from '../../front-components/shape.const'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../../shapes/use-shape-props.hook'; const verticalMenuShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 220, diff --git a/src/common/components/front-rich-components/video-player.tsx b/src/common/components/mock-components/front-rich-components/video-player.tsx similarity index 98% rename from src/common/components/front-rich-components/video-player.tsx rename to src/common/components/mock-components/front-rich-components/video-player.tsx index 55f6758f..adf88558 100644 --- a/src/common/components/front-rich-components/video-player.tsx +++ b/src/common/components/mock-components/front-rich-components/video-player.tsx @@ -3,7 +3,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; const videoPlayerShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 200, diff --git a/src/common/components/front-text-components/heading1-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx similarity index 91% rename from src/common/components/front-text-components/heading1-text-shape.tsx rename to src/common/components/mock-components/front-text-components/heading1-text-shape.tsx index 9bad0b0f..7f49a22d 100644 --- a/src/common/components/front-text-components/heading1-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx @@ -3,8 +3,8 @@ import { Group, Text } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const heading1SizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-text-components/heading2-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx similarity index 91% rename from src/common/components/front-text-components/heading2-text-shape.tsx rename to src/common/components/mock-components/front-text-components/heading2-text-shape.tsx index 1c82edb2..a5657e49 100644 --- a/src/common/components/front-text-components/heading2-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx @@ -3,8 +3,8 @@ import { Group, Text } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const heading2SizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-text-components/heading3-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx similarity index 91% rename from src/common/components/front-text-components/heading3-text-shape.tsx rename to src/common/components/mock-components/front-text-components/heading3-text-shape.tsx index f5cd59b9..68d94f39 100644 --- a/src/common/components/front-text-components/heading3-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx @@ -3,9 +3,9 @@ import { Group, Text } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const heading3SizeRestrictions: ShapeSizeRestrictions = { minWidth: 150, diff --git a/src/common/components/front-text-components/index.ts b/src/common/components/mock-components/front-text-components/index.ts similarity index 100% rename from src/common/components/front-text-components/index.ts rename to src/common/components/mock-components/front-text-components/index.ts diff --git a/src/common/components/front-text-components/normaltext-shape.tsx b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx similarity index 92% rename from src/common/components/front-text-components/normaltext-shape.tsx rename to src/common/components/mock-components/front-text-components/normaltext-shape.tsx index 667e28db..cd426dd3 100644 --- a/src/common/components/front-text-components/normaltext-shape.tsx +++ b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx @@ -3,8 +3,8 @@ import { Group, Text } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const normaltextSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/front-text-components/paragraph-text-shape.tsx b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx similarity index 92% rename from src/common/components/front-text-components/paragraph-text-shape.tsx rename to src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx index 604d5422..c0532ab3 100644 --- a/src/common/components/front-text-components/paragraph-text-shape.tsx +++ b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx @@ -3,9 +3,9 @@ import { Group, Text } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; const paragraphSizeRestrictions: ShapeSizeRestrictions = { minWidth: 300, diff --git a/src/common/components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx similarity index 92% rename from src/common/components/front-text-components/smalltext-shape.tsx rename to src/common/components/mock-components/front-text-components/smalltext-shape.tsx index 9601684b..84ac2828 100644 --- a/src/common/components/front-text-components/smalltext-shape.tsx +++ b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx @@ -3,8 +3,8 @@ import { Group, Text } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../shapes/use-shape-selection.hook'; -import { useShapeProps } from '../shapes/use-shape-props.hook'; +import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; const smalltextSizeRestrictions: ShapeSizeRestrictions = { diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts index acb5f82e..90d93b86 100644 --- a/src/common/components/shapes/use-shape-props.hook.ts +++ b/src/common/components/shapes/use-shape-props.hook.ts @@ -1,6 +1,6 @@ import { OtherProps } from '@/core/model'; import { useMemo } from 'react'; -import { DefaultStyleShape } from '../front-components/shape.const'; +import { DefaultStyleShape } from '../mock-components/front-components/shape.const'; export const useShapeProps = ( otherProps: OtherProps | undefined, diff --git a/src/common/components/shapes/use-shape-selection.hook.ts b/src/common/components/shapes/use-shape-selection.hook.ts index 3848518a..6411f2cb 100644 --- a/src/common/components/shapes/use-shape-selection.hook.ts +++ b/src/common/components/shapes/use-shape-selection.hook.ts @@ -1,6 +1,6 @@ import { ShapeType } from '@/core/model'; import { KonvaEventObject } from 'konva/lib/Node'; -import { ShapeProps } from '../front-components/shape.model'; +import { ShapeProps } from '../mock-components/front-components/shape.model'; import { isUserDoingMultipleSelectionUsingCtrlOrCmdKey } from '@/common/utils/shapes'; // In the future we will refactor and include below this folder all the shapes (front, container, ...) diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts index 7e481c3f..1719e50c 100644 --- a/src/pods/canvas/canvas.model.ts +++ b/src/pods/canvas/canvas.model.ts @@ -27,13 +27,13 @@ import { getTooltipShapeSizeRestrictions, getLabelSizeRestrictions, getSliderShapeSizeRestrictions, -} from '@/common/components/front-components'; +} from '@/common/components/mock-components/front-components'; import { getBrowserWindowShapeSizeRestrictions, getMobilePhoneShapeSizeRestrictions, getModalDialogShapeSizeRestrictions, getTabletShapeSizeRestrictions, -} from '@/common/components/front-containers'; +} from '@/common/components/mock-components/front-containers'; import { getTriangleShapeSizeRestrictions, getCircleShapeSizeRestrictions, @@ -44,7 +44,7 @@ import { getStarShapeSizeRestrictions, getLargeArrowShapeSizeRestrictions, getImageShapeSizeRestrictions, -} from '@/common/components/front-basic-sapes'; +} from '@/common/components/mock-components/front-basic-shapes'; import { getAccordionShapeSizeRestrictions, getBreadcrumbShapeSizeRestrictions, @@ -61,7 +61,7 @@ import { getAppBarShapeSizeRestrictions, getButtonBarShapeSizeRestrictions, getTabsBarShapeSizeRestrictions, -} from '@/common/components/front-rich-components'; +} from '@/common/components/mock-components/front-rich-components'; import { getHeading1SizeRestrictions, getHeading2SizeRestrictions, @@ -69,11 +69,11 @@ import { getNormaltextSizeRestrictions, getParagraphSizeRestrictions, getSmalltextSizeRestrictions, -} from '@/common/components/front-text-components'; +} from '@/common/components/mock-components/front-text-components'; import { BASIC_SHAPE, INPUT_SHAPE, -} from '@/common/components/front-components/shape.const'; +} from '@/common/components/mock-components/front-components/shape.const'; export const getSizeRestrictionFromShape = ( shapeType: ShapeType diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/circle.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/circle.renderer.tsx index e2e818a8..313570cc 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/circle.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/circle.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; -import { CircleShape } from '@/common/components/front-basic-sapes'; +import { CircleShape } from '@/common/components/mock-components/front-basic-shapes'; export const renderCircle = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/diamond.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/diamond.renderer.tsx index 931fa760..5604e4ca 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/diamond.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/diamond.renderer.tsx @@ -1,4 +1,4 @@ -import { DiamondShape } from '@/common/components/front-basic-sapes'; +import { DiamondShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/image.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/image.renderer.tsx index 6118f335..096099c4 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/image.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/image.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; -import { ImageShape } from '@/common/components/front-basic-sapes/image-shape/image-shape'; +import { ImageShape } from '@/common/components/mock-components/front-basic-shapes/image-shape/image-shape'; export const renderImage = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/large-arrow.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/large-arrow.renderer.tsx index 5da61260..58b2ac23 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/large-arrow.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/large-arrow.renderer.tsx @@ -1,4 +1,4 @@ -import { LargeArrowShape } from '@/common/components/front-basic-sapes'; +import { LargeArrowShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx index 35ae0b3a..2ce67348 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/line.renderer.tsx @@ -1,4 +1,4 @@ -import { LineShape } from '@/common/components/front-basic-sapes'; +import { LineShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/postit.rerender.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/postit.rerender.tsx index 233c33da..d8694d2c 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/postit.rerender.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/postit.rerender.tsx @@ -1,4 +1,4 @@ -import { PostItShape } from '@/common/components/front-basic-sapes'; +import { PostItShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/rectangle.rerender.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/rectangle.rerender.tsx index d636e7d2..909bad03 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/rectangle.rerender.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/rectangle.rerender.tsx @@ -1,4 +1,4 @@ -import { RectangleShape } from '@/common/components/front-basic-sapes'; +import { RectangleShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/star.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/star.renderer.tsx index c2227c56..a7fff704 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/star.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/star.renderer.tsx @@ -1,4 +1,4 @@ -import { StarShape } from '@/common/components/front-basic-sapes'; +import { StarShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-basic-shapes/triangle.renderer.tsx b/src/pods/canvas/shape-renderer/simple-basic-shapes/triangle.renderer.tsx index fb99196e..6e296c1c 100644 --- a/src/pods/canvas/shape-renderer/simple-basic-shapes/triangle.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-basic-shapes/triangle.renderer.tsx @@ -1,4 +1,4 @@ -import { TriangleShape } from '@/common/components/front-basic-sapes'; +import { TriangleShape } from '@/common/components/mock-components/front-basic-shapes'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx index e421dc27..682b6d5b 100644 --- a/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; -import { ButtonShape } from '@/common/components/front-components/button-shape'; +import { ButtonShape } from '@/common/components/mock-components/front-components/button-shape'; export const renderButton = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx index 7605b59a..65293e4d 100644 --- a/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx @@ -1,4 +1,4 @@ -import { CheckBoxShape } from '@/common/components/front-components/checkbox-shape'; +import { CheckBoxShape } from '@/common/components/mock-components/front-components/checkbox-shape'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/combobox.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/combobox.renderer.tsx index 22ff8e19..eda546b2 100644 --- a/src/pods/canvas/shape-renderer/simple-component/combobox.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/combobox.renderer.tsx @@ -1,4 +1,4 @@ -import { ComboBoxShape } from '@/common/components/front-components'; +import { ComboBoxShape } from '@/common/components/mock-components/front-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; 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 f8851f6d..4b02957c 100644 --- a/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/datepickerinput.renderer.tsx @@ -1,4 +1,4 @@ -import { DatepickerInputShape } from '@/common/components/front-components'; +import { DatepickerInputShape } from '@/common/components/mock-components/front-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/horizontalscrollbar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/horizontalscrollbar.renderer.tsx index 6f829cd4..e740a5d5 100644 --- a/src/pods/canvas/shape-renderer/simple-component/horizontalscrollbar.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/horizontalscrollbar.renderer.tsx @@ -1,4 +1,4 @@ -import { HorizontalScrollBarShape } from '@/common/components/front-components'; +import { HorizontalScrollBarShape } from '@/common/components/mock-components/front-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx index 0963a5c6..702c3ecb 100644 --- a/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx @@ -1,4 +1,4 @@ -import { SvgIcon } from '@/common/components/front-components'; +import { SvgIcon } from '@/common/components/mock-components/front-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/input.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/input.renderer.tsx index a901a92e..ce52801a 100644 --- a/src/pods/canvas/shape-renderer/simple-component/input.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/input.renderer.tsx @@ -1,4 +1,4 @@ -import { InputShape } from '@/common/components/front-components/input-shape'; +import { InputShape } from '@/common/components/mock-components/front-components/input-shape'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/label.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/label.renderer.tsx index b6bf5551..79de1368 100644 --- a/src/pods/canvas/shape-renderer/simple-component/label.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/label.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; -import LabelShape from '@/common/components/front-components/label-shape'; +import LabelShape from '@/common/components/mock-components/front-components/label-shape'; export const renderLabel = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-component/listbox.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/listbox.renderer.tsx index f0d9998a..2b5dd0f3 100644 --- a/src/pods/canvas/shape-renderer/simple-component/listbox.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/listbox.renderer.tsx @@ -1,4 +1,4 @@ -import { ListBoxShape } from '@/common/components/front-components'; +import { ListBoxShape } from '@/common/components/mock-components/front-components'; import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/notfound.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/notfound.renderer.tsx index e55a0073..11e33c30 100644 --- a/src/pods/canvas/shape-renderer/simple-component/notfound.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/notfound.renderer.tsx @@ -1,7 +1,7 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; import { Group, Text } from 'react-konva'; -import { BASIC_SHAPE } from '@/common/components/front-components/shape.const'; +import { BASIC_SHAPE } from '@/common/components/mock-components/front-components/shape.const'; export const renderNotFound = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-component/progressbar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/progressbar.renderer.tsx index 6397d8c1..6838d3fd 100644 --- a/src/pods/canvas/shape-renderer/simple-component/progressbar.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/progressbar.renderer.tsx @@ -1,4 +1,4 @@ -import { ProgressBarShape } from '@/common/components/front-components'; +import { ProgressBarShape } from '@/common/components/mock-components/front-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx index d6cd98a5..3aea1717 100644 --- a/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; -import { RadioButtonShape } from '@/common/components/front-components/radiobutton-shape'; +import { RadioButtonShape } from '@/common/components/mock-components/front-components/radiobutton-shape'; export const renderRadioButton = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-component/slider.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/slider.renderer.tsx index 45e5daa2..df734d50 100644 --- a/src/pods/canvas/shape-renderer/simple-component/slider.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/slider.renderer.tsx @@ -1,4 +1,4 @@ -import { SliderShape } from '@/common/components/front-components'; +import { SliderShape } from '@/common/components/mock-components/front-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/textarea.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/textarea.renderer.tsx index cb8ba86a..50748ab7 100644 --- a/src/pods/canvas/shape-renderer/simple-component/textarea.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/textarea.renderer.tsx @@ -1,4 +1,4 @@ -import { TextAreaShape } from '@/common/components/front-components/textarea-shape'; +import { TextAreaShape } from '@/common/components/mock-components/front-components/textarea-shape'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx index 0f202807..99bc8425 100644 --- a/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx @@ -1,4 +1,4 @@ -import { TimepickerInputShape } from '@/common/components/front-components'; +import { TimepickerInputShape } from '@/common/components/mock-components/front-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx index 7aab4f2a..e73f296d 100644 --- a/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; -import { ToggleSwitch } from '@/common/components/front-components/toggleswitch-shape'; +import { ToggleSwitch } from '@/common/components/mock-components/front-components/toggleswitch-shape'; export const renderToggleSwitch = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-component/tooltip.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/tooltip.renderer.tsx index 3c3ce430..c5756636 100644 --- a/src/pods/canvas/shape-renderer/simple-component/tooltip.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/tooltip.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; -import { TooltipShape } from '@/common/components/front-components/tooltip-shape'; +import { TooltipShape } from '@/common/components/mock-components/front-components/tooltip-shape'; export const renderTooltip = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx index 08b69084..0e72e7b3 100644 --- a/src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-component/verticalscrollbar.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; -import { VerticalScrollBarShape } from '@/common/components/front-components'; +import { VerticalScrollBarShape } from '@/common/components/mock-components/front-components'; export const renderVerticalScrollBar = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx b/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx index 01d77b68..ccfd8809 100644 --- a/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx @@ -1,4 +1,4 @@ -import { BrowserWindowShape } from '@/common/components/front-containers'; +import { BrowserWindowShape } from '@/common/components/mock-components/front-containers'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-container/mobilephonecontainer.renderer.tsx b/src/pods/canvas/shape-renderer/simple-container/mobilephonecontainer.renderer.tsx index 9468189d..5273642f 100644 --- a/src/pods/canvas/shape-renderer/simple-container/mobilephonecontainer.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-container/mobilephonecontainer.renderer.tsx @@ -1,4 +1,4 @@ -import { MobilePhoneShape } from '@/common/components/front-containers'; +import { MobilePhoneShape } from '@/common/components/mock-components/front-containers'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-container/modal-dialog-container.renderer.tsx b/src/pods/canvas/shape-renderer/simple-container/modal-dialog-container.renderer.tsx index 715a5ac5..1c603e66 100644 --- a/src/pods/canvas/shape-renderer/simple-container/modal-dialog-container.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-container/modal-dialog-container.renderer.tsx @@ -1,4 +1,4 @@ -import { ModalDialogContainer } from '@/common/components/front-containers'; +import { ModalDialogContainer } from '@/common/components/mock-components/front-containers'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-container/tablet.render.tsx b/src/pods/canvas/shape-renderer/simple-container/tablet.render.tsx index 82241e09..1609d4c4 100644 --- a/src/pods/canvas/shape-renderer/simple-container/tablet.render.tsx +++ b/src/pods/canvas/shape-renderer/simple-container/tablet.render.tsx @@ -1,4 +1,4 @@ -import { TabletShape } from '@/common/components/front-containers'; +import { TabletShape } from '@/common/components/mock-components/front-containers'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/accordion.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/accordion.renderer.tsx index 3967e6ed..ab790cc7 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/accordion.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/accordion.renderer.tsx @@ -1,4 +1,4 @@ -import { AccordionShape } from '@/common/components/front-rich-components'; +import { AccordionShape } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/appBar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/appBar.renderer.tsx index 1ab2387b..e82b605c 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/appBar.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/appBar.renderer.tsx @@ -1,4 +1,4 @@ -import { AppBarShape } from '@/common/components/front-rich-components/appBar'; +import { AppBarShape } from '@/common/components/mock-components/front-rich-components/appBar'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/bar-chart.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/bar-chart.renderer.tsx index d50eb16a..f8d7c29e 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/bar-chart.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/bar-chart.renderer.tsx @@ -1,4 +1,4 @@ -import { BarChartShape } from '@/common/components/front-rich-components'; +import { BarChartShape } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx index 7b6b26ee..af80d1c3 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx @@ -1,4 +1,4 @@ -import { BreadcrumbShape } from '@/common/components/front-rich-components'; +import { BreadcrumbShape } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/button-bar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/button-bar.renderer.tsx index e057e239..66b3f631 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/button-bar.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/button-bar.renderer.tsx @@ -1,4 +1,4 @@ -import { ButtonBarShape } from '@/common/components/front-rich-components/buttonBar/buttonBar'; +import { ButtonBarShape } from '@/common/components/mock-components/front-rich-components/buttonBar/buttonBar'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/calendar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/calendar.renderer.tsx index 50b92ff4..929a087a 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/calendar.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/calendar.renderer.tsx @@ -1,4 +1,4 @@ -import { CalendarShape } from '@/common/components/front-rich-components/calendar'; +import { CalendarShape } from '@/common/components/mock-components/front-rich-components/calendar'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/horizontal-menu.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/horizontal-menu.renderer.tsx index 80b6ddb5..abf26eed 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/horizontal-menu.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/horizontal-menu.renderer.tsx @@ -1,4 +1,4 @@ -import { HorizontalMenu } from '@/common/components/front-rich-components'; +import { HorizontalMenu } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/line-chart.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/line-chart.renderer.tsx index bb1acd8a..02e85bb4 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/line-chart.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/line-chart.renderer.tsx @@ -1,4 +1,4 @@ -import { LineChartShape } from '@/common/components/front-rich-components'; +import { LineChartShape } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/map-chart.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/map-chart.renderer.tsx index 2f79cae9..9cd7bf01 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/map-chart.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/map-chart.renderer.tsx @@ -1,4 +1,4 @@ -import { MapChartShape } from '@/common/components/front-rich-components'; +import { MapChartShape } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/modal.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/modal.renderer.tsx index 2bb8a83e..2658f119 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/modal.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/modal.renderer.tsx @@ -1,4 +1,4 @@ -import { Modal } from '@/common/components/front-rich-components'; +import { Modal } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/pie-chart.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/pie-chart.renderer.tsx index 1cbe793b..59ae6509 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/pie-chart.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/pie-chart.renderer.tsx @@ -1,4 +1,4 @@ -import { PieChartShape } from '@/common/components/front-rich-components'; +import { PieChartShape } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/table.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/table.renderer.tsx index fcdce2ca..ed8c44e4 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/table.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/table.renderer.tsx @@ -1,4 +1,4 @@ -import { Table } from '@/common/components/front-rich-components'; +import { Table } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/tabsbar.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/tabsbar.renderer.tsx index c3e9d19d..62cc8fac 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/tabsbar.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/tabsbar.renderer.tsx @@ -1,6 +1,6 @@ import { ShapeModel } from '@/core/model'; import { ShapeRendererProps } from '../model'; -import { TabsBarShape } from '@/common/components/front-rich-components/tabsbar'; +import { TabsBarShape } from '@/common/components/mock-components/front-rich-components/tabsbar'; export const renderTabsBar = ( shape: ShapeModel, diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/vertical-menu.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/vertical-menu.renderer.tsx index 7d4757f7..e71312ae 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/vertical-menu.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/vertical-menu.renderer.tsx @@ -1,4 +1,4 @@ -import { VerticalMenuShape } from '@/common/components/front-rich-components'; +import { VerticalMenuShape } from '@/common/components/mock-components/front-rich-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/video-player.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/video-player.renderer.tsx index 48b20075..ea03b387 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/video-player.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/video-player.renderer.tsx @@ -1,4 +1,4 @@ -import { VideoPlayerShape } from '@/common/components/front-rich-components/video-player'; +import { VideoPlayerShape } from '@/common/components/mock-components/front-rich-components/video-player'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx index 8930faa7..732c7d1d 100644 --- a/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx @@ -1,4 +1,4 @@ -import { Heading1Shape } from '@/common/components/front-text-components'; +import { Heading1Shape } from '@/common/components/mock-components/front-text-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx index b81f32f9..d789015c 100644 --- a/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx @@ -1,4 +1,4 @@ -import { Heading2Shape } from '@/common/components/front-text-components'; +import { Heading2Shape } from '@/common/components/mock-components/front-text-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx index 81f2cf6a..2c6a85cc 100644 --- a/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx @@ -1,4 +1,4 @@ -import { Heading3Shape } from '@/common/components/front-text-components'; +import { Heading3Shape } from '@/common/components/mock-components/front-text-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx index 51527cf5..3396d6cd 100644 --- a/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx @@ -1,4 +1,4 @@ -import { NormaltextShape } from '@/common/components/front-text-components'; +import { NormaltextShape } from '@/common/components/mock-components/front-text-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx index e3cacf1c..af9f4b7e 100644 --- a/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx @@ -1,4 +1,4 @@ -import { ParagraphShape } from '@/common/components/front-text-components'; +import { ParagraphShape } from '@/common/components/mock-components/front-text-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx index 8ab4626e..f329b23e 100644 --- a/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx @@ -1,4 +1,4 @@ -import { SmalltextShape } from '@/common/components/front-text-components'; +import { SmalltextShape } from '@/common/components/mock-components/front-text-components'; import { ShapeRendererProps } from '../model'; import { ShapeModel } from '@/core/model'; diff --git a/src/pods/canvas/use-drop-image-from-desktop.tsx b/src/pods/canvas/use-drop-image-from-desktop.tsx index db6eac0e..eaff19aa 100644 --- a/src/pods/canvas/use-drop-image-from-desktop.tsx +++ b/src/pods/canvas/use-drop-image-from-desktop.tsx @@ -5,7 +5,7 @@ import { getScrollFromDiv, } from './canvas.util'; import { calculateShapeOffsetToXDropCoordinate } from './use-monitor.business'; -import { getImageShapeSizeRestrictions } from '@/common/components/front-basic-sapes'; +import { getImageShapeSizeRestrictions } from '@/common/components/mock-components/front-basic-shapes'; import { adjustSizeKeepingAspectRatio } from '@/common/utils/image.utils'; export const useDropImageFromDesktop = ( diff --git a/src/pods/properties/components/border-radius/border-radius.component.tsx b/src/pods/properties/components/border-radius/border-radius.component.tsx index 356d36a1..fef2a788 100644 --- a/src/pods/properties/components/border-radius/border-radius.component.tsx +++ b/src/pods/properties/components/border-radius/border-radius.component.tsx @@ -1,4 +1,4 @@ -import { BASIC_SHAPE } from '@/common/components/front-components/shape.const'; +import { BASIC_SHAPE } from '@/common/components/mock-components/front-components/shape.const'; import classes from './border-radius.module.css'; interface Props { From 5ba8dcaa5111dcd3d3c151effbcb887f1cf976d4 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sat, 28 Sep 2024 21:06:29 +0200 Subject: [PATCH 12/18] rectangle, circle and image migrated --- .../front-basic-shapes/circle-basic-shape.tsx | 30 +++++------ .../image-shape/image-shape.tsx | 29 ++++++----- .../rectangle-basic-shape.tsx | 29 +++++------ .../mock-components/mock-components.utils.ts | 50 +++++++++++++++++++ .../providers/canvas/use-selection.hook.ts | 4 +- 5 files changed, 98 insertions(+), 44 deletions(-) create mode 100644 src/common/components/mock-components/mock-components.utils.ts diff --git a/src/common/components/mock-components/front-basic-shapes/circle-basic-shape.tsx b/src/common/components/mock-components/front-basic-shapes/circle-basic-shape.tsx index 54b6495a..f4b8e3af 100644 --- a/src/common/components/mock-components/front-basic-shapes/circle-basic-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/circle-basic-shape.tsx @@ -3,9 +3,9 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Circle, Group } from 'react-konva'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; +import { useGroupShapeProps } from '../mock-components.utils'; const circleShapeRestrictions: ShapeSizeRestrictions = { minWidth: 10, @@ -24,25 +24,27 @@ const shapeType: ShapeType = 'circle'; export const CircleShape = forwardRef((props, ref) => { const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(circleShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + circleShapeRestrictions, + width, + height + ); - const radius = Math.min(restrictedWidth, restrictedHeight) / 2; + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const radius = Math.min(restrictedWidth, restrictedHeight) / 2; const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + export const ImageShape = forwardRef((props, ref) => { const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(imageShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + imageShapeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const [image] = useImage(otherProps?.imageSrc ?? ''); const imageRef = useRef(null); - const { handleSelection } = useShapeComponentSelection(props, shapeType); useEffect(() => { if (imageRef.current && otherProps?.imageBlackAndWhite) { @@ -49,16 +53,15 @@ export const ImageShape = forwardRef((props, ref) => { restrictedHeight, ]); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {otherProps?.imageSrc ? ( ((props, ref) => { ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(rectangleShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + rectangleShapeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, strokeStyle, fill, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + +) => { + const { width, height } = restrictedSize; + const { handleSelection } = useShapeComponentSelection(props, shapeType); + + const commonProps = useMemo( + () => + generateShapeGroupCommonProps( + props, + { + width, + height, + }, + ref, + handleSelection + ), + [props, restrictedSize, shapeType, ref] + ); + + return commonProps; +}; + +export const generateShapeGroupCommonProps = ( + props: ShapeProps, + restrictedSize: Size, + ref: React.ForwardedRef, + handleSelection: (e: KonvaEventObject) => void +) => { + const { x, y, id } = props; + + return { + x, + y, + width: restrictedSize.width, + height: restrictedSize.height, + 'data-id': id, + onClick: handleSelection, + ref, + }; +}; diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts index 3efa945d..e8c491c3 100644 --- a/src/core/providers/canvas/use-selection.hook.ts +++ b/src/core/providers/canvas/use-selection.hook.ts @@ -81,9 +81,7 @@ export const useSelection = ( type: ShapeType, isUserDoingMultipleSelection: boolean ) => { - console.log('** handleSelected **'); - console.trace(); - // I want to kniw if the ids is string or array + // I want to know if the ids is string or array const arrayIds = typeof ids === 'string' ? [ids] : ids; if (!isUserDoingMultipleSelection) { From 23304bd5a7e9195988401a73de89b0a5f5cc81ea Mon Sep 17 00:00:00 2001 From: Braulio Date: Sun, 29 Sep 2024 12:48:03 +0200 Subject: [PATCH 13/18] basic shapes refactored --- .../front-basic-shapes/diamond-shape.tsx | 28 ++++++++------- .../front-basic-shapes/large-arrow-shape.tsx | 34 +++++++++---------- .../front-basic-shapes/line-basic-shape.tsx | 28 ++++++++------- .../front-basic-shapes/postit-basic-shape.tsx | 29 ++++++++-------- .../front-basic-shapes/star-shape.tsx | 28 +++++++-------- .../triangle-basic-shape.tsx | 29 ++++++++-------- 6 files changed, 90 insertions(+), 86 deletions(-) diff --git a/src/common/components/mock-components/front-basic-shapes/diamond-shape.tsx b/src/common/components/mock-components/front-basic-shapes/diamond-shape.tsx index c603229b..df69cf15 100644 --- a/src/common/components/mock-components/front-basic-shapes/diamond-shape.tsx +++ b/src/common/components/mock-components/front-basic-shapes/diamond-shape.tsx @@ -3,9 +3,9 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Line } from 'react-konva'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; +import { useGroupShapeProps } from '../mock-components.utils'; const diamondShapeRestrictions: ShapeSizeRestrictions = { minWidth: 10, @@ -33,10 +33,13 @@ export const DiamondShape = forwardRef((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(diamondShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + diamondShapeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; // Calculate the points for the diamond shape const halfWidth = restrictedWidth / 2; @@ -54,16 +57,15 @@ export const DiamondShape = forwardRef((props, ref) => { const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + export const LargeArrowShape = forwardRef((props, ref) => { const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - LargeArrowShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + LargeArrowShapeSizeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const scaleX = useMemo(() => { return restrictedWidth / LARGE_ARROW_FIX_WIDTH; @@ -43,20 +44,17 @@ export const LargeArrowShape = forwardRef((props, ref) => { return restrictedHeight / LARGE_ARROW_FIX_HEIGHT; }, [restrictedHeight]); - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(lineShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + lineShapeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + 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 */} ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(postItShapeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + postItShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const postItWidth = restrictedWidth; const postItHeight = restrictedHeight; @@ -53,16 +55,15 @@ export const PostItShape = forwardRef((props, ref) => { POSTIT_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* Post-it frame */} ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(starShapeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + starShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, strokeStyle, fill } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(triangleShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + triangleShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const halfWidth = restrictedWidth / 2; const points = [ halfWidth, @@ -49,20 +53,17 @@ export const TriangleShape = forwardRef((props, ref) => { restrictedHeight, // Left point ]; - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, strokeStyle, fill } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + Date: Sun, 29 Sep 2024 12:55:49 +0200 Subject: [PATCH 14/18] listbox refactored --- .../listbox/listbox-shape.tsx | 181 +++++++++--------- 1 file changed, 94 insertions(+), 87 deletions(-) diff --git a/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx index 82dd8ff7..41f3d385 100644 --- a/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx +++ b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx @@ -1,4 +1,4 @@ -import { ShapeSizeRestrictions } from '@/core/model'; +import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { forwardRef, useEffect, useRef, useState } from 'react'; import { Group, Rect, Text } from 'react-konva'; import { ShapeProps } from '../shape.model'; @@ -8,6 +8,7 @@ import { } from './listbox-shape.business'; import { BASIC_SHAPE } from '../shape.const'; import { useShapeProps } from '../../../shapes/use-shape-props.hook'; +import { useGroupShapeProps } from '../../mock-components.utils'; const listboxShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 75, @@ -28,98 +29,104 @@ interface ListBoxShapeProps extends ShapeProps { const singleHeaderHeight = 35; -export const ListBoxShape = forwardRef( - ( - { x, y, width, height, id, onSelected, text, otherProps, ...shapeProps }, - ref - ) => { - const [selectedItem, setSelectedItem] = useState(null); - const [listboxItems, setListboxItem] = useState([ - '[*]Item\nItem1\nItem2\nItem3\nItem4\nItem5\nItem6', - ]); - const rectRef = useRef(null); - const listRef = useRef(null); +const shapeType: ShapeType = 'listbox'; + +export const ListBoxShape = forwardRef((props, ref) => { + const { + x, + y, + width, + height, + id, + onSelected, + text, + otherProps, + ...shapeProps + } = props; + const [selectedItem, setSelectedItem] = useState(null); + const [listboxItems, setListboxItem] = useState([ + '[*]Item\nItem1\nItem2\nItem3\nItem4\nItem5\nItem6', + ]); + const rectRef = useRef(null); + const listRef = useRef(null); - const handleClick = (itemIndex: number) => { - setSelectedItem(itemIndex); - onSelected(id, 'listbox'); - }; + useEffect(() => { + if (text) { + const { items, selectedItemIndex } = mapListboxTextToItems(text); + setListboxItem(items); + setSelectedItem(selectedItemIndex); + } else { + setListboxItem([]); + } + }, [text]); - useEffect(() => { - if (text) { - const { items, selectedItemIndex } = mapListboxTextToItems(text); - setListboxItem(items); - setSelectedItem(selectedItemIndex); - } else { - setListboxItem([]); - } - }, [text]); + const restrictedSize = calculateDynamicContentSizeRestriction(listboxItems, { + width, + height, + singleHeaderHeight, + listboxShapeSizeRestrictions, + }); - const { width: restrictedWidth, height: restrictedHeight } = - calculateDynamicContentSizeRestriction(listboxItems, { - width, - height, - singleHeaderHeight, - listboxShapeSizeRestrictions, - }); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; - const { stroke, strokeStyle, fill, borderRadius, textColor } = - useShapeProps(otherProps, BASIC_SHAPE); + const { stroke, strokeStyle, fill, borderRadius, textColor } = useShapeProps( + otherProps, + BASIC_SHAPE + ); + + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); - return ( - - {/* Rectángulo del listbox */} - + return ( + + {/* Listbox Item rectanble */} + - {/* Elementos de la lista con desplazamiento */} - - {listboxItems.map((item, index) => ( - handleClick(index)}> - - - - ))} - + {/* Listbox Items */} + + {listboxItems.map((item, index) => ( + + + + + ))} - ); - } -); + + ); +}); export default ListBoxShape; From c1f564e3ee3ee5388e287c1af21a1ea4a2d1ba17 Mon Sep 17 00:00:00 2001 From: Braulio Date: Sun, 29 Sep 2024 13:35:43 +0200 Subject: [PATCH 15/18] front components refactor --- .../front-components/button-shape.tsx | 28 +++--- .../front-components/checkbox-shape.tsx | 28 +++--- .../front-components/combobox-shape.tsx | 29 +++--- .../datepickerinput-shape.tsx | 34 ++++--- .../horizontalscrollbar-shape.tsx | 31 +++--- .../front-components/icon-shape.tsx | 34 ++++--- .../front-components/input-shape.tsx | 28 +++--- .../front-components/label-shape.tsx | 29 +++--- .../front-components/progressbar-shape.tsx | 29 +++--- .../front-components/radiobutton-shape.tsx | 34 +++---- .../front-components/slider-shape.tsx | 95 ++++++++++--------- .../front-components/textarea-shape.tsx | 29 +++--- .../timepickerinput-shape.tsx | 33 +++---- .../front-components/toggleswitch-shape.tsx | 33 +++---- .../front-components/tooltip-shape.tsx | 29 +++--- .../verticalscrollbar-shape.tsx | 33 +++---- 16 files changed, 280 insertions(+), 276 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 b6a81b3f..3bf0ba76 100644 --- a/src/common/components/mock-components/front-components/button-shape.tsx +++ b/src/common/components/mock-components/front-components/button-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { useGroupShapeProps } from '../mock-components.utils'; const buttonShapeRestrictions: ShapeSizeRestrictions = { minWidth: 50, @@ -33,26 +33,28 @@ export const ButtonShape = forwardRef((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(buttonShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + buttonShapeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(checkBoxShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + checkBoxShapeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { isOn, textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(comboBoxShapeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + comboBoxShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ( (props, ref) => { const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - datepickerInputShapeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + datepickerInputShapeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const separatorPadding = 12; const separator1X = restrictedWidth / 3; const separator2X = (2 * restrictedWidth) / 3; - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, strokeStyle, fill, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* input frame */} ( (props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - HorizontalScrollBarShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + HorizontalScrollBarShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const arrowWidth = 20; const thumbWidth = restrictedWidth * 0.3; // Ajuste del ancho del thumb al 30% de la barra const thumbX = arrowWidth + (restrictedWidth - thumbWidth - arrowWidth * 2) / 2; // Centrar el thumb dentro del área disponible - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + {/* Fondo de la barra de scroll */} ((props, ref) => { } = props; const { openModal } = useModalDialogContext(); const { selectionInfo } = useCanvasContext(); - const { handleSelection } = useShapeComponentSelection(props, shapeType); const { updateOtherPropsOnSelected } = selectionInfo; const handleDoubleClick = () => { openModal( @@ -74,24 +73,23 @@ export const SvgIcon = forwardRef((props, ref) => { const [iconWidth, iconHeight] = returnIconSize(iconSize); - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - iconShapeRestrictions, - iconWidth, - iconHeight - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + iconShapeRestrictions, + iconWidth, + iconHeight + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; + + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(inputShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + inputShapeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, fill, textColor, strokeStyle, borderRadius } = useShapeProps( otherProps, INPUT_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(labelSizeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + labelSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(progressBarShapeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + progressBarShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { progress } = useShapeProps(otherProps, BASIC_SHAPE); @@ -36,16 +38,15 @@ export const ProgressBarShape = forwardRef((props, ref) => { [progress, restrictedWidth] ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* Progressbar background */} ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(radioButtonShapeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + radioButtonShapeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const radius = restrictedHeight / 2; const { isOn, textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - - {/* Círculo exterior del radio button */} + + {/* Outer circle radio button */} ((props, ref) => { strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH} /> - {/* Círculo interior del radio button (checked) */} + {/* Inner circle radio button (checked) */} ((props, ref) => { fill={isOn ? 'black' : 'white'} /> - {/* Texto */} + {/* Text */} sliderShapeRestrictions; -export const SliderShape = forwardRef( - ({ x, y, width, height, id, onSelected, otherProps, ...shapeProps }, ref) => { - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(sliderShapeRestrictions, width, height); +const shapeType: ShapeType = 'slider'; - const sliderHeight = 4; - const thumbRadius = 10; - const sliderStart = thumbRadius; - const sliderEnd = width - thumbRadius; +export const SliderShape = forwardRef((props, ref) => { + const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = + props; + const restrictedSize = fitSizeToShapeSizeRestrictions( + sliderShapeRestrictions, + width, + height + ); - const { fill, progress } = useShapeProps(otherProps, BASIC_SHAPE); + const { width: restrictedWidth } = restrictedSize; - const progressWidth = useMemo( - () => (progress / 100) * restrictedWidth, - [progress, restrictedWidth] - ); + const sliderHeight = 4; + const thumbRadius = 10; + const sliderStart = thumbRadius; + const sliderEnd = width - thumbRadius; - return ( - onSelected(id, 'slider', true)} - > - {/* Línea del slider */} - + const { fill, progress } = useShapeProps(otherProps, BASIC_SHAPE); - {/* Thumb del slider */} - - - ); - } -); + const progressWidth = useMemo( + () => (progress / 100) * restrictedWidth, + [progress, restrictedWidth] + ); + + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + + return ( + + {/* Slider middle line */} + + + {/* Slider thumb */} + + + ); +}); export default SliderShape; diff --git a/src/common/components/mock-components/front-components/textarea-shape.tsx b/src/common/components/mock-components/front-components/textarea-shape.tsx index 6660b283..ab04b128 100644 --- a/src/common/components/mock-components/front-components/textarea-shape.tsx +++ b/src/common/components/mock-components/front-components/textarea-shape.tsx @@ -4,8 +4,8 @@ import { ShapeProps } from './shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Text } from 'react-konva'; import { BASIC_SHAPE } from './shape.const'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { useGroupShapeProps } from '../mock-components.utils'; const textAreaShapeRestrictions: ShapeSizeRestrictions = { minWidth: 80, @@ -33,26 +33,27 @@ export const TextAreaShape = forwardRef((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(textAreaShapeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + textAreaShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ( (props, ref) => { const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - timepickerInputShapeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + timepickerInputShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const separatorPadding = 3; // Extra padding for spacers const separator1X = restrictedWidth / 3; const separator2X = (2 * restrictedWidth) / 3; - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, strokeStyle, fill, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* input frame */} export const ToggleSwitch = forwardRef((props, ref) => { const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - toggleSwitchShapeRestrictions, - width, - height - ); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + toggleSwitchShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { isOn } = useShapeProps(otherProps, BASIC_SHAPE); @@ -39,16 +37,15 @@ export const ToggleSwitch = forwardRef((props, ref) => { ? restrictedWidth - restrictedHeight / 2 : restrictedHeight / 2; + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { const pointerHeight = 25; const pointerWidth = 45; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(tooltipShapeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + tooltipShapeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, strokeStyle, fill, textColor } = useShapeProps( otherProps, @@ -57,16 +59,15 @@ export const TooltipShape = forwardRef((props, ref) => { restrictedHeight + pointerHeight, // y3 ]; + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* Caja del tooltip */} ( (props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - VerticalScrollBarShapeSizeRestrictions, - width, - height - ); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + VerticalScrollBarShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const arrowHeight = 20; const thumbHeight = restrictedHeight * 0.3; // Ajuste de la altura del thumb al 30% de la barra const thumbY = arrowHeight + (restrictedHeight - thumbHeight - arrowHeight * 2) / 2; // Centrar el thumb dentro del área disponible + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* Fondo de la barra de scroll */} Date: Sun, 29 Sep 2024 13:43:31 +0200 Subject: [PATCH 16/18] containers ready --- .../front-containers/browserwindow-shape.tsx | 32 +++++++-------- .../front-containers/mobilephone-shape.tsx | 39 +++++++++---------- .../front-containers/modal-dialog-shape.tsx | 31 +++++++-------- .../front-containers/tablet-shape.tsx | 28 ++++++------- 4 files changed, 62 insertions(+), 68 deletions(-) diff --git a/src/common/components/mock-components/front-containers/browserwindow-shape.tsx b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx index cc89d8a9..6039037b 100644 --- a/src/common/components/mock-components/front-containers/browserwindow-shape.tsx +++ b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx @@ -3,8 +3,8 @@ import { forwardRef } from 'react'; import { ShapeProps } from '../front-components/shape.model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; import { Group, Rect, Circle, Text } from 'react-konva'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; +import { useGroupShapeProps } from '../mock-components.utils'; const browserWindowShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 200, @@ -22,29 +22,27 @@ const shapeType: ShapeType = 'browser'; export const BrowserWindowShape = forwardRef((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - browserWindowShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + browserWindowShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; + const margin = 10; const titleBarHeight = 30; const buttonRadius = 6; const urlBarHeight = 20; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + {/* Window frame */} ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - mobilePhoneShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + mobilePhoneShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const margin = 5; const screenMargin = 10; @@ -37,19 +37,16 @@ export const MobilePhoneShape = forwardRef((props, ref) => { const speakerRadius = 2; const buttonRadius = 9; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - - {/* Marco del móvil */} + + {/* Mobile Frame */} ((props, ref) => { fill="white" /> - {/* Pantalla del móvil */} + {/* Mobile Screen */} ((props, ref) => { fill="white" /> - {/* Altavoz */} + {/* LoudSpeaker */} ((props, ref) => { fill="white" /> - {/* Botón de inicio */} + {/* Init button */} ( (props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - modalDialogShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + modalDialogShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const titleBarHeight = 50; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + {/* Background */} ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(tabletShapeSizeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + tabletShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; + const margin = 20; const screenMargin = 15; const cameraRadius = 3; const buttonRadius = 5; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + {/* Marco de la tablet */} Date: Sun, 29 Sep 2024 14:11:43 +0200 Subject: [PATCH 17/18] rich components refactored --- .../accordion/accordion.tsx | 36 +++++++++---------- .../front-rich-components/appBar.tsx | 29 +++++++-------- .../front-rich-components/bar-chart.tsx | 31 ++++++++-------- .../breadcrumb/breadcrumb.tsx | 21 +++++------ .../buttonBar/buttonBar.tsx | 34 +++++++++--------- .../calendar/calendar.tsx | 33 ++++++++--------- .../horizontal-menu/horizontal-menu.tsx | 33 ++++++++--------- .../front-rich-components/line-chart.tsx | 32 ++++++++--------- .../front-rich-components/map-chart.tsx | 31 ++++++++-------- .../front-rich-components/modal/modal.tsx | 30 ++++++++-------- .../front-rich-components/pie-chart.tsx | 35 +++++++++--------- .../front-rich-components/table/table.tsx | 27 +++++++------- .../tabsbar/tabsbar-shape.tsx | 29 +++++++-------- .../vertical-menu/vertical-menu.tsx | 30 ++++++++-------- .../front-rich-components/video-player.tsx | 31 ++++++++-------- 15 files changed, 219 insertions(+), 243 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/accordion/accordion.tsx b/src/common/components/mock-components/front-rich-components/accordion/accordion.tsx index d8a471f4..73e28cf6 100644 --- a/src/common/components/mock-components/front-rich-components/accordion/accordion.tsx +++ b/src/common/components/mock-components/front-rich-components/accordion/accordion.tsx @@ -8,7 +8,7 @@ import { calculateSelectedAccordionHeight, mapTextToSections, } from './accordion.business'; -import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; +import { useGroupShapeProps } from '../../mock-components.utils'; const accordionShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 315, @@ -53,28 +53,24 @@ export const AccordionShape = forwardRef((props, ref) => { }); }, [sections, height]); - const { width: restrictedWidth, height: restrictedHeight } = - calculateDynamicContentSizeRestriction(sections, { - width, - height, - singleHeaderHeight, - accordionShapeSizeRestrictions, - accordionSelectedBodyHeight, - }); + const restrictedSize = calculateDynamicContentSizeRestriction(sections, { + width, + height, + singleHeaderHeight, + accordionShapeSizeRestrictions, + accordionSelectedBodyHeight, + }); + const { width: restrictedWidth } = restrictedSize; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + ((props, ref) => { onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(AppBarShapeSizeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + AppBarShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const iconWidth = 30; const iconPadding = 10; @@ -48,23 +52,20 @@ export const AppBarShape = forwardRef((props, ref) => { const barSpacing = 2; // Space between bars const totalIconHeight = 3 * barHeight + 2 * barSpacing; // Total height including spacing - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, strokeStyle, fill, textColor } = useShapeProps( otherProps, BASIC_SHAPE ); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* AppBar background */} ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - BarChartShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + BarChartShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const gap = restrictedWidth * 0.1; const bars = [ @@ -37,18 +37,15 @@ export const BarChartShape = forwardRef((props, ref) => { ]; const barWidth = restrictedWidth / bars.length - gap; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + ((props, ref) => { setGroupWidth(newGroupWidth); }, [sections]); - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + { width: groupWidth, height: GROUP_HEIGHT }, + shapeType, + ref + ); + return ( - + {sections.map((section, index) => { const posX = positions[index] || 0; return ( diff --git a/src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx b/src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx index dae97612..59d9ef9a 100644 --- a/src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx +++ b/src/common/components/mock-components/front-rich-components/buttonBar/buttonBar.tsx @@ -4,12 +4,12 @@ import { ShapeProps } from '../../front-components/shape.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 { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; import { forwardRef } from 'react'; import { extractCSVHeaders, splitCSVContentIntoRows, } from '@/common/utils/active-element-selector.utils'; +import { useGroupShapeProps } from '../../mock-components.utils'; const buttonBarShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 200, @@ -38,12 +38,13 @@ export const ButtonBarShape = forwardRef((props, ref) => { ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - buttonBarShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + buttonBarShapeSizeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const csvData = splitCSVContentIntoRows(text); const headers = extractCSVHeaders(csvData[0]); @@ -51,8 +52,6 @@ export const ButtonBarShape = forwardRef((props, ref) => { const dynamicTabWidth = restrictedWidth / tabLabels.length; - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, strokeStyle, fill, textColor } = useShapeProps( otherProps, BASIC_SHAPE @@ -60,16 +59,15 @@ export const ButtonBarShape = forwardRef((props, ref) => { const activeTab = otherProps?.activeElement ?? 0; + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {tabLabels.map((header, index) => ( ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - calendarShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + calendarShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth } = restrictedSize; const [currentDate, setCurrentDate] = useState(new Date()); @@ -51,19 +51,16 @@ export const CalendarShape = forwardRef((props, ref) => { const dayBoxWidth = (restrictedWidth - margin * 2) / 7; const dayBoxHeight = (height - headerHeight) / days.length; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - - {/* Encabezado del calendario */} + + {/* Calendar heading */} ((props, ref) => { const numberOfItems = itemLabels.length; const itemSpacing = 10; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - horizontalMenuShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + horizontalMenuShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1); const itemWidth = totalMargins / numberOfItems; - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps( otherProps, BASIC_SHAPE @@ -65,16 +63,15 @@ export const HorizontalMenu = forwardRef((props, ref) => { const activeSelected = otherProps?.activeElement ?? 0; + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - LineChartShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + LineChartShapeSizeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const scaleX = useMemo(() => { return restrictedWidth / LINE_CHART_WIDTH; @@ -39,18 +40,15 @@ export const LineChartShape = forwardRef((props, ref) => { return restrictedHeight / LINE_CHART_HEIGHT; }, [restrictedHeight]); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - MapChartShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + MapChartShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const scaleX = useMemo(() => { return restrictedWidth / MAP_FIX_WIDTH; @@ -39,18 +39,15 @@ export const MapChartShape = forwardRef((props, ref) => { return restrictedHeight / MAP_FIX_HEIGHT; }, [restrictedHeight]); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(modalShapeSizeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + modalShapeSizeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const headerHeight = 50; const buttonHeight = 30; @@ -48,8 +53,6 @@ export const Modal = forwardRef((props, ref) => { const buttonWidth = (restrictedWidth - (buttons.length + 1) * buttonSpacing) / buttons.length; - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const { stroke, strokeStyle, fill, textColor } = useShapeProps( otherProps, BASIC_SHAPE @@ -58,16 +61,15 @@ export const Modal = forwardRef((props, ref) => { const darkHeaderColor = darkenColor(fill, 40); const darkButtonColor = darkenColor(fill, 60); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* Background */} ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - PieChartShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + PieChartShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const scaleX = useMemo(() => { return restrictedWidth / PIE_FIX_WIDTH; @@ -39,25 +39,22 @@ export const PieChartShape = forwardRef((props, ref) => { return restrictedHeight / PIE_FIX_HEIGHT; }, [restrictedHeight]); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + - {/* Círculo exterior */} + {/* Outer Circle */} ((props, ref) => { fill="none" /> - {/* Secciones del gráfico */} + {/* Pie Slices */} ((props, ref) => { const { x, y, width, height, id, onSelected, text, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(tableSizeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + tableSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const rows = parseCSVRowsIntoArray(text); const headerInfo = extractHeaderRow(rows[0]); @@ -48,18 +52,15 @@ export const Table = forwardRef((props, ref) => { ); const cellHeight = restrictedHeight / (dataRows.length + 1); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + {/* Draw header cells */} {headerRow.map((header, colIdx) => { const accumulatedWidth = cellWidths diff --git a/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx b/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx index b2dda464..1e163c69 100644 --- a/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx +++ b/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx @@ -7,7 +7,7 @@ import { extractCSVHeaders, splitCSVContentIntoRows, } from '@/common/utils/active-element-selector.utils'; -import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook'; +import { useGroupShapeProps } from '../../mock-components.utils'; const tabsBarShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 450, @@ -35,8 +35,12 @@ export const TabsBarShape = forwardRef((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(tabsBarShapeSizeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + tabsBarShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const csvData = splitCSVContentIntoRows(text); const headers = extractCSVHeaders(csvData[0]); @@ -49,20 +53,17 @@ export const TabsBarShape = forwardRef((props, ref) => { const bodyHeight = restrictedHeight - tabHeight - 10; // Height of the tabs bar body const totalTabsWidth = tabLabels.length * (tabWidth + tabMargin) + tabWidth; // Total width required plus one additional tab - const { handleSelection } = useShapeComponentSelection(props, shapeType); - const activeTab = otherProps?.activeElement ?? 0; + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + {/* Background of the tab bar body */} ( } }, [text]); - const { width: restrictedWidth, height: restrictedHeight } = - calculateDynamicContentSizeRestriction(verticalMenuItems, { + const restrictedSize = calculateDynamicContentSizeRestriction( + verticalMenuItems, + { width, height, singleHeaderHeight, verticalMenuShapeSizeRestrictions, - }); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + } + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { const { x, y, width, height, id, onSelected, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions( - videoPlayerShapeSizeRestrictions, - width, - height - ); + const restrictedSize = fitSizeToShapeSizeRestrictions( + videoPlayerShapeSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const margin = 10; const controlBarHeight = 30; - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); return ( - + {/* videoplayer frame */} Date: Sun, 29 Sep 2024 14:21:56 +0200 Subject: [PATCH 18/18] fron-text refactored --- .../heading1-text-shape.tsx | 29 ++++++++++--------- .../heading2-text-shape.tsx | 29 ++++++++++--------- .../heading3-text-shape.tsx | 28 +++++++++--------- .../normaltext-shape.tsx | 29 ++++++++++--------- .../paragraph-text-shape.tsx | 29 ++++++++++--------- .../front-text-components/smalltext-shape.tsx | 29 ++++++++++--------- 6 files changed, 90 insertions(+), 83 deletions(-) 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 7f49a22d..1ebdc1b0 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 @@ -3,9 +3,9 @@ import { Group, Text } from 'react-konva'; import { ShapeProps } from '../front-components/shape.model'; import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; -import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook'; import { useShapeProps } from '../../shapes/use-shape-props.hook'; import { BASIC_SHAPE } from '../front-components/shape.const'; +import { useGroupShapeProps } from '../mock-components.utils'; const heading1SizeRestrictions: ShapeSizeRestrictions = { minWidth: 150, @@ -33,23 +33,24 @@ export const Heading1Shape = forwardRef((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(heading1SizeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + heading1SizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(heading2SizeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + heading2SizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(heading3SizeRestrictions, width, height); + const restrictedSize = fitSizeToShapeSizeRestrictions( + heading3SizeRestrictions, + width, + height + ); - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(normaltextSizeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + normaltextSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(paragraphSizeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + paragraphSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - + ((props, ref) => { otherProps, ...shapeProps } = props; - const { width: restrictedWidth, height: restrictedHeight } = - fitSizeToShapeSizeRestrictions(smalltextSizeRestrictions, width, height); - - const { handleSelection } = useShapeComponentSelection(props, shapeType); + const restrictedSize = fitSizeToShapeSizeRestrictions( + smalltextSizeRestrictions, + width, + height + ); + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; const { textColor } = useShapeProps(otherProps, BASIC_SHAPE); + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + return ( - +