Skip to content

Commit 06efeb7

Browse files
aboseabose
committed
refactor: remove window object for storing temp state variables in live preview
1 parent ae3266c commit 06efeb7

File tree

1 file changed

+48
-44
lines changed

1 file changed

+48
-44
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@ function RemoteFunctions(config = {}) {
5656
CACHE_MAX_IMAGES: 50 // max number of images that we store in the localStorage
5757
};
5858

59+
const SHARED_STATE = {
60+
__description: "Use this to keep shared state for Live Preview Edit instead of window.*"
61+
};
62+
5963
let _localHighlight;
6064
let _hoverHighlight;
6165
let _clickHighlight;
@@ -1511,7 +1515,7 @@ function RemoteFunctions(config = {}) {
15111515
const [x, y] = point;
15121516
let target = document.elementFromPoint(x, y);
15131517

1514-
if (!target || target === window._currentDraggedElement) {
1518+
if (!target || target === SHARED_STATE._currentDraggedElement) {
15151519
continue;
15161520
}
15171521

@@ -1521,7 +1525,7 @@ function RemoteFunctions(config = {}) {
15211525
}
15221526

15231527
// Check if target is valid (not BODY, HTML or inside HEAD)
1524-
if (isElementEditable(target) && target !== window._currentDraggedElement) {
1528+
if (isElementEditable(target) && target !== SHARED_STATE._currentDraggedElement) {
15251529
return target;
15261530
}
15271531
}
@@ -1532,11 +1536,11 @@ function RemoteFunctions(config = {}) {
15321536
function onDragStart(event, element) {
15331537
event.stopPropagation();
15341538
event.dataTransfer.setData("text/plain", element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR));
1535-
window._dragStartX = event.clientX;
1536-
window._dragStartY = event.clientY;
1539+
SHARED_STATE._dragStartX = event.clientX;
1540+
SHARED_STATE._dragStartY = event.clientY;
15371541
_dragStartChores(element);
15381542
_clearDropMarkers();
1539-
window._currentDraggedElement = element;
1543+
SHARED_STATE._currentDraggedElement = element;
15401544
dismissUIAndCleanupState();
15411545
dismissImageRibbonGallery();
15421546
event.dataTransfer.effectAllowed = "move";
@@ -1548,9 +1552,9 @@ function RemoteFunctions(config = {}) {
15481552
_dragEndChores(element);
15491553
_clearDropMarkers();
15501554
_stopAutoScroll();
1551-
delete window._currentDraggedElement;
1552-
delete window._dragStartX;
1553-
delete window._dragStartY;
1555+
delete SHARED_STATE._currentDraggedElement;
1556+
delete SHARED_STATE._dragStartX;
1557+
delete SHARED_STATE._dragStartY;
15541558
}
15551559

15561560
/**
@@ -1560,15 +1564,15 @@ function RemoteFunctions(config = {}) {
15601564
*/
15611565
function onDragOver(event) {
15621566
// we set this on dragStart
1563-
if (!window._currentDraggedElement) {
1567+
if (!SHARED_STATE._currentDraggedElement) {
15641568
return;
15651569
}
15661570

15671571
event.preventDefault();
15681572

15691573
// get the element under the cursor
15701574
let target = document.elementFromPoint(event.clientX, event.clientY);
1571-
if (!target || target === window._currentDraggedElement) {
1575+
if (!target || target === SHARED_STATE._currentDraggedElement) {
15721576
return;
15731577
}
15741578

@@ -1577,7 +1581,7 @@ function RemoteFunctions(config = {}) {
15771581
target = target.parentElement;
15781582
}
15791583

1580-
if (!isElementEditable(target) || target === window._currentDraggedElement) {
1584+
if (!isElementEditable(target) || target === SHARED_STATE._currentDraggedElement) {
15811585
if (_isAutoScrolling) { return; }
15821586
// if direct detection fails, we try to find a nearby valid target
15831587
target = _findNearestValidTarget(event.clientX, event.clientY);
@@ -1592,7 +1596,7 @@ function RemoteFunctions(config = {}) {
15921596

15931597
// calc indicator type and drop zone for initial target
15941598
const indicatorType = _getIndicatorType(initialTarget);
1595-
const dropZone = _getDropZone(initialTarget, event.clientX, event.clientY, indicatorType, window._currentDraggedElement);
1599+
const dropZone = _getDropZone(initialTarget, event.clientX, event.clientY, indicatorType, SHARED_STATE._currentDraggedElement);
15961600

15971601
// get the list of all the valid candidates for section selection
15981602
const candidates = _getValidTargetCandidates(initialTarget, dropZone, indicatorType);
@@ -1632,7 +1636,7 @@ function RemoteFunctions(config = {}) {
16321636
* @param {Event} event - The drop event
16331637
*/
16341638
function onDrop(event) {
1635-
if (!window._currentDraggedElement) {
1639+
if (!SHARED_STATE._currentDraggedElement) {
16361640
return;
16371641
}
16381642

@@ -1643,19 +1647,19 @@ function RemoteFunctions(config = {}) {
16431647
// the drag to happen which was unexpected
16441648
const DRAG_THRESHOLD = 5;
16451649

1646-
if (window._dragStartX !== undefined && window._dragStartY !== undefined) {
1647-
const deltaX = Math.abs(event.clientX - window._dragStartX);
1648-
const deltaY = Math.abs(event.clientY - window._dragStartY);
1650+
if (SHARED_STATE._dragStartX !== undefined && SHARED_STATE._dragStartY !== undefined) {
1651+
const deltaX = Math.abs(event.clientX - SHARED_STATE._dragStartX);
1652+
const deltaY = Math.abs(event.clientY - SHARED_STATE._dragStartY);
16491653

16501654
if (deltaX <= DRAG_THRESHOLD && deltaY <= DRAG_THRESHOLD) {
16511655
_clearDropMarkers();
16521656
_stopAutoScroll();
1653-
_dragEndChores(window._currentDraggedElement);
1657+
_dragEndChores(SHARED_STATE._currentDraggedElement);
16541658
dismissUIAndCleanupState();
1655-
delete window._currentDraggedElement;
1656-
delete window._dragStartX;
1657-
delete window._dragStartY;
1658-
delete window._isDraggingSVG;
1659+
delete SHARED_STATE._currentDraggedElement;
1660+
delete SHARED_STATE._dragStartX;
1661+
delete SHARED_STATE._dragStartY;
1662+
delete SHARED_STATE._isDraggingSVG;
16591663
return;
16601664
}
16611665
}
@@ -1671,7 +1675,7 @@ function RemoteFunctions(config = {}) {
16711675
target = target.parentElement;
16721676
}
16731677

1674-
if (!isElementEditable(target) || target === window._currentDraggedElement) {
1678+
if (!isElementEditable(target) || target === SHARED_STATE._currentDraggedElement) {
16751679
if (_isAutoScrolling) { return; }
16761680

16771681
// if direct detection fails, we try to find a nearby valid target
@@ -1686,29 +1690,29 @@ function RemoteFunctions(config = {}) {
16861690
}
16871691

16881692
// skip if no valid target found or if it's the dragged element
1689-
if (!isElementEditable(target) || target === window._currentDraggedElement) {
1693+
if (!isElementEditable(target) || target === SHARED_STATE._currentDraggedElement) {
16901694
_clearDropMarkers();
16911695
_stopAutoScroll();
1692-
_dragEndChores(window._currentDraggedElement);
1696+
_dragEndChores(SHARED_STATE._currentDraggedElement);
16931697
dismissUIAndCleanupState();
1694-
delete window._currentDraggedElement;
1698+
delete SHARED_STATE._currentDraggedElement;
16951699
return;
16961700
}
16971701

16981702
// Determine drop position based on container layout and cursor position
16991703
const indicatorType = _getIndicatorType(target);
17001704
const dropZone = _getDropZone(
1701-
target, event.clientX, event.clientY, indicatorType, window._currentDraggedElement
1705+
target, event.clientX, event.clientY, indicatorType, SHARED_STATE._currentDraggedElement
17021706
);
17031707

17041708
// IDs of the source and target elements
1705-
const sourceId = window._currentDraggedElement.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
1709+
const sourceId = SHARED_STATE._currentDraggedElement.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
17061710
const targetId = target.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
17071711

17081712
// Handle different drop zones
17091713
let messageData = {
17101714
livePreviewEditEnabled: true,
1711-
sourceElement: window._currentDraggedElement,
1715+
sourceElement: SHARED_STATE._currentDraggedElement,
17121716
targetElement: target,
17131717
sourceId: Number(sourceId),
17141718
targetId: Number(targetId),
@@ -1729,11 +1733,11 @@ function RemoteFunctions(config = {}) {
17291733

17301734
_clearDropMarkers();
17311735
_stopAutoScroll();
1732-
_dragEndChores(window._currentDraggedElement);
1736+
_dragEndChores(SHARED_STATE._currentDraggedElement);
17331737
dismissUIAndCleanupState();
1734-
delete window._currentDraggedElement;
1735-
delete window._dragStartX;
1736-
delete window._dragStartY;
1738+
delete SHARED_STATE._currentDraggedElement;
1739+
delete SHARED_STATE._dragStartX;
1740+
delete SHARED_STATE._dragStartY;
17371741
}
17381742

17391743
/**
@@ -1745,27 +1749,27 @@ function RemoteFunctions(config = {}) {
17451749
event.preventDefault();
17461750
event.stopPropagation();
17471751

1748-
window._dragStartX = event.clientX;
1749-
window._dragStartY = event.clientY;
1750-
window._currentDraggedElement = element;
1752+
SHARED_STATE._dragStartX = event.clientX;
1753+
SHARED_STATE._dragStartY = event.clientY;
1754+
SHARED_STATE._currentDraggedElement = element;
17511755
_dragStartChores(element);
17521756
_clearDropMarkers();
17531757
dismissUIAndCleanupState();
17541758
dismissImageRibbonGallery();
17551759

1756-
window._isDraggingSVG = true;
1760+
SHARED_STATE._isDraggingSVG = true;
17571761
}
17581762

17591763
function onDragMouseUp(event) {
1760-
if (window._isDraggingSVG) {
1764+
if (SHARED_STATE._isDraggingSVG) {
17611765
event.preventDefault();
17621766
onDrop(event);
1763-
delete window._isDraggingSVG;
1767+
delete SHARED_STATE._isDraggingSVG;
17641768
}
17651769
}
17661770

17671771
function onDragMouseMove(event) {
1768-
if (window._isDraggingSVG) {
1772+
if (SHARED_STATE._isDraggingSVG) {
17691773
event.preventDefault();
17701774
onDragOver(event);
17711775
}
@@ -4626,7 +4630,7 @@ function RemoteFunctions(config = {}) {
46264630
*/
46274631
function cancelSVGDragIfActive() {
46284632
// check if any element is being dragged
4629-
if (!window._isDraggingSVG || !window._currentDraggedElement) {
4633+
if (!SHARED_STATE._isDraggingSVG || !SHARED_STATE._currentDraggedElement) {
46304634
return;
46314635
}
46324636

@@ -4645,9 +4649,9 @@ function RemoteFunctions(config = {}) {
46454649
// revert everything back
46464650
_clearDropMarkers();
46474651
_stopAutoScroll();
4648-
_dragEndChores(window._currentDraggedElement);
4649-
delete window._currentDraggedElement;
4650-
delete window._isDraggingSVG;
4652+
_dragEndChores(SHARED_STATE._currentDraggedElement);
4653+
delete SHARED_STATE._currentDraggedElement;
4654+
delete SHARED_STATE._isDraggingSVG;
46514655
_lastDragTarget = null;
46524656
_lastDropZone = null;
46534657
}
@@ -4681,7 +4685,7 @@ function RemoteFunctions(config = {}) {
46814685
function onElementHover(event) {
46824686
// don't want highlighting and stuff when auto scrolling or when dragging (svgs)
46834687
// for dragging normal html elements its already taken care of...so we just add svg drag checking
4684-
if (_isAutoScrolling || window._isDraggingSVG) {
4688+
if (_isAutoScrolling || SHARED_STATE._isDraggingSVG) {
46854689
return;
46864690
}
46874691

0 commit comments

Comments
 (0)