From f268011315852bcb573b915d2f0df21e1c88ca9b Mon Sep 17 00:00:00 2001 From: Siklos Date: Thu, 18 Aug 2022 08:46:50 -0400 Subject: [PATCH] Implement more options + Add depth dimension (revert DimensionLayer) (#37) - Displayed text - Enable Shortcuts - Hide text - Disable Dimension - Depth dimension Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/37 --- src/Components/Editor/Shortcuts.ts | 5 ++ .../ElementsSidebar/ElementsSidebar.test.tsx | 7 ++ .../ElementsSidebar/ElementsSidebar.tsx | 4 +- src/Components/Properties/DynamicForm.tsx | 9 ++ src/Components/Properties/Properties.test.tsx | 1 + src/Components/Properties/StaticForm.tsx | 8 ++ src/Components/SVG/Elements/Container.tsx | 39 ++++---- .../SVG/Elements/DepthDimensionLayer.tsx | 90 +++++++++++++++++++ .../SVG/Elements/DimensionLayer.tsx | 57 ++++++++++++ src/Components/SVG/SVG.tsx | 8 ++ src/Interfaces/IProperties.ts | 3 + src/utils/default.ts | 24 +++-- src/utils/itertools.ts | 28 ++++++ 13 files changed, 260 insertions(+), 23 deletions(-) create mode 100644 src/Components/SVG/Elements/DepthDimensionLayer.tsx create mode 100644 src/Components/SVG/Elements/DimensionLayer.tsx diff --git a/src/Components/Editor/Shortcuts.ts b/src/Components/Editor/Shortcuts.ts index aa20d96..f7d7b5b 100644 --- a/src/Components/Editor/Shortcuts.ts +++ b/src/Components/Editor/Shortcuts.ts @@ -1,5 +1,6 @@ import { Dispatch, SetStateAction } from 'react'; import { IHistoryState } from '../../Interfaces/IHistoryState'; +import { ENABLE_SHORTCUTS } from '../../utils/default'; export function onKeyDown( event: KeyboardEvent, @@ -7,6 +8,10 @@ export function onKeyDown( historyCurrentStep: number, setHistoryCurrentStep: Dispatch> ): void { + if (!ENABLE_SHORTCUTS) { + return; + } + event.preventDefault(); if (event.isComposing || event.keyCode === 229) { return; diff --git a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx index bf88f22..4f3b042 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx @@ -14,6 +14,7 @@ describe.concurrent('Elements sidebar', () => { properties: { id: 'main', parentId: null, + displayedText: 'main', x: 0, y: 0, width: 2000, @@ -47,6 +48,7 @@ describe.concurrent('Elements sidebar', () => { properties: { id: 'main', parentId: '', + displayedText: 'main', x: 0, y: 0, width: 2000, @@ -106,6 +108,7 @@ describe.concurrent('Elements sidebar', () => { properties: { id: 'main', parentId: '', + displayedText: 'main', x: 0, y: 0, minWidth: 1, @@ -125,6 +128,7 @@ describe.concurrent('Elements sidebar', () => { properties: { id: 'child-1', parentId: 'main', + displayedText: 'child-1', x: 0, y: 0, minWidth: 1, @@ -145,6 +149,7 @@ describe.concurrent('Elements sidebar', () => { properties: { id: 'child-2', parentId: 'main', + displayedText: 'child-2', x: 0, y: 0, minWidth: 1, @@ -185,6 +190,7 @@ describe.concurrent('Elements sidebar', () => { properties: { id: 'main', parentId: '', + displayedText: 'main', x: 0, y: 0, minWidth: 1, @@ -203,6 +209,7 @@ describe.concurrent('Elements sidebar', () => { properties: { id: 'child-1', parentId: 'main', + displayedText: 'child-1', x: 0, y: 0, minWidth: 1, diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index 345ad05..6a2d688 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -83,7 +83,9 @@ export const ElementsSidebar: React.FC = (props: IElement const container = containers[index]; const depth: number = getDepth(container); const key = container.properties.id.toString(); - const text = '|\t'.repeat(depth) + key; + const text = container.properties.displayedText === key + ? `${'|\t'.repeat(depth)} ${key}` + : `${'|\t'.repeat(depth)} ${container.properties.displayedText} (${key})`; const selectedClass: string = props.SelectedContainer !== undefined && props.SelectedContainer !== null && props.SelectedContainer.properties.id === container.properties.id diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/Properties/DynamicForm.tsx index 76bc4e1..a34b5bf 100644 --- a/src/Components/Properties/DynamicForm.tsx +++ b/src/Components/Properties/DynamicForm.tsx @@ -52,6 +52,15 @@ const DynamicForm: React.FunctionComponent = (props) => { value={props.properties.parentId?.toString()} isDisabled={true} /> + props.onChange('displayedText', event.target.value)} + /> { const prop: IProperties = { id: 'stuff', parentId: 'parentId', + displayedText: 'stuff', x: 1, y: 1, width: 1, diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx index 2b0bd6a..e2b38c8 100644 --- a/src/Components/Properties/StaticForm.tsx +++ b/src/Components/Properties/StaticForm.tsx @@ -52,6 +52,14 @@ const StaticForm: React.FunctionComponent = (props) => { defaultValue={props.properties.parentId?.toString()} isDisabled={true} /> + = (props: IContainerProps) => const text = (props.model.properties.width ?? 0).toString(); let dimensionChildren: JSX.Element | null = null; - if (props.model.children.length > 1) { + if (props.model.children.length > 1 && SHOW_CHILDREN_DIMENSIONS) { const { childrenId, xChildrenStart, @@ -79,23 +79,28 @@ export const Container: React.FC = (props: IContainerProps) => transform={transform} key={`container-${props.model.properties.id}`} > - + { SHOW_PARENT_DIMENSION + ? + : null + } { dimensionChildren } { svg } - - {props.model.properties.id} - + { SHOW_TEXT + ? + {props.model.properties.displayedText} + + : null } { containersElements } ); diff --git a/src/Components/SVG/Elements/DepthDimensionLayer.tsx b/src/Components/SVG/Elements/DepthDimensionLayer.tsx new file mode 100644 index 0000000..a32dbda --- /dev/null +++ b/src/Components/SVG/Elements/DepthDimensionLayer.tsx @@ -0,0 +1,90 @@ +import * as React from 'react'; +import { ContainerModel } from '../../../Interfaces/IContainerModel'; +import { DIMENSION_MARGIN } from '../../../utils/default'; +import { getAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools'; +import { transformX } from './Container'; +import { Dimension } from './Dimension'; + +interface IDimensionLayerProps { + roots: ContainerModel | ContainerModel[] | null +} + +const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => { + const it = MakeBFSIterator(root); + const dimensions: React.ReactNode[] = []; + let currentDepth = 0; + let min = Infinity; + let max = -Infinity; + let lastY = 0; + for (const { container, depth } of it) { + if (currentDepth !== depth) { + AddNewDimension(currentDepth, min, max, lastY, dimensions); + + currentDepth = depth; + min = Infinity; + max = -Infinity; + } + + const absoluteX = getAbsolutePosition(container)[0]; + const x = transformX(absoluteX, container.properties.width, container.properties.XPositionReference); + lastY = container.properties.y + container.properties.height; + if (x < min) { + min = x; + } + + if (x > max) { + max = x; + } + } + + AddNewDimension(currentDepth, min, max, lastY, dimensions); + + return dimensions; +}; + +/** + * A layer containing all dimension + * @param props + * @returns + */ +export const DepthDimensionLayer: React.FC = (props: IDimensionLayerProps) => { + let dimensions: React.ReactNode[] = []; + if (Array.isArray(props.roots)) { + props.roots.forEach(child => { + dimensions.concat(getDimensionsNodes(child)); + }); + } else if (props.roots !== null) { + dimensions = getDimensionsNodes(props.roots); + } + return ( + + { dimensions } + + ); +}; + +function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, dimensions: React.ReactNode[]): void { + const id = `dim-depth-${currentDepth}`; + const xStart = min; + const xEnd = max; + const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1)); + const strokeWidth = 1; + const width = xEnd - xStart; + const text = width.toString(); + + if (width === 0) { + return; + } + + dimensions.push( + + ); +} diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx new file mode 100644 index 0000000..23d719e --- /dev/null +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { ContainerModel } from '../../../Interfaces/IContainerModel'; +import { DIMENSION_MARGIN } from '../../../utils/default'; +import { getAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools'; +import { Dimension } from './Dimension'; + +interface IDimensionLayerProps { + roots: ContainerModel | ContainerModel[] | null +} + +const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => { + const it = MakeBFSIterator(root); + const dimensions: React.ReactNode[] = []; + for (const { container, depth } of it) { + const width = container.properties.width; + const id = `dim-${container.properties.id}`; + const xStart = getAbsolutePosition(container)[0]; + const xEnd = xStart + width; + const y = (container.properties.y + container.properties.height) + (DIMENSION_MARGIN * (depth + 1)); + const strokeWidth = 1; + const text = width.toString(); + dimensions.push( + + ); + } + return dimensions; +}; + +/** + * A layer containing all dimension + * @param props + * @returns + */ +export const DimensionLayer: React.FC = (props: IDimensionLayerProps) => { + let dimensions: React.ReactNode[] = []; + if (Array.isArray(props.roots)) { + props.roots.forEach(child => { + dimensions.concat(getDimensionsNodes(child)); + }); + } else if (props.roots !== null) { + dimensions = getDimensionsNodes(props.roots); + } + return ( + + { dimensions } + + ); +}; diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 652258f..e158da3 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -4,6 +4,9 @@ import { Container } from './Elements/Container'; import { ContainerModel } from '../../Interfaces/IContainerModel'; import { Selector } from './Elements/Selector'; import { BAR_WIDTH } from '../Bar/Bar'; +import { DimensionLayer } from './Elements/DimensionLayer'; +import { DepthDimensionLayer } from './Elements/DepthDimensionLayer'; +import { SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default'; interface ISVGProps { width: number @@ -74,6 +77,11 @@ export const SVG: React.FC = (props: ISVGProps) => { { children } + { + SHOW_DIMENSIONS_PER_DEPTH + ? + : null + } diff --git a/src/Interfaces/IProperties.ts b/src/Interfaces/IProperties.ts index a400a0a..205d93f 100644 --- a/src/Interfaces/IProperties.ts +++ b/src/Interfaces/IProperties.ts @@ -11,6 +11,9 @@ export default interface IProperties { /** id of the parent container (null when there is no parent) */ parentId: string | null + /** Text displayed in the container */ + displayedText: string + /** horizontal offset */ x: number diff --git a/src/utils/default.ts b/src/utils/default.ts index 1b4a41c..f8fe20c 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -4,6 +4,23 @@ import { IConfiguration } from '../Interfaces/IConfiguration'; import { IContainerModel } from '../Interfaces/IContainerModel'; import IProperties from '../Interfaces/IProperties'; +/// CONTAINRE DEFAULTS /// + +export const SHOW_TEXT = true; + +/// DIMENSIONS DEFAULTS /// + +export const SHOW_PARENT_DIMENSION = true; +export const SHOW_CHILDREN_DIMENSIONS = false; +export const SHOW_DIMENSIONS_PER_DEPTH = true; +export const DIMENSION_MARGIN = 50; +export const NOTCHES_LENGTH = 4; + +/// EDITOR DEFAULTS /// + +export const ENABLE_SHORTCUTS = true; +export const MAX_HISTORY = 200; + export const DEFAULT_CONFIG: IConfiguration = { AvailableContainers: [ { @@ -31,6 +48,7 @@ export const DEFAULT_CONFIG: IConfiguration = { export const DEFAULT_MAINCONTAINER_PROPS: IProperties = { id: 'main', parentId: 'null', + displayedText: 'main', x: 0, y: 0, minWidth: 1, @@ -55,6 +73,7 @@ export const GetDefaultContainerProps = ( ): IProperties => ({ id: `${type}-${typeCount}`, parentId: parent.properties.id, + displayedText: `${type}-${typeCount}`, x, y, width: containerConfig.Width ?? containerConfig.MinWidth ?? parent.properties.width, @@ -67,8 +86,3 @@ export const GetDefaultContainerProps = ( style: containerConfig.Style, userData: containerConfig.UserData }); - -export const DIMENSION_MARGIN = 50; -export const NOTCHES_LENGTH = 4; - -export const MAX_HISTORY = 200; diff --git a/src/utils/itertools.ts b/src/utils/itertools.ts index 221d6c0..e52e034 100644 --- a/src/utils/itertools.ts +++ b/src/utils/itertools.ts @@ -22,6 +22,34 @@ export function * MakeIterator(root: IContainerModel): Generator { + const queue: IContainerModel[] = [root]; + let depth = 0; + while (queue.length > 0) { + let levelSize = queue.length; + while (levelSize-- !== 0) { + const container = queue.shift() as IContainerModel; + yield { + container, + depth + }; + + for (let i = container.children.length - 1; i >= 0; i--) { + const child = container.children[i]; + queue.push(child); + } + } + depth++; + } +} + /** * Returns the depth of the container * @returns The depth of the container