Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Commit

Permalink
Fix highlighting elements with border and transform-origin property.
Browse files Browse the repository at this point in the history
  • Loading branch information
Wojciech Połowniak committed Apr 10, 2017
1 parent 66259dc commit fe9237e
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 33 deletions.
70 changes: 40 additions & 30 deletions src/LiveDevelopment/Agents/RemoteFunctions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ function RemoteFunctions(config, remoteWSPort) {
elementStyling = window.getComputedStyle(element),
transitionDuration = parseFloat(elementStyling.getPropertyValue('transition-duration')),
animationDuration = parseFloat(elementStyling.getPropertyValue('animation-duration'));
if (transitionDuration) {
animateHighlight(transitionDuration);
}
Expand All @@ -298,12 +298,17 @@ function RemoteFunctions(config, remoteWSPort) {

var borderBox = elementStyling.boxSizing === 'border-box';

var innerWidth = parseInt(elementStyling.width) - parseInt(realElBorder.left) - parseInt(realElBorder.right);
var innerHeight = parseInt(elementStyling.height) - parseInt(realElBorder.top) - parseInt(realElBorder.bottom);

var innerWidth = parseInt(elementStyling.width),
innerHeight = parseInt(elementStyling.height),
outerHeight = innerHeight,
outerWidth = innerWidth;

if (!borderBox) {
innerWidth += parseInt(elementStyling.paddingLeft) + parseInt(elementStyling.paddingRight);
innerHeight += parseInt(elementStyling.paddingTop) + parseInt(elementStyling.paddingBottom);
outerWidth = innerWidth + parseInt(realElBorder.right) +
parseInt(realElBorder.left),
outerHeight = innerHeight + parseInt(realElBorder.bottom) + parseInt(realElBorder.top);
}

var visualisations = {
Expand All @@ -313,19 +318,28 @@ function RemoteFunctions(config, remoteWSPort) {

var drawPaddingRect = function(side) {
var elStyling = {};

if (visualisations.horizontal.indexOf(side) >= 0) {
elStyling['width'] = elementStyling.getPropertyValue('padding-' + side);
// get rid of px and remove borders
elStyling['height'] = innerHeight + "px";
elStyling['top'] = realElBorder.top;
elStyling['top'] = 0;

if (borderBox) {
elStyling['height'] = innerHeight - parseInt(realElBorder.top) - parseInt(realElBorder.bottom) + "px";
}

} else {
elStyling['height'] = elementStyling.getPropertyValue('padding-' + side);
elStyling['width'] = innerWidth + "px";
elStyling['left'] = realElBorder.left;
elStyling['left'] = 0;

if (borderBox) {
elStyling['width'] = innerWidth - parseInt(realElBorder.left) - parseInt(realElBorder.right) + "px";
}
}

elStyling[side] = realElBorder[side];
elStyling[side] = 0;
elStyling['position'] = 'absolute';

return elStyling;
Expand All @@ -340,18 +354,17 @@ function RemoteFunctions(config, remoteWSPort) {
margin['bottom'] = parseInt(elementStyling.getPropertyValue('margin-bottom'));
margin['left'] = parseInt(elementStyling.getPropertyValue('margin-left'));


if(visualisations['horizontal'].indexOf(side) >= 0) {
elStyling['width'] = elementStyling.getPropertyValue('margin-' + side);
elStyling['height'] = innerHeight + margin['top'] + margin['bottom'] + "px";
elStyling['top'] = -margin['top'] + "px";
elStyling['width'] = elementStyling.getPropertyValue('margin-' + side);
elStyling['height'] = outerHeight + margin['top'] + margin['bottom'] + "px";
elStyling['top'] = "-" + (margin['top'] + parseInt(realElBorder.top)) + "px";
} else {
elStyling['height'] = elementStyling.getPropertyValue('margin-' + side);
elStyling['width'] = innerWidth + "px";
elStyling['left'] = 0;
elStyling['height'] = elementStyling.getPropertyValue('margin-' + side);
elStyling['width'] = outerWidth + "px";
elStyling['left'] = "-" + realElBorder.left;
}

elStyling[side] = "-" + margin[side] + "px";
elStyling[side] = "-" + (margin[side] + parseInt(realElBorder[side])) + "px";
elStyling['position'] = 'absolute';

return elStyling;
Expand All @@ -370,7 +383,6 @@ function RemoteFunctions(config, remoteWSPort) {
};

var mainBoxStyles = config.remoteHighlight.stylesToSet;
mainBoxStyles['border'] = 'none';

var paddingVisualisations = [
drawPaddingRect('top'),
Expand All @@ -392,7 +404,6 @@ function RemoteFunctions(config, remoteWSPort) {
setVisibility(arr[i]);

// Applies to every visualisationElement (padding or margin div)
arr[i]["box-sizing"] = "border-box";
arr[i]["transform"] = "none";
var el = window.document.createElement("div"),
styles = Object.assign(
Expand Down Expand Up @@ -441,16 +452,15 @@ function RemoteFunctions(config, remoteWSPort) {
"padding": 0,
"position": "absolute",
"pointer-events": "none",
"border-top-left-radius": elementStyling.borderTopLeftRadius,
"border-top-right-radius": elementStyling.borderTopRightRadius,
"border-bottom-left-radius": elementStyling.borderBottomLeftRadius,
"border-bottom-right-radius": elementStyling.borderBottomRightRadius,
"border-style": "solid",
"border-width": "1px",
"border-color": "#00a2ff",
"box-shadow": "0 0 1px #fff",
"box-sizing": "border-box",
"transform": elementStyling.getPropertyValue('transform')
"box-sizing": elementStyling.getPropertyValue('box-sizing'),
"border-right": elementStyling.getPropertyValue('border-right'),
"border-left": elementStyling.getPropertyValue('border-left'),
"border-top": elementStyling.getPropertyValue('border-top'),
"border-bottom": elementStyling.getPropertyValue('border-bottom'),
"transform": elementStyling.getPropertyValue('transform'),
"transform-origin": elementStyling.getPropertyValue('transform-origin'),
"border-color": config.remoteHighlight.borderColor
};

var mergedStyles = Object.assign({}, stylesToSet, config.remoteHighlight.stylesToSet);
Expand Down Expand Up @@ -1037,10 +1047,10 @@ function RemoteFunctions(config, remoteWSPort) {
_ws.onopen = function () {
window.document.addEventListener("click", onDocumentClick);
};
_ws.onmessage = function (evt) {
};
_ws.onclose = function () {
// websocket is closed
window.document.removeEventListener("click", onDocumentClick);
Expand Down
4 changes: 1 addition & 3 deletions src/LiveDevelopment/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,7 @@ define(function main(require, exports, module) {
"marginStyling": {
"background-color": "rgba(21, 165, 255, 0.58)"
},
"stylesToSet": {
"border-width": "1px"
},
"borderColor": "rgba(21, 165, 255, 0.85)",
"showPaddingMargin": true
}, {
description: "LivePreview highlight settings"
Expand Down

0 comments on commit fe9237e

Please sign in to comment.