From 24930799387551e81224416b048dfcfaf1c28bb0 Mon Sep 17 00:00:00 2001 From: Niloy Sikdar Date: Wed, 19 Jul 2023 15:30:52 +0530 Subject: [PATCH 1/3] chore(playground): add dummy workspace data --- .../playground/pages/WorkSpace/data.ts | 213 ++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 modules/code-builder/playground/pages/WorkSpace/data.ts diff --git a/modules/code-builder/playground/pages/WorkSpace/data.ts b/modules/code-builder/playground/pages/WorkSpace/data.ts new file mode 100644 index 00000000..9f2bab01 --- /dev/null +++ b/modules/code-builder/playground/pages/WorkSpace/data.ts @@ -0,0 +1,213 @@ +import { + ModelBrickBlock, + ModelBrickData, + ModelBrickExpression, + ModelBrickStatement, +} from '@/brick'; +import type { TBrickType, TBrickCoords, TBrickArgDataType } from '@/@types/brick'; + +type InstanceMap = { + data: ModelBrickData; + expression: ModelBrickExpression; + statement: ModelBrickStatement; + block: ModelBrickBlock; +}; + +export type Brick = { + id: string; + type: TBrickType; + instance: InstanceMap[TBrickType]; + coords: TBrickCoords; + children?: Brick[]; +}; + +export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [ + { + id: 'workspace1', + data: [ + { + id: '1', + type: 'block', + instance: new ModelBrickBlock({ + label: 'Block', + args: Object.fromEntries( + [].map< + [string, { label: string; dataType: TBrickArgDataType; meta: unknown }] + >((name) => [name, { label: name, dataType: 'any', meta: undefined }]), + ), + colorBg: 'yellow', + colorFg: 'black', + outline: 'red', + scale: 2, + glyph: '', + connectAbove: true, + connectBelow: true, + name: '', + nestLengthY: 125, + }), + coords: { x: 50, y: 50 }, + children: [ + { + id: '2', + type: 'statement', + instance: new ModelBrickStatement({ + label: 'Statement', + args: Object.fromEntries( + [].map< + [ + string, + { + label: string; + dataType: TBrickArgDataType; + meta: unknown; + }, + ] + >((name) => [ + name, + { label: name, dataType: 'any', meta: undefined }, + ]), + ), + colorBg: 'lightblue', + colorFg: 'black', + outline: 'blue', + scale: 2, + glyph: '', + connectAbove: true, + connectBelow: true, + name: '', + }), + coords: { x: 68, y: 92 }, + }, + { + id: '3', + type: 'statement', + instance: new ModelBrickStatement({ + label: 'Statement', + args: Object.fromEntries( + [].map< + [ + string, + { + label: string; + dataType: TBrickArgDataType; + meta: unknown; + }, + ] + >((name) => [ + name, + { label: name, dataType: 'any', meta: undefined }, + ]), + ), + colorBg: 'lightgreen', + colorFg: 'black', + outline: 'green', + scale: 2, + glyph: '', + connectAbove: true, + connectBelow: true, + name: '', + }), + coords: { x: 68, y: 134 }, + }, + { + id: '4', + type: 'block', + instance: new ModelBrickBlock({ + label: 'Block', + args: Object.fromEntries( + [].map< + [ + string, + { + label: string; + dataType: TBrickArgDataType; + meta: unknown; + }, + ] + >((name) => [ + name, + { label: name, dataType: 'any', meta: undefined }, + ]), + ), + colorBg: 'orange', + colorFg: 'black', + outline: 'grey', + scale: 2, + glyph: '', + connectAbove: true, + connectBelow: true, + name: '', + nestLengthY: 17, + }), + coords: { x: 68, y: 176 }, + children: [ + { + id: '5', + type: 'statement', + instance: new ModelBrickStatement({ + label: 'Statement', + args: Object.fromEntries( + [].map< + [ + string, + { + label: string; + dataType: TBrickArgDataType; + meta: unknown; + }, + ] + >((name) => [ + name, + { label: name, dataType: 'any', meta: undefined }, + ]), + ), + colorBg: 'lightpink', + colorFg: 'black', + outline: 'deeppink', + + scale: 2, + glyph: '', + connectAbove: true, + connectBelow: true, + name: '', + }), + coords: { x: 86, y: 218 }, + }, + ], + }, + { + id: '6', + type: 'statement', + instance: new ModelBrickStatement({ + label: 'Statement', + args: Object.fromEntries( + [].map< + [ + string, + { + label: string; + dataType: TBrickArgDataType; + meta: unknown; + }, + ] + >((name) => [ + name, + { label: name, dataType: 'any', meta: undefined }, + ]), + ), + colorBg: 'lightgreen', + colorFg: 'black', + outline: 'green', + scale: 2, + glyph: '', + connectAbove: true, + connectBelow: true, + name: '', + }), + coords: { x: 68, y: 302 }, + }, + ], + }, + ], + }, +]; From 4a1df205d201bddd475186471ad118f4451dedd6 Mon Sep 17 00:00:00 2001 From: Niloy Sikdar Date: Wed, 19 Jul 2023 15:32:58 +0530 Subject: [PATCH 2/3] fix(bricks): fix brick components to accept coords --- .../code-builder/src/brick/design0/BrickBlock.ts | 3 ++- .../src/brick/design0/components/BrickBlock.tsx | 14 +++++++++----- .../src/brick/design0/components/BrickData.tsx | 14 +++++++++----- .../brick/design0/components/BrickExpression.tsx | 14 +++++++++----- .../brick/design0/components/BrickStatement.tsx | 14 +++++++++----- 5 files changed, 38 insertions(+), 21 deletions(-) diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts index 9c555d48..07d8dcbc 100644 --- a/modules/code-builder/src/brick/design0/BrickBlock.ts +++ b/modules/code-builder/src/brick/design0/BrickBlock.ts @@ -32,6 +32,7 @@ export default class BrickBlock extends BrickModelBlock { scale: number; connectAbove: boolean; connectBelow: boolean; + nestLengthY?: number; }) { super(params); const argsKeys = Object.keys(this._args); @@ -41,7 +42,7 @@ export default class BrickBlock extends BrickModelBlock { hasNotchInsTop: this._connectAbove, hasNotchInsBot: this._connectBelow, scale: this._scale, - nestLengthY: 30, + nestLengthY: params.nestLengthY ?? 17, innerLengthX: 100, argHeights: Array.from({ length: argsKeys.length }, () => 17), }); diff --git a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx index 7dd5ed16..92c3293f 100644 --- a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx +++ b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx @@ -1,13 +1,17 @@ import type { JSX } from 'react'; -import type { IBrickBlock } from '@/@types/brick'; +import type { IBrickBlock, TBrickCoords } from '@/@types/brick'; // ------------------------------------------------------------------------------------------------- -export default function (props: { instance: IBrickBlock }): JSX.Element { - const { instance } = props; - +export default function ({ + instance, + coords = { x: 0, y: 0 }, +}: { + instance: IBrickBlock; + coords?: TBrickCoords; +}): JSX.Element { return ( - + + + + Date: Wed, 19 Jul 2023 15:33:49 +0530 Subject: [PATCH 3/3] feat(playground): add workspace page and functionality into playground --- modules/code-builder/playground/index.tsx | 5 ++ .../playground/pages/WorkSpace/index.tsx | 65 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 modules/code-builder/playground/pages/WorkSpace/index.tsx diff --git a/modules/code-builder/playground/index.tsx b/modules/code-builder/playground/index.tsx index 288860a6..181d4e21 100644 --- a/modules/code-builder/playground/index.tsx +++ b/modules/code-builder/playground/index.tsx @@ -2,12 +2,17 @@ import { createRoot } from 'react-dom/client'; import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'; import PageCollision from './pages/Collision'; +import WorkSpace from './pages/WorkSpace'; const router = createBrowserRouter([ { path: '/collision', element: , }, + { + path: '/workspace', + element: , + }, { path: '/', element: , diff --git a/modules/code-builder/playground/pages/WorkSpace/index.tsx b/modules/code-builder/playground/pages/WorkSpace/index.tsx new file mode 100644 index 00000000..eca5b957 --- /dev/null +++ b/modules/code-builder/playground/pages/WorkSpace/index.tsx @@ -0,0 +1,65 @@ +import { + BrickBlock, + BrickData, + BrickExpression, + BrickStatement, + ModelBrickBlock, + ModelBrickData, + ModelBrickExpression, + ModelBrickStatement, +} from '@/brick'; +import { WORKSPACES_DATA } from './data'; +import type { TBrickCoords, TBrickType } from '@/@types/brick'; +import type { Brick } from './data'; + +function getBrick( + type: TBrickType, + instance: ModelBrickBlock | ModelBrickData | ModelBrickExpression | ModelBrickStatement, + coords: TBrickCoords, +) { + switch (type) { + case 'data': + return ; + case 'expression': + return ; + case 'statement': + return ; + case 'block': + return ; + default: + return <>; + } +} + +function RenderBricks({ brickData }: { brickData: Brick }) { + return ( + <> + {getBrick(brickData.type, brickData.instance, brickData.coords)} + {brickData.children && + brickData.children?.length > 0 && + brickData.children.map((child) => )} + + ); +} + +function WorkSpace() { + return ( +
+ {WORKSPACES_DATA.map((workspace) => ( + + {workspace.data.map((brick) => { + return ; + })} + + ))} +
+ ); +} + +export default WorkSpace;