Commit b9ad3ddc authored by StreatCodes's avatar StreatCodes
Browse files

Add ability to rotate elements

parent c1b33019
......@@ -126,7 +126,7 @@ export function Editor({slug, selectedElementId}) {
</Fragment>
}
function TransformableElement({rect, updateRect, children, glow, highlight}) {
function TransformableElement({rect, updateRect, rotation, updateRotation, children, glow, highlight}) {
//Handle dragging elements
const handleMove = downEvent => {
const mousemove = moveEvent => {
......@@ -203,16 +203,47 @@ function TransformableElement({rect, updateRect, children, glow, highlight}) {
window.addEventListener('mousemove', mousemove);
}
const handleRotate = downEvent => {
downEvent.stopPropagation();
const mousemove = moveEvent => {
//Go up an element due to rotate dot
const elementRect = downEvent.target.parentElement.getBoundingClientRect();
let centerX = elementRect.left + ((elementRect.right - elementRect.left) / 2.0);
let centerY = elementRect.top + ((elementRect.bottom - elementRect.top) / 2.0);
const mouseX = moveEvent.clientX;
const mouseY = moveEvent.clientY;
const radians = Math.atan2(mouseY - centerY, mouseX - centerX);
updateRotation(radians);
}
//Remove listeners on mouse button up
const mouseup = () => {
window.removeEventListener('mousemove', mousemove);
window.removeEventListener('mouseup', mouseup);
}
//Add movement and mouseup events
window.addEventListener('mouseup', mouseup);
window.addEventListener('mousemove', mousemove);
}
const left = `${rect.x}%`;
const top = `${rect.y}%`;
const width = `${rect.w}%`;
const height = `${rect.h}%`;
const _rotation = rotation ? `rotate(${rotation}rad)` : `rotate(0rad)`;
return <div class={`check ${glow || highlight ? 'glow' : ''}`}
style={{left: left, top: top, width: width, height: height}}
style={{left: left, top: top, width: width, height: height, transform: _rotation}}
onMouseDown={handleMove}>
{children}
<div class="resize" onMouseDown={handleResize}></div>
<div class="rotate" onMouseDown={handleRotate}></div>
</div>
}
......@@ -229,6 +260,17 @@ function DashboardElements({dashboardDispatch, selectedElementId, elements, high
});
}
const updateRotation = radian => {
dashboardDispatch({
type: 'updateElement',
elementIndex: index,
element: {
...element,
rotation: radian
}
});
}
let ele = null;
if(element.type === 'check-card') { ele = <CheckCard options={element.options} /> }
if(element.type === 'check-svg') { ele = <CheckSVG options={element.options}/> }
......@@ -238,7 +280,8 @@ function DashboardElements({dashboardDispatch, selectedElementId, elements, high
if(element.type === 'static-image') { ele = <StaticImage options={element.options}/> }
return <TransformableElement rect={element.rect} updateRect={updateRect}
glow={selectedElementId === index} highlight={highlightedElementId === index}>
glow={selectedElementId === index} highlight={highlightedElementId === index}
updateRotation={updateRotation} rotation={element.rotation}>
{ele}
</TransformableElement>
});
......
......@@ -29,6 +29,8 @@ export function Viewer({slug}) {
const width = `${element.rect.w}%`;
const height = `${element.rect.h}%`;
const rotation = element.rotation ? `rotate(${element.rotation}rad)` : `rotate(0rad)`;
let ele = null;
if(element.type === 'check-card') { ele = <CheckCard options={element.options}/> }
if(element.type === 'check-svg') { ele = <CheckSVG options={element.options}/> }
......@@ -37,7 +39,7 @@ export function Viewer({slug}) {
if(element.type === 'static-svg') { ele = <StaticSVG options={element.options}/> }
if(element.type === 'static-image') { ele = <StaticImage options={element.options}/> }
return <div class="check" style={{left: left, top: top, width: width, height: height}}>
return <div class="check" style={{left: left, top: top, width: width, height: height, transform: rotation}}>
{ele}
</div>
});
......
......@@ -534,6 +534,16 @@ div.tag .close {
cursor: se-resize;
}
.check > div.rotate {
position: absolute;
right: 2px;
top: calc(50% - 6px);
width: 6px;
height: 12px;
background-color: var(--color-light-orange);
cursor: ns-resize;
}
.check > .check-content {
pointer-events: none;
user-select: none;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment