previewer
This commit is contained in:
hamid zarghami
@@ -0,0 +1,78 @@
|
||||
import { type FC, useMemo } from 'react'
|
||||
import BookPage from '@/pages/viewer/components/BookPage'
|
||||
import { transformViewerDataToPages } from '@/pages/viewer/utils/dataTransformer'
|
||||
import type { CatalogItemType } from '../types/Types'
|
||||
import type { PageData } from '@/pages/viewer/types'
|
||||
|
||||
const PREVIEW_WIDTH = 64
|
||||
const PREVIEW_HEIGHT = 89
|
||||
const PAGE_BASE_WIDTH = 794
|
||||
const PAGE_BASE_HEIGHT = 1123
|
||||
|
||||
const PREVIEW_SCALE = Math.min(
|
||||
PREVIEW_WIDTH / PAGE_BASE_WIDTH,
|
||||
PREVIEW_HEIGHT / PAGE_BASE_HEIGHT
|
||||
)
|
||||
|
||||
function getFirstPageFromContent(content: string | undefined): PageData | null {
|
||||
if (!content) return null
|
||||
try {
|
||||
const parsed = JSON.parse(content)
|
||||
const pagesArray = Array.isArray(parsed) ? parsed : (parsed?.pages ?? [])
|
||||
const transformed = transformViewerDataToPages({ pages: pagesArray })
|
||||
return transformed[0] ?? null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
type Props = {
|
||||
item: CatalogItemType
|
||||
}
|
||||
|
||||
const CatalogPreview: FC<Props> = ({ item }) => {
|
||||
const firstPage = useMemo(
|
||||
() => getFirstPageFromContent(item.content),
|
||||
[item.content]
|
||||
)
|
||||
|
||||
if (!firstPage) {
|
||||
return (
|
||||
<div
|
||||
className='bg-gray-200 rounded-lg flex items-center justify-center shrink-0'
|
||||
style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
|
||||
>
|
||||
<span className='text-[10px] text-gray-400'>بدون پیشنمایش</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className='rounded-lg overflow-hidden shrink-0 bg-white border border-gray-200 relative'
|
||||
style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
|
||||
dir='rtl'
|
||||
>
|
||||
<div
|
||||
className='absolute'
|
||||
style={{
|
||||
top: 0,
|
||||
right: 0,
|
||||
transform: `scale(${PREVIEW_SCALE})`,
|
||||
transformOrigin: 'top right',
|
||||
width: PAGE_BASE_WIDTH,
|
||||
height: PAGE_BASE_HEIGHT,
|
||||
}}
|
||||
>
|
||||
<BookPage
|
||||
page={firstPage}
|
||||
scale={1}
|
||||
pageWidth={PAGE_BASE_WIDTH}
|
||||
pageHeight={PAGE_BASE_HEIGHT}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CatalogPreview
|
||||
@@ -4,6 +4,7 @@ import type { CatalogItemType } from '../types/Types'
|
||||
import moment from 'moment-jalaali'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Paths } from '@/config/Paths'
|
||||
import CatalogPreview from './CatalogPreview'
|
||||
|
||||
type Props = {
|
||||
item: CatalogItemType
|
||||
@@ -13,7 +14,7 @@ const CatalogueItem: FC<Props> = ({ item }) => {
|
||||
return (
|
||||
<div className='bg-white p-6 rounded-3xl w-full'>
|
||||
<div className='flex gap-4 items-center'>
|
||||
<div className='w-[64px] h-[89px] bg-gray-200'></div>
|
||||
<CatalogPreview item={item} />
|
||||
<div>
|
||||
<h6>
|
||||
{item.name}
|
||||
@@ -23,7 +24,7 @@ const CatalogueItem: FC<Props> = ({ item }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-end gap-1 items-center'>
|
||||
<div className='flex justify-end gap-1 items-center mt-1'>
|
||||
<Link to={Paths.viewer + `/${item.id}`}>
|
||||
<div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
|
||||
<Eye size={18} color='#0047FF' />
|
||||
|
||||
@@ -19,151 +19,104 @@ type BookPageProps = {
|
||||
*/
|
||||
const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
|
||||
({ page, scale = 1, pageWidth, pageHeight, onLinkClick }, ref) => {
|
||||
// تابع برای تبدیل opacity به رنگ (مثل editor)
|
||||
// در editor، getColorWithOpacity انتظار opacity 0-100 دارد
|
||||
// در dataTransformer، opacity از 0-1 به 0-100 تبدیل شده است
|
||||
// پس opacity را مستقیماً استفاده میکنیم
|
||||
const getColorWithOpacity = (fill?: string, opacity?: number): string => {
|
||||
if (!fill) return '#000000';
|
||||
// تابع برای تبدیل opacity به رنگ (مثل editor)
|
||||
// در editor، getColorWithOpacity انتظار opacity 0-100 دارد
|
||||
// در dataTransformer، opacity از 0-1 به 0-100 تبدیل شده است
|
||||
// پس opacity را مستقیماً استفاده میکنیم
|
||||
const getColorWithOpacity = (fill?: string, opacity?: number): string => {
|
||||
if (!fill) return '#000000';
|
||||
|
||||
// opacity در EditorObject به صورت 0-100 است (بعد از تبدیل در dataTransformer)
|
||||
// در editor getColorWithOpacity انتظار 0-100 دارد
|
||||
const opacityValue = opacity !== undefined ? opacity : 100;
|
||||
// opacity در EditorObject به صورت 0-100 است (بعد از تبدیل در dataTransformer)
|
||||
// در editor getColorWithOpacity انتظار 0-100 دارد
|
||||
const opacityValue = opacity !== undefined ? opacity : 100;
|
||||
|
||||
// اگر opacity 100% باشد، رنگ را بدون تغییر برگردان (مثل editor)
|
||||
if (opacityValue >= 100) return fill;
|
||||
// اگر opacity 100% باشد، رنگ را بدون تغییر برگردان (مثل editor)
|
||||
if (opacityValue >= 100) return fill;
|
||||
|
||||
const hex = fill.replace('#', '');
|
||||
// اگر hex کوتاهتر از 6 کاراکتر باشد، padding اضافه کن
|
||||
const paddedHex = hex.length === 3
|
||||
? hex.split('').map(char => char + char).join('')
|
||||
: hex;
|
||||
const hex = fill.replace('#', '');
|
||||
// اگر hex کوتاهتر از 6 کاراکتر باشد، padding اضافه کن
|
||||
const paddedHex = hex.length === 3
|
||||
? hex.split('').map(char => char + char).join('')
|
||||
: hex;
|
||||
|
||||
const r = parseInt(paddedHex.substring(0, 2), 16);
|
||||
const g = parseInt(paddedHex.substring(2, 4), 16);
|
||||
const b = parseInt(paddedHex.substring(4, 6), 16);
|
||||
// opacityValue را به alpha تبدیل کن (0-100 -> 0-1) مثل editor
|
||||
const alpha = opacityValue / 100;
|
||||
const r = parseInt(paddedHex.substring(0, 2), 16);
|
||||
const g = parseInt(paddedHex.substring(2, 4), 16);
|
||||
const b = parseInt(paddedHex.substring(4, 6), 16);
|
||||
// opacityValue را به alpha تبدیل کن (0-100 -> 0-1) مثل editor
|
||||
const alpha = opacityValue / 100;
|
||||
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||
};
|
||||
|
||||
const renderObject = (obj: EditorObject, index: number) => {
|
||||
const baseStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
left: `${(obj.x || 0) * scale}px`,
|
||||
top: `${(obj.y || 0) * scale}px`,
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||
};
|
||||
|
||||
if (obj.visible === false) {
|
||||
return null;
|
||||
}
|
||||
const renderObject = (obj: EditorObject, index: number) => {
|
||||
const baseStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
left: `${(obj.x || 0) * scale}px`,
|
||||
top: `${(obj.y || 0) * scale}px`,
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
};
|
||||
|
||||
switch (obj.type) {
|
||||
case 'text': {
|
||||
// برای text، opacity در رنگ اعمال میشود، پس باید opacity را از baseStyle حذف کنیم
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { opacity, ...textBaseStyle } = baseStyle;
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
...textBaseStyle,
|
||||
fontSize: `${(obj.fontSize || 16) * scale}px`,
|
||||
fontFamily: obj.fontFamily || 'irancell, sans-serif',
|
||||
fontWeight: obj.fontWeight || 'normal',
|
||||
color: getColorWithOpacity(obj.fill, obj.opacity),
|
||||
whiteSpace: 'pre-wrap',
|
||||
letterSpacing: obj.letterSpacing ? `${obj.letterSpacing * scale}px` : undefined,
|
||||
}}
|
||||
>
|
||||
{obj.text || ''}
|
||||
</div>
|
||||
);
|
||||
if (obj.visible === false) {
|
||||
return null;
|
||||
}
|
||||
|
||||
case 'image':
|
||||
return (
|
||||
<img
|
||||
key={obj.id || index}
|
||||
src={obj.imageUrl || ''}
|
||||
alt=""
|
||||
style={{
|
||||
...baseStyle,
|
||||
width: obj.width ? `${obj.width * scale}px` : 'auto',
|
||||
height: obj.height ? `${obj.height * scale}px` : 'auto',
|
||||
objectFit: 'fill', // مشابه Konva که image را با width و height مشخص شده رندر میکند
|
||||
zIndex: index, // برای حفظ ترتیب رندر
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'video':
|
||||
return (
|
||||
<video
|
||||
key={obj.id || index}
|
||||
src={obj.videoUrl || ''}
|
||||
controls
|
||||
style={{
|
||||
...baseStyle,
|
||||
width: obj.width ? `${obj.width * scale}px` : 'auto',
|
||||
height: obj.height ? `${obj.height * scale}px` : 'auto',
|
||||
objectFit: 'contain',
|
||||
zIndex: index,
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'link': {
|
||||
const isInternalLink = obj.linkUrl?.startsWith('page://');
|
||||
const linkStyle = {
|
||||
...baseStyle,
|
||||
width: obj.width ? `${obj.width * scale}px` : 'auto',
|
||||
height: obj.height ? `${obj.height * scale}px` : 'auto',
|
||||
color: obj.fill || '#3b82f6',
|
||||
fontSize: `${(obj.fontSize || 16) * scale}px`,
|
||||
fontFamily: obj.fontFamily || 'irancell, sans-serif',
|
||||
textDecoration: 'underline',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'pre-wrap' as const,
|
||||
cursor: 'pointer',
|
||||
};
|
||||
|
||||
if (isInternalLink) {
|
||||
// لینک داخلی - از button با onClick استفاده میکنیم
|
||||
switch (obj.type) {
|
||||
case 'text': {
|
||||
// برای text، opacity در رنگ اعمال میشود، پس باید opacity را از baseStyle حذف کنیم
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { opacity, ...textBaseStyle } = baseStyle;
|
||||
return (
|
||||
<button
|
||||
<div
|
||||
key={obj.id || index}
|
||||
type="button"
|
||||
style={{
|
||||
...linkStyle,
|
||||
zIndex: 9999,
|
||||
...textBaseStyle,
|
||||
fontSize: `${(obj.fontSize || 16) * scale}px`,
|
||||
fontFamily: obj.fontFamily || 'irancell, sans-serif',
|
||||
fontWeight: obj.fontWeight || 'normal',
|
||||
color: getColorWithOpacity(obj.fill, obj.opacity),
|
||||
whiteSpace: 'pre-wrap',
|
||||
letterSpacing: obj.letterSpacing ? `${obj.letterSpacing * scale}px` : undefined,
|
||||
}}
|
||||
>
|
||||
{obj.text || ''}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case 'image':
|
||||
return (
|
||||
<img
|
||||
key={obj.id || index}
|
||||
src={obj.imageUrl || ''}
|
||||
alt=""
|
||||
style={{
|
||||
...baseStyle,
|
||||
width: obj.width ? `${obj.width * scale}px` : 'auto',
|
||||
height: obj.height ? `${obj.height * scale}px` : 'auto',
|
||||
objectFit: 'fill', // مشابه Konva که image را با width و height مشخص شده رندر میکند
|
||||
zIndex: index, // برای حفظ ترتیب رندر
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'video':
|
||||
return (
|
||||
<video
|
||||
key={obj.id || index}
|
||||
src={obj.videoUrl || ''}
|
||||
controls
|
||||
style={{
|
||||
...baseStyle,
|
||||
width: obj.width ? `${obj.width * scale}px` : 'auto',
|
||||
height: obj.height ? `${obj.height * scale}px` : 'auto',
|
||||
objectFit: 'contain',
|
||||
zIndex: index,
|
||||
pointerEvents: 'auto',
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (obj.linkUrl && onLinkClick) {
|
||||
onLinkClick(obj.linkUrl);
|
||||
}
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -171,323 +124,370 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{obj.text || obj.linkUrl || ''}
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
// لینک خارجی - از <a> با target="_blank" استفاده میکنیم
|
||||
return (
|
||||
<a
|
||||
key={obj.id || index}
|
||||
href={obj.linkUrl || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
...linkStyle,
|
||||
zIndex: 9999,
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{obj.text || obj.linkUrl || ''}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
case 'rectangle': {
|
||||
if (obj.shapeType === 'circle') {
|
||||
// در editor، circle با مرکز در x, y رندر میشود (radius = width/2)
|
||||
// در dataTransformer از گوشه بالا-چپ به مرکز تبدیل شده است
|
||||
const radius = ((obj.width || 100) / 2) * scale;
|
||||
const centerX = (obj.x || 0) * scale;
|
||||
const centerY = (obj.y || 0) * scale;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${centerX - radius}px`,
|
||||
top: `${centerY - radius}px`,
|
||||
width: `${radius * 2}px`,
|
||||
height: `${radius * 2}px`,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: obj.fill || 'transparent',
|
||||
border: obj.stroke
|
||||
? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
|
||||
: 'none',
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
zIndex: index, // برای حفظ ترتیب رندر
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'link': {
|
||||
const isInternalLink = obj.linkUrl?.startsWith('page://');
|
||||
const linkStyle = {
|
||||
...baseStyle,
|
||||
width: obj.width ? `${obj.width * scale}px` : 'auto',
|
||||
height: obj.height ? `${obj.height * scale}px` : 'auto',
|
||||
color: obj.fill || '#3b82f6',
|
||||
fontSize: `${(obj.fontSize || 16) * scale}px`,
|
||||
fontFamily: obj.fontFamily || 'irancell, sans-serif',
|
||||
textDecoration: 'underline',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'pre-wrap' as const,
|
||||
cursor: 'pointer',
|
||||
};
|
||||
|
||||
if (isInternalLink) {
|
||||
// لینک داخلی - از button با onClick استفاده میکنیم
|
||||
return (
|
||||
<button
|
||||
key={obj.id || index}
|
||||
type="button"
|
||||
style={{
|
||||
...linkStyle,
|
||||
zIndex: 9999,
|
||||
pointerEvents: 'auto',
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (obj.linkUrl && onLinkClick) {
|
||||
onLinkClick(obj.linkUrl);
|
||||
}
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{obj.text || obj.linkUrl || ''}
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
// لینک خارجی - از <a> با target="_blank" استفاده میکنیم
|
||||
return (
|
||||
<a
|
||||
key={obj.id || index}
|
||||
href={obj.linkUrl || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
...linkStyle,
|
||||
zIndex: 9999,
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{obj.text || obj.linkUrl || ''}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (obj.shapeType === 'triangle') {
|
||||
// در editor، triangle با مرکز در x + width/2, y + height/2 رندر میشود
|
||||
// RegularPolygon در Konva یک مثلث متساویالاضلاع است با radius از مرکز تا رأس
|
||||
// radius باید بر اساس ابعاد اصلی (قبل از scale) محاسبه شود
|
||||
const baseWidth = obj.width || 100;
|
||||
const baseHeight = obj.height || 100;
|
||||
const baseRadius = Math.min(baseWidth, baseHeight) / 2;
|
||||
const radius = baseRadius * scale;
|
||||
case 'rectangle': {
|
||||
if (obj.shapeType === 'circle') {
|
||||
// در editor، circle با مرکز در x, y رندر میشود (radius = width/2)
|
||||
// در dataTransformer از گوشه بالا-چپ به مرکز تبدیل شده است
|
||||
const radius = ((obj.width || 100) / 2) * scale;
|
||||
const centerX = (obj.x || 0) * scale;
|
||||
const centerY = (obj.y || 0) * scale;
|
||||
|
||||
// محاسبه مرکز مثلث (مثل editor)
|
||||
const centerX = ((obj.x || 0) + baseWidth / 2) * scale;
|
||||
const centerY = ((obj.y || 0) + baseHeight / 2) * scale;
|
||||
|
||||
// برای مثلث متساویالاضلاع، size = radius * 2
|
||||
const size = radius * 2;
|
||||
const halfSize = size / 2;
|
||||
|
||||
// نقاط مثلث متساویالاضلاع: رأس بالا (50%, 0%), پایین چپ (0%, 100%), پایین راست (100%, 100%)
|
||||
// اما برای مثلث متساویالاضلاع واقعی، باید ارتفاع را محاسبه کنیم
|
||||
// ارتفاع مثلث متساویالاضلاع = size * sqrt(3) / 2 ≈ size * 0.866
|
||||
const triangleHeight = size * 0.8660254; // sqrt(3) / 2
|
||||
const topY = (size - triangleHeight) / 2;
|
||||
const bottomY = size - topY;
|
||||
const halfWidth = triangleHeight * 0.5773503; // tan(30°) = 1/sqrt(3)
|
||||
|
||||
const topX = halfSize;
|
||||
const bottomLeftX = halfSize - halfWidth;
|
||||
const bottomRightX = halfSize + halfWidth;
|
||||
|
||||
const strokeWidth = obj.stroke ? (obj.strokeWidth || 1) * scale : 0;
|
||||
const fillColor = obj.fill || '#000000';
|
||||
const strokeColor = obj.stroke || 'transparent';
|
||||
|
||||
return (
|
||||
<svg
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${centerX - radius}px`,
|
||||
top: `${centerY - radius}px`,
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
zIndex: index,
|
||||
overflow: 'visible',
|
||||
}}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
>
|
||||
<polygon
|
||||
points={`${topX},${topY} ${bottomLeftX},${bottomY} ${bottomRightX},${bottomY}`}
|
||||
fill={fillColor}
|
||||
stroke={strokeColor}
|
||||
strokeWidth={strokeWidth}
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${centerX - radius}px`,
|
||||
top: `${centerY - radius}px`,
|
||||
width: `${radius * 2}px`,
|
||||
height: `${radius * 2}px`,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: obj.fill || 'transparent',
|
||||
border: obj.stroke
|
||||
? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
|
||||
: 'none',
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
zIndex: index, // برای حفظ ترتیب رندر
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
if (obj.shapeType === 'triangle') {
|
||||
// در editor، triangle با مرکز در x + width/2, y + height/2 رندر میشود
|
||||
// RegularPolygon در Konva یک مثلث متساویالاضلاع است با radius از مرکز تا رأس
|
||||
// radius باید بر اساس ابعاد اصلی (قبل از scale) محاسبه شود
|
||||
const baseWidth = obj.width || 100;
|
||||
const baseHeight = obj.height || 100;
|
||||
const baseRadius = Math.min(baseWidth, baseHeight) / 2;
|
||||
const radius = baseRadius * scale;
|
||||
|
||||
// محاسبه مرکز مثلث (مثل editor)
|
||||
const centerX = ((obj.x || 0) + baseWidth / 2) * scale;
|
||||
const centerY = ((obj.y || 0) + baseHeight / 2) * scale;
|
||||
|
||||
// برای مثلث متساویالاضلاع، size = radius * 2
|
||||
const size = radius * 2;
|
||||
const halfSize = size / 2;
|
||||
|
||||
// نقاط مثلث متساویالاضلاع: رأس بالا (50%, 0%), پایین چپ (0%, 100%), پایین راست (100%, 100%)
|
||||
// اما برای مثلث متساویالاضلاع واقعی، باید ارتفاع را محاسبه کنیم
|
||||
// ارتفاع مثلث متساویالاضلاع = size * sqrt(3) / 2 ≈ size * 0.866
|
||||
const triangleHeight = size * 0.8660254; // sqrt(3) / 2
|
||||
const topY = (size - triangleHeight) / 2;
|
||||
const bottomY = size - topY;
|
||||
const halfWidth = triangleHeight * 0.5773503; // tan(30°) = 1/sqrt(3)
|
||||
|
||||
const topX = halfSize;
|
||||
const bottomLeftX = halfSize - halfWidth;
|
||||
const bottomRightX = halfSize + halfWidth;
|
||||
|
||||
const strokeWidth = obj.stroke ? (obj.strokeWidth || 1) * scale : 0;
|
||||
const fillColor = obj.fill || '#000000';
|
||||
const strokeColor = obj.stroke || 'transparent';
|
||||
|
||||
return (
|
||||
<svg
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${centerX - radius}px`,
|
||||
top: `${centerY - radius}px`,
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
zIndex: index,
|
||||
overflow: 'visible',
|
||||
}}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
>
|
||||
<polygon
|
||||
points={`${topX},${topY} ${bottomLeftX},${bottomY} ${bottomRightX},${bottomY}`}
|
||||
fill={fillColor}
|
||||
stroke={strokeColor}
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
if (obj.shapeType === 'abstract') {
|
||||
// در editor، abstract (star) با مرکز در x + width/2, y + height/2 رندر میشود
|
||||
const width = (obj.width || 100) * scale;
|
||||
const height = (obj.height || 100) * scale;
|
||||
const baseRadius = Math.min(width, height) / 2;
|
||||
const abstractScale = 0.85;
|
||||
const radius = baseRadius * abstractScale;
|
||||
const centerX = (obj.x || 0) * scale + width / 2;
|
||||
const centerY = (obj.y || 0) * scale + height / 2;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${centerX - radius}px`,
|
||||
top: `${centerY - radius}px`,
|
||||
width: `${radius * 2}px`,
|
||||
height: `${radius * 2}px`,
|
||||
clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
|
||||
backgroundColor: obj.fill || 'transparent',
|
||||
border: obj.stroke
|
||||
? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
|
||||
: 'none',
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Rectangle عادی
|
||||
const shapeStyle: React.CSSProperties = {
|
||||
...baseStyle,
|
||||
width: `${(obj.width || 100) * scale}px`,
|
||||
height: `${(obj.height || 100) * scale}px`,
|
||||
backgroundColor: obj.fill || 'transparent',
|
||||
border: obj.stroke
|
||||
? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
|
||||
: 'none',
|
||||
zIndex: index, // برای حفظ ترتیب رندر
|
||||
};
|
||||
|
||||
return <div key={obj.id || index} style={shapeStyle} />;
|
||||
}
|
||||
|
||||
if (obj.shapeType === 'abstract') {
|
||||
// در editor، abstract (star) با مرکز در x + width/2, y + height/2 رندر میشود
|
||||
const width = (obj.width || 100) * scale;
|
||||
const height = (obj.height || 100) * scale;
|
||||
const baseRadius = Math.min(width, height) / 2;
|
||||
const abstractScale = 0.85;
|
||||
const radius = baseRadius * abstractScale;
|
||||
const centerX = (obj.x || 0) * scale + width / 2;
|
||||
const centerY = (obj.y || 0) * scale + height / 2;
|
||||
case 'line': {
|
||||
// در EditorObject، width و height به عنوان مختصات انتهایی استفاده میشوند
|
||||
// در Konva Line، points به صورت [0, 0, endX - startX, endY - startY] است
|
||||
const startX = (obj.x || 0) * scale;
|
||||
const startY = (obj.y || 0) * scale;
|
||||
// width و height مستقیماً مختصات نقطه پایان هستند
|
||||
const endX = (obj.width ?? obj.x ?? 0) * scale;
|
||||
const endY = (obj.height ?? obj.y ?? 0) * scale;
|
||||
const dx = endX - startX;
|
||||
const dy = endY - startY;
|
||||
const lineLength = Math.sqrt(dx * dx + dy * dy);
|
||||
const lineAngle = Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${centerX - radius}px`,
|
||||
top: `${centerY - radius}px`,
|
||||
width: `${radius * 2}px`,
|
||||
height: `${radius * 2}px`,
|
||||
clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
|
||||
backgroundColor: obj.fill || 'transparent',
|
||||
border: obj.stroke
|
||||
? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
|
||||
: 'none',
|
||||
left: `${startX}px`,
|
||||
top: `${startY}px`,
|
||||
width: `${lineLength}px`,
|
||||
height: `${(obj.strokeWidth || 2) * scale}px`,
|
||||
backgroundColor: obj.stroke || '#000000',
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
transform: `rotate(${lineAngle}deg)`,
|
||||
transformOrigin: 'left center',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Rectangle عادی
|
||||
const shapeStyle: React.CSSProperties = {
|
||||
...baseStyle,
|
||||
width: `${(obj.width || 100) * scale}px`,
|
||||
height: `${(obj.height || 100) * scale}px`,
|
||||
backgroundColor: obj.fill || 'transparent',
|
||||
border: obj.stroke
|
||||
? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
|
||||
: 'none',
|
||||
zIndex: index, // برای حفظ ترتیب رندر
|
||||
};
|
||||
case 'arrow': {
|
||||
// در EditorObject، width و height به عنوان مختصات انتهایی استفاده میشوند
|
||||
// در Konva Arrow، points به صورت [0, 0, endX - startX, endY - startY] است
|
||||
const startX = (obj.x || 0) * scale;
|
||||
const startY = (obj.y || 0) * scale;
|
||||
// width و height مستقیماً مختصات نقطه پایان هستند
|
||||
const endX = (obj.width ?? obj.x ?? 0) * scale;
|
||||
const endY = (obj.height ?? obj.y ?? 0) * scale;
|
||||
const dx = endX - startX;
|
||||
const dy = endY - startY;
|
||||
const arrowLength = Math.sqrt(dx * dx + dy * dy);
|
||||
const arrowAngle = Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
const strokeWidth = (obj.strokeWidth || 4) * scale;
|
||||
|
||||
return <div key={obj.id || index} style={shapeStyle} />;
|
||||
}
|
||||
|
||||
case 'line': {
|
||||
// در EditorObject، width و height به عنوان مختصات انتهایی استفاده میشوند
|
||||
// در Konva Line، points به صورت [0, 0, endX - startX, endY - startY] است
|
||||
const startX = (obj.x || 0) * scale;
|
||||
const startY = (obj.y || 0) * scale;
|
||||
// width و height مستقیماً مختصات نقطه پایان هستند
|
||||
const endX = (obj.width ?? obj.x ?? 0) * scale;
|
||||
const endY = (obj.height ?? obj.y ?? 0) * scale;
|
||||
const dx = endX - startX;
|
||||
const dy = endY - startY;
|
||||
const lineLength = Math.sqrt(dx * dx + dy * dy);
|
||||
const lineAngle = Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${startX}px`,
|
||||
top: `${startY}px`,
|
||||
width: `${lineLength}px`,
|
||||
height: `${(obj.strokeWidth || 2) * scale}px`,
|
||||
backgroundColor: obj.stroke || '#000000',
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: `rotate(${lineAngle}deg)`,
|
||||
transformOrigin: 'left center',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
case 'arrow': {
|
||||
// در EditorObject، width و height به عنوان مختصات انتهایی استفاده میشوند
|
||||
// در Konva Arrow، points به صورت [0, 0, endX - startX, endY - startY] است
|
||||
const startX = (obj.x || 0) * scale;
|
||||
const startY = (obj.y || 0) * scale;
|
||||
// width و height مستقیماً مختصات نقطه پایان هستند
|
||||
const endX = (obj.width ?? obj.x ?? 0) * scale;
|
||||
const endY = (obj.height ?? obj.y ?? 0) * scale;
|
||||
const dx = endX - startX;
|
||||
const dy = endY - startY;
|
||||
const arrowLength = Math.sqrt(dx * dx + dy * dy);
|
||||
const arrowAngle = Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
const strokeWidth = (obj.strokeWidth || 4) * scale;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${startX}px`,
|
||||
top: `${startY}px`,
|
||||
width: `${arrowLength}px`,
|
||||
height: `${strokeWidth}px`,
|
||||
backgroundColor: obj.stroke || '#000000',
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: `rotate(${arrowAngle}deg)`,
|
||||
transformOrigin: 'left center',
|
||||
}}
|
||||
>
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: `-${strokeWidth * 2}px`,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderTop: `${strokeWidth * 2}px solid transparent`,
|
||||
borderBottom: `${strokeWidth * 2}px solid transparent`,
|
||||
borderLeft: `${strokeWidth * 2}px solid ${obj.stroke || '#000000'}`,
|
||||
left: `${startX}px`,
|
||||
top: `${startY}px`,
|
||||
width: `${arrowLength}px`,
|
||||
height: `${strokeWidth}px`,
|
||||
backgroundColor: obj.stroke || '#000000',
|
||||
opacity: obj.opacity ?? 1,
|
||||
transform: `rotate(${arrowAngle}deg)`,
|
||||
transformOrigin: 'left center',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: `-${strokeWidth * 2}px`,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderTop: `${strokeWidth * 2}px solid transparent`,
|
||||
borderBottom: `${strokeWidth * 2}px solid transparent`,
|
||||
borderLeft: `${strokeWidth * 2}px solid ${obj.stroke || '#000000'}`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case 'grid': {
|
||||
if (!obj.tableData) return null;
|
||||
|
||||
const { rows, cols, cells, cellWidth, cellHeight, stroke, strokeWidth } =
|
||||
obj.tableData;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
...baseStyle,
|
||||
display: 'grid',
|
||||
gridTemplateRows: `repeat(${rows}, ${cellHeight * scale}px)`,
|
||||
gridTemplateColumns: `repeat(${cols}, ${cellWidth * scale}px)`,
|
||||
border: stroke ? `${(strokeWidth || 1) * scale}px solid ${stroke}` : 'none',
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: rows }).map((_, rowIndex) =>
|
||||
Array.from({ length: cols }).map((_, colIndex) => {
|
||||
const cellId = `cell-${rowIndex}-${colIndex}`;
|
||||
const cell = cells[cellId];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cellId}
|
||||
style={{
|
||||
border: stroke ? `${(strokeWidth || 1) * scale}px solid ${stroke}` : `${1 * scale}px solid #ccc`,
|
||||
backgroundColor: cell?.background || '#ffffff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: `${4 * scale}px`,
|
||||
fontSize: `${14 * scale}px`,
|
||||
}}
|
||||
>
|
||||
{cell?.text || ''}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
case 'grid': {
|
||||
if (!obj.tableData) return null;
|
||||
const width = pageWidth ?? 794 * scale;
|
||||
const height = pageHeight ?? 1123 * scale;
|
||||
|
||||
const { rows, cols, cells, cellWidth, cellHeight, stroke, strokeWidth } =
|
||||
obj.tableData;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id || index}
|
||||
style={{
|
||||
...baseStyle,
|
||||
display: 'grid',
|
||||
gridTemplateRows: `repeat(${rows}, ${cellHeight * scale}px)`,
|
||||
gridTemplateColumns: `repeat(${cols}, ${cellWidth * scale}px)`,
|
||||
border: stroke ? `${(strokeWidth || 1) * scale}px solid ${stroke}` : 'none',
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: rows }).map((_, rowIndex) =>
|
||||
Array.from({ length: cols }).map((_, colIndex) => {
|
||||
const cellId = `cell-${rowIndex}-${colIndex}`;
|
||||
const cell = cells[cellId];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cellId}
|
||||
style={{
|
||||
border: stroke ? `${(strokeWidth || 1) * scale}px solid ${stroke}` : `${1 * scale}px solid #ccc`,
|
||||
backgroundColor: cell?.background || '#ffffff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: `${4 * scale}px`,
|
||||
fontSize: `${14 * scale}px`,
|
||||
}}
|
||||
>
|
||||
{cell?.text || ''}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const width = pageWidth ?? 794 * scale;
|
||||
const height = pageHeight ?? 1123 * scale;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="page"
|
||||
data-density="soft"
|
||||
style={{
|
||||
position: 'relative',
|
||||
backgroundColor: '#ffffff',
|
||||
overflow: 'hidden',
|
||||
boxSizing: 'border-box',
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
isolation: 'isolate',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{page.elements.map((element, index) => renderObject(element, index))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="page"
|
||||
data-density="soft"
|
||||
style={{
|
||||
position: 'relative',
|
||||
backgroundColor: '#ffffff',
|
||||
overflow: 'hidden',
|
||||
boxSizing: 'border-box',
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
isolation: 'isolate',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{page.elements.map((element, index) => renderObject(element, index))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
BookPage.displayName = 'BookPage';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user