Skip to content

Commit 23a7154

Browse files
meganindyameganindya
authored
Merge pull request #434 from sugarlabs/gsoc-2024/week-11-12
GSoC 2024: Masonry
2 parents 483a2e3 + d9ab1ee commit 23a7154

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+6026
-7
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ npm-debug.log*
2727
yarn-debug.log*
2828
yarn-error.log*
2929
lerna-debug.log*
30+
31+
*storybook.log

‎.markdownlint.jsonc‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,6 @@
8181
"tables": true,
8282
// Include headings
8383
"headings": true,
84-
// Include headings
85-
"headers": true,
8684
// Strict length checking
8785
"strict": false,
8886
// Stern length checking
@@ -118,9 +116,7 @@
118116
// MD024/no-duplicate-heading/no-duplicate-header - Multiple headings with the same content
119117
"MD024": {
120118
// Only check sibling headings
121-
"allow_different_nesting": true,
122-
// Only check sibling headings
123-
"siblings_only": false
119+
"siblings_only": true
124120
},
125121

126122
// MD025/single-title/single-h1 - Multiple top-level headings in the same document

‎.vscode/settings.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
{
2-
"editor.rulers": [100],
2+
"editor.rulers": [
3+
100
4+
],
35
"editor.renderWhitespace": "boundary",
46
"editor.defaultFormatter": "esbenp.prettier-vscode",
57
"javascript.updateImportsOnFileMove.enabled": "always",
@@ -25,7 +27,7 @@
2527
"editor.suggest.snippetsPreventQuickSuggestions": false,
2628
"editor.suggestSelection": "first",
2729
"editor.tabCompletion": "onlySnippets",
28-
"editor.wordBasedSuggestions": false
30+
"editor.wordBasedSuggestions": "off"
2931
},
3032
"[markdown]": {
3133
"editor.wordWrap": "on",

‎modules/masonry/.storybook/main.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { UserConfigExport } from 'vite';
2+
3+
import path from 'path';
4+
import { mergeConfig } from 'vite';
5+
6+
// -------------------------------------------------------------------------------------------------
7+
8+
function resolve(rootPath: string) {
9+
return path.resolve(__dirname, '..', rootPath);
10+
}
11+
12+
export default {
13+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(tsx|ts|jsx|js)'],
14+
addons: [
15+
'@storybook/addon-links',
16+
'@storybook/addon-essentials',
17+
'@storybook/addon-interactions',
18+
],
19+
framework: {
20+
name: '@storybook/react-vite',
21+
options: {},
22+
},
23+
docs: {
24+
autodocs: 'tag',
25+
},
26+
async viteFinal(config: UserConfigExport) {
27+
return mergeConfig(config, {
28+
resolve: {
29+
alias: {
30+
'@': resolve('src'),
31+
'@res': resolve('../../res'),
32+
},
33+
extensions: ['.tsx', '.ts', '.js', '.scss', '.sass', '.json'],
34+
},
35+
});
36+
},
37+
};

‎modules/masonry/.storybook/preview.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import '@res/scss/base.scss';
2+
3+
export const parameters = {
4+
actions: {
5+
argTypesRegex: '^on[A-Z].*',
6+
},
7+
controls: {
8+
matchers: {
9+
color: /(background|color)$/i,
10+
date: /Date$/,
11+
},
12+
},
13+
};

‎modules/masonry/docs/architecture/MasonryDFD.drawio‎

Lines changed: 238 additions & 0 deletions
Large diffs are not rendered by default.

‎modules/masonry/docs/architecture/MasonryDFD.drawio.png‎

356 KB
Loading

‎modules/masonry/docs/architecture/Processes.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
# Processes for Data Flow Diagram
2+
3+
## Level 0: Masonry Framework Communication with MusicBlocks
4+
5+
1. **Load Configuration**:
6+
- Input: Configuration File
7+
- Output: Initialized System
8+
9+
2. **Save Configuration**:
10+
- Input: Current State
11+
- Output: Updated Configuration File
12+
13+
3. **Generate Syntax Tree**:
14+
- Input: Brick Stack Data
15+
- Output: Syntax Tree
16+
17+
4. **Parse Syntax Tree**:
18+
- Input: Syntax Tree
19+
- Output: Executable Actions
20+
21+
## Level 1: Interaction between Brick, Palette, Workspace, and Stack of Bricks
22+
23+
### Bricks
24+
25+
1. **Initialize Brick**:
26+
- Input: Brick Properties
27+
- Output: Initialized Brick
28+
29+
2. **Provide Brick Properties**:
30+
- Input: Brick ID from Workspace
31+
- Output: Brick Properties to Workspace
32+
33+
### Palette
34+
35+
1. **Load Brick List**:
36+
- Input: Configuration Settings
37+
- Output: List of Bricks
38+
39+
2. **Select Brick**:
40+
- Input: Brick Selection
41+
- Output: Selected Brick Properties to Workspace
42+
(How this works is, The palette will have a loaded list of SVGs. When you drag one from palette on
43+
to the workspace, the brick will be created on the workspace whos id matches to the one in brick)
44+
45+
### Workspace
46+
47+
1. **Add Brick to Workspace**:
48+
- Input: Brick Properties from Palette
49+
- Output: Updated Workspace
50+
51+
2. **Update Brick Position**:
52+
- Input: Brick ID and Position Data
53+
- Output: Updated Brick Position in Workspace
54+
55+
3. **Connect Bricks**:
56+
- Input: Brick IDs and Connection Data
57+
- Output: Updated Brick Stack in Workspace
58+
59+
4. **Disconnect Bricks**:
60+
- Input: Brick IDs
61+
- Output: Updated Brick Stack in Workspace
62+
63+
5. **Save Workspace State**:
64+
- Input: Current Workspace Data
65+
- Output: Saved Workspace State
66+
67+
### Stack of Bricks
68+
69+
1. **Initialize Stack**:
70+
- Input: Brick Stack Data
71+
- Output: Initialized Stack
72+
73+
2. **Provide Stack Properties**:
74+
- Input: Stack ID from Workspace
75+
- Output: Stack Properties to Workspace
76+
77+
## Level 2: Detailed Interaction within MVC Architecture
78+
79+
### Model
80+
81+
1. BrickModel:
82+
- Properties:
83+
- brickType
84+
- originalColor
85+
- hoverColor
86+
- disconnectedColor
87+
- executionColor
88+
- highlightState
89+
- shape
90+
- sprites
91+
- labels
92+
- inputPorts
93+
- outputPorts
94+
- editableTextLabels
95+
- Methods:
96+
- setHighlightState(state)
97+
- updateProperties(properties)
98+
- updateLabels(labels)
99+
- updatePorts(inputPorts, outputPorts)
100+
2. StackModel:
101+
- Properties:
102+
- connectedBricks
103+
- startPosition
104+
- validationRules
105+
- collapsibleState
106+
- Methods:
107+
- addBrick(brick)
108+
- removeBrick(brick)
109+
- updateProperties(properties)
110+
- validateStack()
111+
- setCollapsibleState(state)
112+
3. PaletteModel:
113+
- Properties:
114+
- availableBricks
115+
- categories
116+
- searchQuery
117+
- filters
118+
- Methods:
119+
- loadBricks(bricks)
120+
- updateBrickAvailability(brick, available)
121+
- categorizeItems(categories)
122+
- filterItems(filters)
123+
- searchItems(query)
124+
4. WorkspaceModel:
125+
- Properties:
126+
- connectedStacks
127+
- brickPositions
128+
- zoomLevel
129+
- undoRedoStack
130+
- Methods:
131+
- addStack(stack)
132+
- removeStack(stack)
133+
- updateBrickPosition(brick, position)
134+
- connectBricks(brick1, brick2)
135+
- disconnectBricks(brick1, brick2)
136+
- deleteBrick(brick)
137+
- zoomIn()
138+
- zoomOut()
139+
- undo()
140+
- redo()
141+
142+
### View
143+
144+
1. BrickView:
145+
- Methods:
146+
- renderBrick(brick)
147+
- updateBrickAppearance(brick)
148+
- renderInlineTextEditing(brick)
149+
- renderContextMenu(brick)
150+
2. StackView:
151+
- Methods:
152+
- renderStack(stack)
153+
- updateStackAppearance(stack)
154+
- renderValidationFeedback(stack)
155+
- renderCollapsibleState(stack)
156+
3. PaletteView:
157+
- Methods:
158+
- renderPalette(palette)
159+
- updatePaletteAppearance(palette)
160+
- renderCategories(categories)
161+
- renderSearchBar(searchQuery)
162+
- renderFilters(filters)
163+
4. WorkspaceView:
164+
- Methods:
165+
- renderWorkspace(workspace)
166+
- updateWorkspaceAppearance(workspace)
167+
- handleUserInteractions(interaction)
168+
- renderZoomControls(zoomLevel)
169+
- renderUndoRedoButtons(undoRedoStack)
170+
171+
### Controller
172+
173+
1. BrickController:
174+
- Methods:
175+
- handleBrickPropertyChange(brick, properties)
176+
- handleBrickHighlightStateChange(brick, state)
177+
- handleInlineTextEditing(brick, text)
178+
- handleContextMenuAction(brick, action)
179+
2. StackController:
180+
- Methods:
181+
- handleAddBrick(stack, brick)
182+
- handleRemoveBrick(stack, brick)
183+
- handleStackPropertyChange(stack, properties)
184+
- handleStackValidation(stack)
185+
- handleCollapsibleStateChange(stack, state)
186+
3. PaletteController:
187+
- Methods:
188+
- handleBrickLoad(palette, bricks)
189+
- handleBrickAvailabilityChange(palette, brick, available)
190+
- handleCategorization(palette, categories)
191+
- handleFiltering(palette, filters)
192+
- handleSearching(palette, query)
193+
4. WorkspaceController:
194+
- Methods:
195+
- handleAddStack(workspace, stack)
196+
- handleRemoveStack(workspace, stack)
197+
- handleBrickPositionChange(workspace, brick, position)
198+
- handleBrickConnection(workspace, brick1, brick2)
199+
- handleBrickDisconnection(workspace, brick1, brick2)
200+
- handleBrickDeletion(workspace, brick)
201+
- handleZoomIn(workspace)
202+
- handleZoomOut(workspace)
203+
- handleUndo(workspace)
204+
- handleRedo(workspace)

0 commit comments

Comments
 (0)