Skip to content

Commit 0941466

Browse files
justin212407justin212407
committed
chore(masonry): clean code by removing unncexessary comments
Signed-off-by: Justin Charles <[email protected]>
1 parent 40eeca2 commit 0941466

File tree

5 files changed

+14
-61
lines changed

5 files changed

+14
-61
lines changed

‎modules/masonry/src/brick/view/components/compound.tsx

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,22 @@
1-
// src/masonry/view/CompoundBrickView.tsx
2-
31
import React, { useState, useEffect } from 'react';
42
import type { TBrickRenderPropsCompound } from '../../@types/brick';
53
import { generatePath, getBoundingBox } from '../../utils/path';
64

75
const FONT_HEIGHT = 16;
86

9-
// breathing-room padding on each side
107
const PADDING = {
118
top: 4,
129
right: 8,
1310
bottom: 4,
1411
left: 8,
1512
};
1613

17-
/** Convert our TColor into a CSS color string */
1814
function toCssColor(color: string | ['rgb' | 'hsl', number, number, number]) {
1915
if (typeof color === 'string') return color;
2016
const [mode, a, b, c] = color;
2117
return mode === 'rgb' ? `rgb(${a},${b},${c})` : `hsl(${a},${b}%,${c}%)`;
2218
}
2319

24-
/**
25-
* Measure a single-line label’s true pixel width, ascent & descent,
26-
* then return total height = ascent + descent, plus an 8px horizontal buffer.
27-
*/
2820
function measureLabel(label: string, fontSize: number) {
2921
const canvas = document.createElement('canvas');
3022
const ctx = canvas.getContext('2d')!;
@@ -36,7 +28,7 @@ function measureLabel(label: string, fontSize: number) {
3628
const height = ascent + descent;
3729

3830
return {
39-
w: m.width + 8, // horizontal buffer
31+
w: m.width + 8,
4032
h: height,
4133
ascent,
4234
descent,
@@ -64,14 +56,10 @@ export const CompoundBrickView: React.FC<TBrickRenderPropsCompound> = (props) =>
6456
isFolded,
6557
} = props;
6658

67-
// ─── Hooks & measurements run before any early return ───────────────────────
68-
69-
// 1️⃣ Measure the label
7059
const { w: labelW, h: labelH, ascent } = measureLabel(label, FONT_HEIGHT);
7160
const bBoxLabel = { w: labelW, h: labelH };
7261
const bBoxNesting = bboxNest;
7362

74-
// 2️⃣ State for path + bounding-box
7563
const [shape, setShape] = useState<{ path: string; w: number; h: number }>(() => {
7664
const cfg = {
7765
type: 'type3' as const,
@@ -106,10 +94,8 @@ export const CompoundBrickView: React.FC<TBrickRenderPropsCompound> = (props) =>
10694
setShape({ path, w, h });
10795
}, [label, strokeWidth, scale, bboxArgs, topNotch, bottomNotch, bboxNest, isFolded]);
10896

109-
// ─── Now it’s safe to bail out if invisible ────────────────────────────────
11097
if (!isVisible) return null;
11198

112-
// ─── Compute SVG size including padding ────────────────────────────────────
11399
const svgWidth = shape.w + PADDING.left + PADDING.right;
114100
const svgHeight = shape.h + PADDING.top + PADDING.bottom;
115101

‎modules/masonry/src/brick/view/components/expression.tsx

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,22 @@
1-
// src/masonry/view/ExpressionBrickView.tsx
2-
31
import React, { useState, useEffect } from 'react';
42
import type { TBrickRenderPropsExpression } from '../../@types/brick';
53
import { generatePath, getBoundingBox } from '../../utils/path';
64

75
const FONT_HEIGHT = 16;
86

9-
// Breathing-room padding on each side
107
const PADDING = {
118
top: 4,
129
right: 8,
1310
bottom: 4,
1411
left: 8,
1512
};
1613

17-
/** Convert our TColor into a CSS color string */
1814
function toCssColor(color: string | ['rgb' | 'hsl', number, number, number]) {
1915
if (typeof color === 'string') return color;
2016
const [mode, a, b, c] = color;
2117
return mode === 'rgb' ? `rgb(${a},${b},${c})` : `hsl(${a},${b}%,${c}%)`;
2218
}
2319

24-
/**
25-
* Measure a single-line label’s true pixel width, ascent & descent,
26-
* then return total height = ascent + descent, plus an 8px horizontal buffer.
27-
*/
2820
function measureLabel(label: string, fontSize: number) {
2921
const canvas = document.createElement('canvas');
3022
const ctx = canvas.getContext('2d')!;
@@ -57,23 +49,18 @@ export const ExpressionBrickView: React.FC<TBrickRenderPropsExpression> = (props
5749
visualState,
5850
isActionMenuOpen,
5951
isVisible,
60-
// value, isValueSelectOpen, // if you need them later
52+
// value, isValueSelectOpen, // if needed later
6153
} = props;
6254

63-
// ─── Hooks & measurements must run before any early return ─────────────────
64-
65-
// 1️⃣ Measure the label
6655
const { w: labelW, h: labelH, ascent } = measureLabel(label, FONT_HEIGHT);
6756
const bBoxLabel = { w: labelW, h: labelH };
6857

69-
// 2️⃣ State to hold SVG path + bounding-box
7058
const [shape, setShape] = useState<{ path: string; w: number; h: number }>(() => {
7159
const cfg = {
7260
type: 'type2' as const,
7361
strokeWidth,
7462
scaleFactor: scale,
7563
bBoxLabel,
76-
// match the key expected by path.ts
7764
bBoxArgs: bboxArgs,
7865
};
7966
const { path } = generatePath(cfg);
@@ -94,10 +81,8 @@ export const ExpressionBrickView: React.FC<TBrickRenderPropsExpression> = (props
9481
setShape({ path, w, h });
9582
}, [label, strokeWidth, scale, bboxArgs]);
9683

97-
// ─── Now it’s safe to bail out if invisible ────────────────────────────────
9884
if (!isVisible) return null;
9985

100-
// ─── Compute SVG size including padding ────────────────────────────────────
10186
const svgWidth = shape.w + PADDING.left + PADDING.right;
10287
const svgHeight = shape.h + PADDING.top + PADDING.bottom;
10388

‎modules/masonry/src/brick/view/components/simple.tsx

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
1-
// src/masonry/view/SimpleBrickView.tsx
2-
31
import React, { useState, useEffect } from 'react';
42
import type { TBrickRenderPropsSimple } from '../../@types/brick';
53
import { generatePath, getBoundingBox } from '../../utils/path';
64

75
const FONT_HEIGHT = 16;
86

9-
// ←── Breath­ing-room padding ──────────────────────────────────
107
const PADDING = {
11-
top: 4, // px above the brick
12-
right: 8, // px to the right of the brick
13-
bottom: 4, // px below the brick
14-
left: 8, // px to the left of the brick
8+
top: 4,
9+
right: 8,
10+
bottom: 4,
11+
left: 8,
1512
};
16-
// ────────────────────────────────────────────────────────────
1713

18-
/** Convert our TColor into CSS */
1914
function toCssColor(color: string | ['rgb' | 'hsl', number, number, number]) {
2015
if (typeof color === 'string') return color;
2116
const [mode, a, b, c] = color;
2217
return mode === 'rgb' ? `rgb(${a},${b},${c})` : `hsl(${a},${b}%,${c}%)`;
2318
}
2419

25-
/** Measure real text width + height + ascent/descent */
2620
function measureLabel(label: string, fontSize: number) {
2721
const canvas = document.createElement('canvas');
2822
const ctx = canvas.getContext('2d')!;
@@ -33,7 +27,7 @@ function measureLabel(label: string, fontSize: number) {
3327
const height = ascent + descent;
3428

3529
return {
36-
w: m.width + 8, // You can keep or remove this 8px buffer
30+
w: m.width + 8,
3731
h: height,
3832
ascent,
3933
descent,
@@ -59,13 +53,9 @@ export const SimpleBrickView: React.FC<TBrickRenderPropsSimple> = (props) => {
5953
bottomNotch,
6054
} = props;
6155

62-
// ─── Hooks must run unconditionally ────────────────────────────────────────────
63-
64-
// label measurement (not a hook, so safe)
6556
const { w: labelW, h: labelH, ascent } = measureLabel(label, FONT_HEIGHT);
6657
const bBoxLabel = { w: labelW, h: labelH };
6758

68-
// your shape state
6959
const [shape, setShape] = useState<{ path: string; w: number; h: number }>(() => {
7060
const cfg = {
7161
type: 'type1' as const,
@@ -96,12 +86,8 @@ export const SimpleBrickView: React.FC<TBrickRenderPropsSimple> = (props) => {
9686
setShape({ path, w, h });
9787
}, [label, strokeWidth, scale, bboxArgs, topNotch, bottomNotch]);
9888

99-
// ─── Only now do we bail out if invisible ─────────────────────────────────────
100-
10189
if (!isVisible) return null;
10290

103-
// ─── and then the rest of your render ──────────────────────────────────────────
104-
10591
const svgWidth = shape.w + PADDING.left + PADDING.right;
10692
const svgHeight = shape.h + PADDING.top + PADDING.bottom;
10793

‎modules/masonry/src/brick/view/stories/expression.stories.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// src/masonry/view/ExpressionBrickView.stories.tsx
2-
31
import React from 'react';
42
import type { Meta, StoryObj, Decorator } from '@storybook/react';
53
import { ExpressionBrickView } from '../components/expression';
@@ -46,14 +44,14 @@ export const Default: Story = {
4644
args: {
4745
label: 'doSomething',
4846
labelType: 'text',
49-
colorBg: '#aad3df', // hex instead of HSL
50-
colorFg: '#000000', // hex instead of RGB tuple
51-
strokeColor: '#000000', // hex
47+
colorBg: '#aad3df',
48+
colorFg: '#000000',
49+
strokeColor: '#000000',
5250
strokeWidth: 1,
5351
scale: 1,
5452
shadow: true,
5553
tooltip: 'An expression brick',
56-
bboxArgs: [], // no argument slots
54+
bboxArgs: [],
5755
isActionMenuOpen: false,
5856
isVisible: true,
5957
value: '',

‎modules/masonry/src/brick/view/stories/simple.stories.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// src/masonry/view/SimpleBrickView.stories.tsx
2-
31
import React from 'react';
42
import type { Meta, StoryFn } from '@storybook/react';
53
import { SimpleBrickView } from '../components/simple';
@@ -46,9 +44,9 @@ export const Default = Template.bind({});
4644
Default.args = {
4745
label: 'doSomething',
4846
labelType: 'text',
49-
colorBg: '#aad3df', // hex instead of HSL tuple
50-
colorFg: '#000000', // hex instead of RGB tuple
51-
strokeColor: '#000000', // hex
47+
colorBg: '#aad3df',
48+
colorFg: '#000000',
49+
strokeColor: '#000000',
5250
strokeWidth: 1,
5351
scale: 1,
5452
shadow: true,

0 commit comments

Comments
 (0)