0 ? 'flex' : 'none',
justifyContent: 'center',
zIndex: 20,
height: 72,
},
}}
>
);
};
================================================
FILE: src/features/design/components/layer-settings/index.ts
================================================
export * from './LayerSettings';
================================================
FILE: src/features/design/components/preview/PreviewModal.tsx
================================================
import XIcon from '@duyank/icons/regular/X';
import { Preview } from '@lidojs/design-editor';
import type { FC } from 'react';
interface PreviewModalProps {
onClose: () => void;
}
export const PreviewModal: FC onClose()}
>
{
penColorRef.current = '#0571d3';
penWidthRef.current = 5;
transparencyRef.current = 1;
}}
>
{
penColorRef.current = '#e7171f';
penWidthRef.current = 10;
transparencyRef.current = 1;
}}
>
{
penColorRef.current = '#fff234';
penWidthRef.current = 20;
transparencyRef.current = 0.8;
}}
>
Frames
{isLoading &&
Loading...
}
{frames.map((item, index) => (
addFrame(item)}
onDragStart={(e) => handleDrag(e, item)}
>
))}
Graphic
addGraphic(item)}
>
))}
Loading...
}
Widgets
{iframeList.map((item, index) => (
addIframe(item.elements[0])}
onDragStart={(e) => handleDrag(e, item.elements[0])}
>
))}
Images
Loading...
}
Photos by
Unsplash
QR Code
{qrCodeList.map((item, index) => (
addQrCode(item.elements[0])}
onDragStart={(e) => handleDrag(e, item.elements[0])}
>
))}
Shapes
Arrow
Business
{lines.map((l, idx) => (
addLine(l.props)}
onDragStart={(e) => handleDragLine(e, l)}
>
))}
{l.icon}
Shape
{shapes.map((shape) => (
addShape(shape)}
onDragStart={(e) => handleDrag(e, shape)}
>
{shape.icon}
))}
{tab === 'Template' && (
{
setTab(null);
actions.setSidebar();
}}
/>
)}
{tab === 'Text' &&
)}
Table
handleDrag(e)}
>
Templates
{isLoading &&
Loading...
}
{templates.map((item, index) => (
addPage(item.elements)}
>
))}
Text
handleAddText(addAHeading)}
onDragStart={(e) => handleDrag(e, addAHeading)}
>
Add a heading
handleAddText(addASubheading)}
onDragStart={(e) => handleDrag(e, addASubheading)}
>
Add a subheading
handleAddText(addABodyText)}
onDragStart={(e) => handleDrag(e, addABodyText)}
>
Add a little bit of body text
{isLoading &&
Loading...
}
{texts.map(({ img, elements }, idx) => (
handleAddText(elements)}
onDragStart={(e) => handleDrag(e, elements)}
>
})
))}
Upload Images
inputFileRef.current?.click()}
>
Upload
{images.map((item, idx) => (
item.type === 'image' ? addImage(item.url) : addSvg(item.url)
}
>
))}
Images
{isLoading &&
Loading...
}
{videos.map((item, idx) => (
addVideo(item)}
draggable={true}
onDragStart={(e) => handleDrag(e, item)}
>
))}
{activeIdx >= 0 && (
)}
{tabs.map((tab, idx) => (
onChange(e, tab.name)}
>
))}
{tab.icon}
{tab.name}
{tab.isBusiness && (
Business
)}
{children}
);
};
export const shapes: Shape[] = [
{
type: 'rectangle',
width: 64,
height: 64,
icon: (
{child}
,
);
validIndex++;
}
});
return { columns, childRefs };
},
[],
);
const distributeChildren = useCallback(() => {
const columnHeights = Array(columnsCount).fill(0);
const isReady = state.childRefs.every(
(ref) => ref.current?.getBoundingClientRect().height,
);
if (!isReady) return;
const columns: React.ReactNode[][] = Array.from(
{ length: columnsCount },
() => [],
);
let validIndex = 0;
React.Children.forEach(children, (child) => {
if (child && React.isValidElement(child)) {
const childHeight =
state.childRefs[validIndex].current?.getBoundingClientRect().height ||
0;
const minHeightColumnIndex = columnHeights.indexOf(
Math.min(...columnHeights),
);
columnHeights[minHeightColumnIndex] += childHeight;
columns[minHeightColumnIndex].push(child);
validIndex++;
}
});
setState((prev) => ({ ...prev, columns, hasDistributed: true }));
}, [children, columnsCount, state.childRefs]);
useEffect(() => {
// Check if children or columnsCount have changed by comparing current vs previous
const childrenChanged = prevChildrenRef.current !== children;
const columnsCountChanged = prevColumnsCountRef.current !== columnsCount;
if (childrenChanged || columnsCountChanged) {
const newState = getEqualCountColumns(children, columnsCount);
setState((prev) => ({
...prev,
...newState,
children,
hasDistributed: false,
}));
// Update refs to current values
prevChildrenRef.current = children;
prevColumnsCountRef.current = columnsCount;
}
}, [children, columnsCount, getEqualCountColumns]);
useEffect(() => {
if (!state.hasDistributed && !sequential) {
distributeChildren();
}
}, [state.hasDistributed, sequential, distributeChildren]);
const renderColumns = () => {
return state.columns.map((column, i) =>
React.createElement(
itemTag,
{
key: i,
style: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignContent: 'stretch',
flex: 1,
width: 0,
gap: gutter,
...itemStyle,
},
},
column.map((item) => item),
),
);
};
return React.createElement(
containerTag,
{
style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignContent: 'stretch',
boxSizing: 'border-box',
width: '100%',
gap: gutter,
...style,
},
className,
},
renderColumns(),
);
};
export default Masonry;
================================================
FILE: src/shared/components/masonry/index.ts
================================================
export * from './Masonry';
================================================
FILE: src/shared/icons/pencil/Highlighter.tsx
================================================
import type { ComponentProps, FC } from 'react';
export const Highlighter: FC