dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-02 04:23:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(diagram): fixes for zoom

Browse Source
This commit is contained in:
Jan Prochazka
2022-01-20 18:32:43 +01:00
parent f1ba04cf6b
commit 9b666caf20
3 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/web/src/designer/Designer.svelte
View File

@@ -70,6 +70,7 @@
$: tables = value?.tables as any[]; $: tables = value?.tables as any[];
$: references = value?.references as any[]; $: references = value?.references as any[];
$: zoomKoef = settings?.customizeStyle && value?.style?.zoomKoef ? value?.style?.zoomKoef : 1;
$: isMultipleTableSelection = tables.filter(x => x.isSelectedTable).length >= 2; $: isMultipleTableSelection = tables.filter(x => x.isSelectedTable).length >= 2;
@@ -580,10 +581,10 @@
}; };
const handleMoveStart = (x, y) => { const handleMoveStart = (x, y) => {
dragStartPoint = { x, y }; dragStartPoint = { x: x / zoomKoef, y: y / zoomKoef };
}; };
const handleMove = (dx, dy, x, y) => { const handleMove = (dx, dy, x, y) => {
dragCurrentPoint = { x, y }; dragCurrentPoint = { x: x / zoomKoef, y: y / zoomKoef };
}; };
const handleMoveEnd = (x, y) => { const handleMoveEnd = (x, y) => {
if (dragStartPoint && dragCurrentPoint) { if (dragStartPoint && dragCurrentPoint) {
@@ -857,6 +858,7 @@
{table} {table}
{conid} {conid}
{database} {database}
{zoomKoef}
{isMultipleTableSelection} {isMultipleTableSelection}
onChangeTable={changeTable} onChangeTable={changeTable}
onBringToFront={bringToFront} onBringToFront={bringToFront}
@@ -872,21 +874,21 @@
{settings} {settings}
/> />
{/each} {/each}
</div>
{#if dragStartPoint && dragCurrentPoint} {#if dragStartPoint && dragCurrentPoint}
<svg class="drag-rect"> <svg class="drag-rect">
<polyline <polyline
points={` points={`
${dragStartPoint.x},${dragStartPoint.y} ${dragStartPoint.x},${dragStartPoint.y}
${dragStartPoint.x},${dragCurrentPoint.y} ${dragStartPoint.x},${dragCurrentPoint.y}
${dragCurrentPoint.x},${dragCurrentPoint.y} ${dragCurrentPoint.x},${dragCurrentPoint.y}
${dragCurrentPoint.x},${dragStartPoint.y} ${dragCurrentPoint.x},${dragStartPoint.y}
${dragStartPoint.x},${dragStartPoint.y} ${dragStartPoint.x},${dragStartPoint.y}
`} `}
/> />
</svg> </svg>
{/if} {/if}
</div>
</div> </div>
<style> <style>

5
packages/web/src/designer/DesignerTable.svelte
View File

@@ -17,6 +17,7 @@
export let conid; export let conid;
export let database; export let database;
export let table; export let table;
export let zoomKoef;
export let onChangeTable; export let onChangeTable;
export let onBringToFront; export let onBringToFront;
export let onSelectTable; export let onSelectTable;
@@ -74,8 +75,8 @@
} }
export function move(x, y) { export function move(x, y) {
movingPosition.left += x; movingPosition.left += x / zoomKoef;
movingPosition.top += y; movingPosition.top += y / zoomKoef;
} }
export function moveEnd() { export function moveEnd() {

12
packages/web/src/utility/moveDrag.ts
View File

@@ -11,10 +11,12 @@ export default function moveDrag(node, dragEvents) {
const handleMoveDown = e => { const handleMoveDown = e => {
if (e.button != 0) return; if (e.button != 0) return;
const zoomKoef = window.getComputedStyle(node)['zoom'];
const clientRect = node.getBoundingClientRect(); const clientRect = node.getBoundingClientRect();
clientX = clientRect.left; clientX = clientRect.left * zoomKoef;
clientY = clientRect.top; clientY = clientRect.top * zoomKoef;
startX = e.clientX; startX = e.clientX;
startY = e.clientY; startY = e.clientY;
document.addEventListener('mousemove', handleMoveMove, true); document.addEventListener('mousemove', handleMoveMove, true);
@@ -23,6 +25,8 @@ export default function moveDrag(node, dragEvents) {
}; };
const handleMoveMove = e => { const handleMoveMove = e => {
const zoomKoef = window.getComputedStyle(node)['zoom'];
e.preventDefault(); e.preventDefault();
const diffX = e.clientX - startX; const diffX = e.clientX - startX;
startX = e.clientX; startX = e.clientX;
@@ -32,6 +36,8 @@ export default function moveDrag(node, dragEvents) {
onMove(diffX, diffY, e.clientX - clientX, e.clientY - clientY); onMove(diffX, diffY, e.clientX - clientX, e.clientY - clientY);
}; };
const handleMoveEnd = e => { const handleMoveEnd = e => {
const zoomKoef = window.getComputedStyle(node)['zoom'];
e.preventDefault(); e.preventDefault();
startX = null; startX = null;
startY = null; startY = null;