Skip to content

Commit b33c0c3

Browse files
devvaannshdevvaannsh
committed
feat: add ruler lines feature when element is clicked
1 parent a9edff7 commit b33c0c3

File tree

4 files changed

+179
-3
lines changed

4 files changed

+179
-3
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3992,6 +3992,121 @@ function RemoteFunctions(config = {}) {
39923992
}
39933993
};
39943994

3995+
/**
3996+
* Ruler lines class, this creates the rulers across the edges of the element (hori as well as vert)
3997+
*/
3998+
function RulerLines(element) {
3999+
this.element = element;
4000+
this.lineElements = {
4001+
left: null,
4002+
right: null,
4003+
top: null,
4004+
bottom: null
4005+
};
4006+
this.create();
4007+
this.update();
4008+
}
4009+
4010+
RulerLines.prototype = {
4011+
create: function() {
4012+
let body = window.document.body;
4013+
4014+
this.lineElements.left = window.document.createElement("div");
4015+
this.lineElements.right = window.document.createElement("div");
4016+
this.lineElements.top = window.document.createElement("div");
4017+
this.lineElements.bottom = window.document.createElement("div");
4018+
4019+
this.lineElements.left.setAttribute("data-phcode-internal-c15r5a9", "true");
4020+
this.lineElements.right.setAttribute("data-phcode-internal-c15r5a9", "true");
4021+
this.lineElements.top.setAttribute("data-phcode-internal-c15r5a9", "true");
4022+
this.lineElements.bottom.setAttribute("data-phcode-internal-c15r5a9", "true");
4023+
4024+
let applyStyles = function (element) {
4025+
element.style.position = "absolute";
4026+
element.style.backgroundColor = "rgba(66, 133, 244, 0.5)";
4027+
element.style.pointerEvents = "none";
4028+
element.style.zIndex = "2147483645";
4029+
};
4030+
4031+
applyStyles(this.lineElements.left);
4032+
applyStyles(this.lineElements.right);
4033+
applyStyles(this.lineElements.top);
4034+
applyStyles(this.lineElements.bottom);
4035+
4036+
body.appendChild(this.lineElements.left);
4037+
body.appendChild(this.lineElements.right);
4038+
body.appendChild(this.lineElements.top);
4039+
body.appendChild(this.lineElements.bottom);
4040+
},
4041+
4042+
update: function() {
4043+
if (!this.element) {
4044+
return;
4045+
}
4046+
4047+
let rect = this.element.getBoundingClientRect();
4048+
let scrollTop = window.pageYOffset;
4049+
let scrollLeft = window.pageXOffset;
4050+
4051+
var edges = {
4052+
left: rect.left + scrollLeft,
4053+
right: rect.right + scrollLeft,
4054+
top: rect.top + scrollTop,
4055+
bottom: rect.bottom + scrollTop
4056+
};
4057+
4058+
// get the doc dimensions as we need to put the ruler lines in the whole document
4059+
var docHeight = window.document.documentElement.scrollHeight;
4060+
var docWidth = window.document.documentElement.scrollWidth;
4061+
4062+
// for vertical lines
4063+
this.lineElements.left.style.width = '1px';
4064+
this.lineElements.left.style.height = docHeight + 'px';
4065+
this.lineElements.left.style.left = edges.left + 'px';
4066+
this.lineElements.left.style.top = '0px';
4067+
4068+
this.lineElements.right.style.width = '1px';
4069+
this.lineElements.right.style.height = docHeight + 'px';
4070+
this.lineElements.right.style.left = edges.right + 'px';
4071+
this.lineElements.right.style.top = '0px';
4072+
4073+
// for horizontal lines
4074+
this.lineElements.top.style.height = '1px';
4075+
this.lineElements.top.style.width = docWidth + 'px';
4076+
this.lineElements.top.style.top = edges.top + 'px';
4077+
this.lineElements.top.style.left = '0px';
4078+
4079+
this.lineElements.bottom.style.height = '1px';
4080+
this.lineElements.bottom.style.width = docWidth + 'px';
4081+
this.lineElements.bottom.style.top = edges.bottom + 'px';
4082+
this.lineElements.bottom.style.left = '0px';
4083+
},
4084+
4085+
remove: function() {
4086+
var body = window.document.body;
4087+
4088+
if (this.lineElements.left && this.lineElements.left.parentNode) {
4089+
body.removeChild(this.lineElements.left);
4090+
}
4091+
if (this.lineElements.right && this.lineElements.right.parentNode) {
4092+
body.removeChild(this.lineElements.right);
4093+
}
4094+
if (this.lineElements.top && this.lineElements.top.parentNode) {
4095+
body.removeChild(this.lineElements.top);
4096+
}
4097+
if (this.lineElements.bottom && this.lineElements.bottom.parentNode) {
4098+
body.removeChild(this.lineElements.bottom);
4099+
}
4100+
4101+
this.lineElements = {
4102+
left: null,
4103+
right: null,
4104+
top: null,
4105+
bottom: null
4106+
};
4107+
}
4108+
};
4109+
39954110
var _localHighlight;
39964111
var _hoverHighlight;
39974112
var _clickHighlight;
@@ -4000,6 +4115,7 @@ function RemoteFunctions(config = {}) {
40004115
var _moreOptionsDropdown;
40014116
var _aiPromptBox;
40024117
var _imageRibbonGallery;
4118+
var _currentRulerLines;
40034119
var _setup = false;
40044120
var _hoverLockTimer = null;
40054121

@@ -4287,6 +4403,11 @@ function RemoteFunctions(config = {}) {
42874403
_hoverHighlight.add(element, true);
42884404
}
42894405

4406+
// to show ruler lines (only when its enabled)
4407+
if (config.showRulerLines) {
4408+
_currentRulerLines = new RulerLines(element);
4409+
}
4410+
42904411
previouslyClickedElement = element;
42914412
}
42924413

@@ -4527,10 +4648,18 @@ function RemoteFunctions(config = {}) {
45274648
}
45284649
}
45294650

4651+
// redraw ruler lines when element is selected
4652+
function redrawRulerLines() {
4653+
if (_currentRulerLines) {
4654+
_currentRulerLines.update();
4655+
}
4656+
}
4657+
45304658
// just a wrapper function when we need to redraw highlights as well as UI boxes
45314659
function redrawEverything() {
45324660
redrawHighlights();
45334661
redrawUIBoxes();
4662+
redrawRulerLines();
45344663
}
45354664

45364665
window.addEventListener("resize", redrawEverything);
@@ -4629,13 +4758,17 @@ function RemoteFunctions(config = {}) {
46294758
// need to be updated on a timer to ensure the layout is correct.
46304759
if (e.target === window.document) {
46314760
redrawHighlights();
4761+
redrawRulerLines();
46324762
// need to dismiss the box if the elements are fixed, otherwise they drift at times
46334763
_dismissBoxesForFixedElements();
46344764
_repositionAIBox(); // and reposition the AI box
46354765
} else {
46364766
if (_localHighlight || _clickHighlight || _hoverHighlight) {
46374767
window.setTimeout(redrawHighlights, 0);
46384768
}
4769+
if (_currentRulerLines) {
4770+
window.setTimeout(redrawRulerLines, 0);
4771+
}
46394772
_dismissBoxesForFixedElements();
46404773
_repositionAIBox();
46414774
}
@@ -5129,6 +5262,11 @@ function RemoteFunctions(config = {}) {
51295262
_hoverHighlight.clear();
51305263
}
51315264

5265+
if (_currentRulerLines) {
5266+
_currentRulerLines.remove();
5267+
_currentRulerLines = null;
5268+
}
5269+
51325270
previouslyClickedElement = null;
51335271
}
51345272
}

‎src/LiveDevelopment/main.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ define(function main(require, exports, module) {
9898
},
9999
isProUser: isProUser,
100100
elemHighlights: "hover", // default value, this will get updated when the extension loads
101+
showRulerLines: false, // default value, this will get updated when the extension loads
101102
imageGalleryState: _getImageGalleryState(), // image gallery selected state
102103
// this strings are used in RemoteFunctions.js
103104
// we need to pass this through config as remoteFunctions runs in browser context and cannot
@@ -488,6 +489,14 @@ define(function main(require, exports, module) {
488489
}
489490
}
490491

492+
function updateRulerLinesConfig() {
493+
const prefValue = PreferencesManager.get("livePreviewShowRulerLines");
494+
config.showRulerLines = prefValue || false;
495+
if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
496+
MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
497+
}
498+
}
499+
491500
// init commands
492501
CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, togglePreviewHighlight);
493502
CommandManager.register(Strings.CMD_RELOAD_LIVE_PREVIEW, Commands.CMD_RELOAD_LIVE_PREVIEW, _handleReloadLivePreviewCommand);
@@ -517,6 +526,7 @@ define(function main(require, exports, module) {
517526
exports.setLivePreviewEditFeaturesActive = setLivePreviewEditFeaturesActive;
518527
exports.setImageGalleryState = setImageGalleryState;
519528
exports.updateElementHighlightConfig = updateElementHighlightConfig;
529+
exports.updateRulerLinesConfig = updateRulerLinesConfig;
520530
exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
521531
exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
522532
exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;

‎src/extensionsIntegrated/Phoenix-live-preview/main.js‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,12 @@ define(function (require, exports, module) {
9898
description: Strings.LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE
9999
});
100100

101+
// live preview ruler lines preference (show/hide ruler lines on element selection)
102+
const PREFERENCE_SHOW_RULER_LINES = "livePreviewShowRulerLines";
103+
PreferencesManager.definePreference(PREFERENCE_SHOW_RULER_LINES, "boolean", false, {
104+
description: Strings.LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE
105+
});
106+
101107
const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
102108
const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
103109
const LIVE_PREVIEW_IFRAME_HTML = `
@@ -357,6 +363,7 @@ define(function (require, exports, module) {
357363
if (isEditFeaturesActive) {
358364
items.push("---");
359365
items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
366+
items.push(Strings.LIVE_PREVIEW_SHOW_RULER_LINES);
360367
}
361368

362369
const currentMode = LiveDevelopment.getCurrentMode();
@@ -380,6 +387,12 @@ define(function (require, exports, module) {
380387
return `✓ ${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
381388
}
382389
return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON}`;
390+
} else if (item === Strings.LIVE_PREVIEW_SHOW_RULER_LINES) {
391+
const isEnabled = PreferencesManager.get(PREFERENCE_SHOW_RULER_LINES);
392+
if(isEnabled) {
393+
return `✓ ${Strings.LIVE_PREVIEW_SHOW_RULER_LINES}`;
394+
}
395+
return `${'\u00A0'.repeat(4)}${Strings.LIVE_PREVIEW_SHOW_RULER_LINES}`;
383396
}
384397
return item;
385398
});
@@ -422,6 +435,15 @@ define(function (require, exports, module) {
422435
const newMode = currMode !== "click" ? "click" : "hover";
423436
PreferencesManager.set(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, newMode);
424437
return; // Don't dismiss highlights for this option
438+
} else if (item === Strings.LIVE_PREVIEW_SHOW_RULER_LINES) {
439+
// Don't allow ruler lines toggle if edit features are not active
440+
if (!isEditFeaturesActive) {
441+
return;
442+
}
443+
// Toggle ruler lines on/off
444+
const currentValue = PreferencesManager.get(PREFERENCE_SHOW_RULER_LINES);
445+
PreferencesManager.set(PREFERENCE_SHOW_RULER_LINES, !currentValue);
446+
return; // Don't dismiss highlights for this option
425447
}
426448

427449
// need to dismiss the previous highlighting and stuff
@@ -1205,13 +1227,17 @@ define(function (require, exports, module) {
12051227
_initializeMode();
12061228
});
12071229

1208-
// Handle element highlight preference changes from this extension
1230+
// Handle element highlight & ruler lines preference changes
12091231
PreferencesManager.on("change", PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, function() {
12101232
LiveDevelopment.updateElementHighlightConfig();
12111233
});
1234+
PreferencesManager.on("change", PREFERENCE_SHOW_RULER_LINES, function() {
1235+
LiveDevelopment.updateRulerLinesConfig();
1236+
});
12121237

1213-
// Initialize element highlight config on startup
1238+
// Initialize element highlight and ruler lines config on startup
12141239
LiveDevelopment.updateElementHighlightConfig();
1240+
LiveDevelopment.updateRulerLinesConfig();
12151241

12161242
LiveDevelopment.openLivePreview();
12171243
LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);

‎src/nls/root/strings.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,8 @@ define({
183183
"LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT": "Show Live Preview Element Highlights on:",
184184
"LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_HOVER": "hover",
185185
"LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_CLICK": "click",
186-
"LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE": "show live preview element highlights on 'hover' or 'click'. Defaults to 'hover'",
186+
"LIVE_DEV_SETTINGS_ELEMENT_HIGHLIGHT_PREFERENCE": "Show live preview element highlights on 'hover' or 'click'. Defaults to 'hover'",
187+
"LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE": "Show ruler lines when elements are selected in live preview. Defaults to 'false'",
187188
"LIVE_DEV_MORE_OPTIONS_SELECT_PARENT": "Select Parent",
188189
"LIVE_DEV_MORE_OPTIONS_EDIT_TEXT": "Edit Text",
189190
"LIVE_DEV_MORE_OPTIONS_DUPLICATE": "Duplicate",
@@ -219,6 +220,7 @@ define({
219220
"LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
220221
"LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
221222
"LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Edit Highlights on Hover",
223+
"LIVE_PREVIEW_SHOW_RULER_LINES": "Show Ruler Lines",
222224
"LIVE_PREVIEW_MODE_PREFERENCE": "{0} shows only the webpage, {1} connects the webpage to your code - click on elements to jump to their code and vice versa, {2} provides highlighting along with advanced element manipulation",
223225
"LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
224226

0 commit comments

Comments
 (0)