Skip to content

Commit

Permalink
worked on popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@LiveDuo
LiveDuo committed Nov 8, 2023
1 parent 31975b1 commit 17ad541
Showing 1 changed file with 57 additions and 54 deletions.
111 changes: 57 additions & 54 deletions lib/client/vanilla/editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import TrashIcon from '@heroicons/react/24/outline/TrashIcon'
import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon'
import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon'

// import CursorArrowRippleIcon from '@heroicons/react/24/outline/CursorArrowRippleIcon'

import Squares2X2Icon from '@heroicons/react/24/outline/Squares2X2Icon'
import ArrowSmallUpIcon from '@heroicons/react/24/outline/ArrowSmallUpIcon'
import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
Expand Down Expand Up @@ -54,21 +56,6 @@ const getImageUrl = (standaloneServer: boolean, imageSrc: string) => {
return `${baseUrl}/api/builder/handle?type=asset&path=${imageSrc}`
}

const getElementPosition = (element: HTMLElement) => {
const rect = element.getBoundingClientRect()

const body = document.body
const documentElement = document.documentElement

const scrollTop = window.scrollY ?? documentElement.scrollTop ?? body.scrollTop
const scrollLeft = window.scrollX ?? documentElement.scrollLeft ?? body.scrollLeft

const clientTop = documentElement.clientTop ?? body.clientTop ?? 0
const clientLeft = documentElement.clientLeft ?? body.clientLeft ?? 0

return { top: rect.top + scrollTop - clientTop, left: rect.left + scrollLeft - clientLeft }
}

const isEventOnElement = (element: HTMLElement, event: React.MouseEvent<HTMLElement>) => {
if (!element) return
const rect = element.getBoundingClientRect()
Expand Down Expand Up @@ -133,6 +120,9 @@ function Editor({ standaloneServer = false }) {
const moveDownRef = useRef<SVGSVGElement>(null)
const deleteRef = useRef<SVGSVGElement>(null)

// const popoverElementRef = useRef<HTMLDivElement>(null)
// const optionsRef = useRef<SVGSVGElement>(null)

const [isPreview, setIsPreview] = useState(false)
const [hoveredComponent, setHoveredComponent] = useState<HTMLDivElement | null>(null)
const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null)
Expand Down Expand Up @@ -236,9 +226,8 @@ function Editor({ standaloneServer = false }) {

// update hovered component
setHoveredComponent(component)
const rect = getElementPosition(component)
popoverRef.current.style.top = `${rect.top}px`
popoverRef.current.style.left = `${rect.left}px`
popoverRef.current.style.top = `${component.offsetTop}px`
popoverRef.current.style.left = `${component.offsetLeft}px`
}

const onCanvasMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
Expand Down Expand Up @@ -333,41 +322,6 @@ function Editor({ standaloneServer = false }) {

return (
<div className="flex flex-row bg-white">
{!isPreview && (
<div
ref={popoverRef}
onMouseLeave={(e: any) => {
if (!canvasRef.current?.isSameNode(e.target)) {
setHoveredComponent(null)
}
}}
className="absolute z-10-none bg-gray-500"
style={{ display: hoveredComponent ? 'block' : 'none' }}
>
<div className="flex flex-row p-1">
{getComponents().indexOf(hoveredComponent!) < getComponents().length - 1 && (
<ArrowDownIcon
ref={moveDownRef}
onClick={onComponentMoveDown}
className="h-7 w-7 text-white p-1 cursor-pointer"
/>
)}
{getComponents().indexOf(hoveredComponent!) > 0 && (
<ArrowUpIcon
ref={moveUpRef}
onClick={onComponentMoveUp}
className="h-7 w-7 text-white p-1 cursor-pointer"
/>
)}
<TrashIcon
id="delete"
ref={deleteRef}
onClick={onComponentDelete}
className="h-7 w-7 text-white p-1 cursor-pointer"
/>
</div>
</div>
)}
{!isPreview && (
<div className="w-56 p-2 shrink-0 overflow-y-scroll h-screen">
{Object.keys(components).map((c: string, i) => (
Expand Down Expand Up @@ -431,7 +385,7 @@ function Editor({ standaloneServer = false }) {
</button>
)}
</div>
<div className="flex justify-center h-fit bg-gray-200 overflow-y-scroll">
<div className="flex justify-center h-fit bg-gray-200 overflow-y-scroll" style={{ position: 'relative' }}>
<ImageDialog
open={openImage}
setOpen={setOpenImage}
Expand All @@ -453,6 +407,55 @@ function Editor({ standaloneServer = false }) {
setOpen={setOpenSvg}
selectedElement={selectedElement as unknown as SVGTextPathElement}
/>
{/* {!isPreview && (
<div
ref={popoverElementRef}
className="absolute z-10-none bg-gray-500"
style={{ display: hoveredComponent ? 'block' : 'none' }}
>
<div className="flex flex-row p-1">
<CursorArrowRippleIcon
ref={optionsRef}
className="h-7 w-7 text-white p-1 cursor-pointer"
/>
</div>
</div>
)} */}
{!isPreview && (
<div
ref={popoverRef}
onMouseLeave={(e: any) => {
if (!canvasRef.current?.isSameNode(e.target)) {
setHoveredComponent(null)
}
}}
className="absolute z-10-none bg-gray-500"
style={{ display: hoveredComponent ? 'block' : 'none' }}
>
<div className="flex flex-row p-1">
{getComponents().indexOf(hoveredComponent!) < getComponents().length - 1 && (
<ArrowDownIcon
ref={moveDownRef}
onClick={onComponentMoveDown}
className="h-7 w-7 text-white p-1 cursor-pointer"
/>
)}
{getComponents().indexOf(hoveredComponent!) > 0 && (
<ArrowUpIcon
ref={moveUpRef}
onClick={onComponentMoveUp}
className="h-7 w-7 text-white p-1 cursor-pointer"
/>
)}
<TrashIcon
id="delete"
ref={deleteRef}
onClick={onComponentDelete}
className="h-7 w-7 text-white p-1 cursor-pointer"
/>
</div>
</div>
)}
<div
id="editor"
ref={canvasRef}
Expand Down

0 comments on commit 17ad541

Please sign in to comment.