mirror/pdfme
1
0
Fork 0
mirror of https://github.com/pdfme/pdfme.git synced 2026-06-16 02:09:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix centering of canvas with respect to left sidebar (#627)

Browse Source 
* 618 Fix centering of canvas with respect to left sidebar

* f
This commit is contained in:
Peter Ward
2024-11-12 23:58:16 +00:00
committed by GitHub
parent 7985367560
commit bc728708e7
4 changed files with 575 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1016
packages/ui/__tests__/components/__snapshots__/Designer.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

4
packages/ui/src/components/Designer/LeftSidebar.tsx
View File

@@ -8,9 +8,11 @@ import { theme, Button } from 'antd';
import { useDraggable } from '@dnd-kit/core';
import { CSS } from "@dnd-kit/utilities";
import Renderer from '../Renderer';
import { LEFT_SIDEBAR_WIDTH } from '../../constants';
import { PluginsRegistry } from '../../contexts';
import PluginIcon from "./PluginIcon";
const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
const { scale, basePdf, plugin } = props;
const { token } = theme.useToken();
@@ -67,7 +69,7 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
position: 'absolute',
zIndex: 1,
height,
width: 45,
width: LEFT_SIDEBAR_WIDTH,
background: token.colorBgLayout,
textAlign: 'center',
overflow: isDragging ? 'visible' : 'auto',

116
packages/ui/src/components/Designer/index.tsx
View File

@@ -15,7 +15,7 @@ import { DndContext } from '@dnd-kit/core';
import RightSidebar from './RightSidebar/index';
import LeftSidebar from './LeftSidebar';
import Canvas from './Canvas/index';
import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../constants';
import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants';
import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
import {
schemasList2template,
@@ -235,8 +235,9 @@ const TemplateEditor = ({
void updateTemplate(template);
}
const sizeExcSidebar = {
width: sidebarOpen ? size.width - RIGHT_SIDEBAR_WIDTH : size.width,
const canvasWidth = size.width - LEFT_SIDEBAR_WIDTH;
const sizeExcSidebars = {
width: sidebarOpen ? canvasWidth - RIGHT_SIDEBAR_WIDTH : canvasWidth,
height: size.height,
};
@@ -271,66 +272,69 @@ const TemplateEditor = ({
}}
onDragStart={onEditEnd}
>
<CtlBar
size={sizeExcSidebar}
pageCursor={pageCursor}
pageNum={schemasList.length}
setPageCursor={(p) => {
if (!canvasRef.current) return;
canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
setPageCursor(p);
onEditEnd();
}}
zoomLevel={zoomLevel}
setZoomLevel={setZoomLevel}
{...pageManipulation}
/>
<LeftSidebar
height={canvasRef.current ? canvasRef.current.clientHeight : 0}
scale={scale}
basePdf={template.basePdf}
/>
<RightSidebar
hoveringSchemaId={hoveringSchemaId}
onChangeHoveringSchemaId={onChangeHoveringSchemaId}
height={canvasRef.current ? canvasRef.current.clientHeight : 0}
size={size}
pageSize={pageSizes[pageCursor] ?? []}
activeElements={activeElements}
schemasList={schemasList}
schemas={schemasList[pageCursor] ?? []}
changeSchemas={changeSchemas}
onSortEnd={onSortEnd}
onEdit={id => {
const editingElem = document.getElementById(id);
editingElem && onEdit([editingElem]);
}}
onEditEnd={onEditEnd}
deselectSchema={onEditEnd}
sidebarOpen={sidebarOpen}
setSidebarOpen={setSidebarOpen}
/>
<div style={{ position: 'absolute', width: canvasWidth, marginLeft: LEFT_SIDEBAR_WIDTH }}>
<CtlBar
size={sizeExcSidebars}
pageCursor={pageCursor}
pageNum={schemasList.length}
setPageCursor={(p) => {
if (!canvasRef.current) return;
canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
setPageCursor(p);
onEditEnd();
}}
zoomLevel={zoomLevel}
setZoomLevel={setZoomLevel}
{...pageManipulation}
/>
<Canvas
ref={canvasRef}
paperRefs={paperRefs}
basePdf={template.basePdf}
hoveringSchemaId={hoveringSchemaId}
onChangeHoveringSchemaId={onChangeHoveringSchemaId}
height={size.height - RULER_HEIGHT * ZOOM}
pageCursor={pageCursor}
scale={scale}
size={sizeExcSidebar}
pageSizes={pageSizes}
backgrounds={backgrounds}
activeElements={activeElements}
schemasList={schemasList}
changeSchemas={changeSchemas}
removeSchemas={removeSchemas}
sidebarOpen={sidebarOpen}
onEdit={onEdit}
/>
<RightSidebar
hoveringSchemaId={hoveringSchemaId}
onChangeHoveringSchemaId={onChangeHoveringSchemaId}
height={canvasRef.current ? canvasRef.current.clientHeight : 0}
size={size}
pageSize={pageSizes[pageCursor] ?? []}
activeElements={activeElements}
schemasList={schemasList}
schemas={schemasList[pageCursor] ?? []}
changeSchemas={changeSchemas}
onSortEnd={onSortEnd}
onEdit={id => {
const editingElem = document.getElementById(id);
editingElem && onEdit([editingElem]);
}}
onEditEnd={onEditEnd}
deselectSchema={onEditEnd}
sidebarOpen={sidebarOpen}
setSidebarOpen={setSidebarOpen}
/>
<Canvas
ref={canvasRef}
paperRefs={paperRefs}
basePdf={template.basePdf}
hoveringSchemaId={hoveringSchemaId}
onChangeHoveringSchemaId={onChangeHoveringSchemaId}
height={size.height - RULER_HEIGHT * ZOOM}
pageCursor={pageCursor}
scale={scale}
size={sizeExcSidebars}
pageSizes={pageSizes}
backgrounds={backgrounds}
activeElements={activeElements}
schemasList={schemasList}
changeSchemas={changeSchemas}
removeSchemas={removeSchemas}
sidebarOpen={sidebarOpen}
onEdit={onEdit}
/>
</div>
</DndContext>
</Root>
);

2
packages/ui/src/constants.ts
View File

@@ -8,6 +8,8 @@ export const RULER_HEIGHT = 30;
export const PAGE_GAP = 10;
export const LEFT_SIDEBAR_WIDTH = 45;
export const RIGHT_SIDEBAR_WIDTH = 400;
export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';