diff --git a/src/preview/preview-renderer.tsx b/src/preview/preview-renderer.tsx index 72135555d..2e76878f9 100644 --- a/src/preview/preview-renderer.tsx +++ b/src/preview/preview-renderer.tsx @@ -304,10 +304,8 @@ class PreviewApplication extends React.Component { return; } - if (!currentElement.selected) { - this.props.highlight.setSize(node); - this.props.highlight.show(); - } + this.props.highlight.setSize(node); + this.props.highlight.show(); } private updateSelection(elementId?: string): void { @@ -463,17 +461,15 @@ class PreviewHighlight extends React.Component { return (
); @@ -492,13 +488,11 @@ class PreviewSelect extends React.Component { position: 'absolute', boxSizing: 'border-box', border: '1px solid rgba(255, 255, 255, 0.5)', - bottom: selectedArea.bottom, - height: selectedArea.height, + height: Math.max(selectedArea.height, 1), left: selectedArea.left, opacity: selectedArea.opacity, - right: selectedArea.right, top: selectedArea.top, - width: selectedArea.width, + width: Math.max(selectedArea.width, 1), pointerEvents: 'none', mixBlendMode: 'difference' }} diff --git a/src/preview/preview.tsx b/src/preview/preview.tsx index f02271700..93dae62ae 100644 --- a/src/preview/preview.tsx +++ b/src/preview/preview.tsx @@ -174,18 +174,32 @@ function main(): void { }; const onElementMouseOver = (e, payload) => { - if (!connection) { + if (store.mode === 'static') { return; } - store.highlightedElementId = payload.id; + const previous = store.elements.filter(el => el.highlighted && el.id !== payload.id); + previous.forEach(p => (p.highlighted = false)); + + const element = store.elements.find(el => el.id === payload.id); + + if (element && element.role !== 'root') { + element.highlighted = true; + store.highlightedElementId = element.id; + } else { + store.highlightedElementId = ''; + } + + if (!connection) { + return; + } connection.send( JSON.stringify({ type: PreviewMessageType.HighlightElement, id: uuid.v4(), payload: { - id: payload.id, + id: element ? element.id : undefined, metaDown: store.metaDown } })