Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added panToWidget on Double click tree view

Browse Source
This commit is contained in:
paul
2025-03-10 11:58:27 +05:30
parent 16bfd244e6
commit cce577add3
4 changed files with 78 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/canvas/canvas.js
View File

@@ -554,6 +554,39 @@ class Canvas extends React.Component {
}, this.applyTransform)
}
setPan = (x, y) => {
this.setState({
currentTranslate: {x, y}
})
}
panToWidget = (widgetId) => {
const widget = this.getWidgetById(widgetId).current
const canvasBoundingRect = this.getCanvasBoundingRect(); // Get the canvas dimensions
// Get widget position
const widgetRect = widget.getBoundingRect(); // Get widget's bounding box
// Calculate widget center position in canvas space
const widgetCenter = {
x: (widgetRect.left - canvasBoundingRect.left + widgetRect.width / 2) / this.state.zoom,
y: (widgetRect.top - canvasBoundingRect.top + widgetRect.height / 2) / this.state.zoom
}
// Calculate new translation to center the widget in the viewport
const newTranslate = {
x: (canvasBoundingRect.width / 2) / this.state.zoom - widgetCenter.x,
y: (canvasBoundingRect.height / 2) / this.state.zoom - widgetCenter.y
}
this.setState({
currentTranslate: newTranslate
})
}
// setSelectedWidget(selectedWidget) {
// this.setState({ selectedWidget: [selectedWidget] })
// }
@@ -1053,8 +1086,6 @@ class Canvas extends React.Component {
}
getWidgetById(id) {
console.log("ID: ", id, this.widgetRefs.current)
return this.widgetRefs.current[id]
}
@@ -1198,9 +1229,13 @@ class Canvas extends React.Component {
zoom: this.state.zoom,
pan: this.state.currentTranslate
}}
onSelect={(widgetId) => this.setSelectedWidget(this.getWidgetById(widgetId)?.current)}
onWidgetDeleteRequest={this.removeWidget}
onPanToWidget={this.panToWidget}
onWidgetUpdate={this.onActiveWidgetUpdate}
onAddChildWidget={this.handleAddWidgetChild}
onCreateWidgetRequest={this.createWidget} // create widget when dropped from sidebar
@@ -1275,7 +1310,14 @@ class Canvas extends React.Component {
}}
/>
{/* Canvas */}
<div data-canvas className={`tw-w-full tw-h-full tw-absolute ${!IS_PRODUCTION ? "tw-bg-red-300" : "tw-bg-transparent"} tw-top-0 tw-select-none`}
{/* TODO: add translation in class instead of applyTransform function */}
<div data-canvas className={`tw-w-full tw-h-full tw-absolute ${!IS_PRODUCTION ? "tw-bg-red-300" : "tw-bg-transparent"}
tw-top-0 tw-select-none
`}
style={{
transform: `translate(${this.state.currentTranslate.x}px, ${this.state.currentTranslate.y}px) scale(${this.state.zoom})`
}}
ref={this.canvasRef}>
<div className="tw-relative tw-w-full tw-h-full">
{

39
src/canvas/widgets/base.js
View File

@@ -225,29 +225,29 @@ class Widget extends React.Component {
componentWillUnmount() {
}
__fixWidgetPosition = () => {
// __fixWidgetPosition = () => {
if (this.state.parentLayout?.layout === Layouts.FLEX || this.state.parentLayout?.layout === Layouts.GRID ){
const elementRect = this.elementRef.current.getBoundingClientRect()
const {pan: canvasPan, zoom: canvasZoom} = this.canvasMetaData
console.log("elemnt rect: ", elementRect)
// if (this.state.parentLayout?.layout === Layouts.FLEX || this.state.parentLayout?.layout === Layouts.GRID ){
// const elementRect = this.elementRef.current.getBoundingClientRect()
// const {pan: canvasPan, zoom: canvasZoom} = this.canvasMetaData
// console.log("elemnt rect: ", elementRect)
const pos = { // if the layout is flex or grid the position should be the where it stays
// x: ((elementRect?.x || 0) - canvasPan.x) / canvasZoom,
// y: ((elementRect?.y || 0) - canvasPan.y) / canvasZoom,
// const pos = { // if the layout is flex or grid the position should be the where it stays
// // x: ((elementRect?.x || 0) - canvasPan.x) / canvasZoom,
// // y: ((elementRect?.y || 0) - canvasPan.y) / canvasZoom,
x: elementRect?.x,
y: elementRect?.y,
}
// x: elementRect?.x,
// y: elementRect?.y,
// }
this.setState({
...this.state,
pos: pos
})
}
// this.setState({
// ...this.state,
// pos: pos
// })
// }
}
// }
updateState = (newState, callback) => {
@@ -394,6 +394,8 @@ class Widget extends React.Component {
selected: true
})
this.props.onSelect(this.__id)
}
deSelect() {
@@ -867,6 +869,9 @@ class Widget extends React.Component {
}
panToWidget = () => {
this.props.onPanToWidget(this.__id)
}
handleDragStart = (e, callback) => {
e.stopPropagation()

12
src/components/cards.js
View File

@@ -11,6 +11,7 @@ import { GithubOutlined, GitlabOutlined, LinkOutlined,
EyeInvisibleOutlined} from "@ant-design/icons"
import DraggableWrapper from "./draggable/draggable"
import { useWidgetContext } from "../canvas/context/widgetContext"
export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerRef}){
@@ -157,6 +158,7 @@ export function DraggableAssetCard({file, onDelete}){
export const TreeViewCard = memo(({widgetRef, title, isTopLevel}) => {
const [widgetVisible, setWidgetVisible] = useState(widgetRef.current.isWidgetVisible)
const {activeWidget} = useWidgetContext()
const onDelete = () => {
widgetRef.current.deleteWidget()
@@ -173,9 +175,17 @@ export const TreeViewCard = memo(({widgetRef, title, isTopLevel}) => {
}
}
const handleSingleClick = () => {
activeWidget?.deSelect()
widgetRef.current.select()
}
return (
<div className="tw-flex tw-place-items-center tw-px-2 tw-p-1 tw-place-content-between
tw-gap-4 tw-w-full" style={{width: "100%"}}>
tw-gap-4 tw-w-full" style={{width: "100%"}}
onClick={handleSingleClick}
onDoubleClick={() => widgetRef?.current.panToWidget()}
>
<div className={`tw-text-sm ${isTopLevel ? "tw-font-medium" : ""}`}>
{title}
</div>

4
src/sidebar/treeviewContainer.js
View File

@@ -38,10 +38,6 @@ function TreeviewContainer() {
const topLevelKeys = transformedContent.filter(cont => cont.isTopLevel).map(cont => cont.key)
const onDeleteRequest = (widgetId) => {
widgetRefs.current[widgetId].current?.deleteWidget()
}
return (
<div className="tw-w-full tw-p-2 tw-gap-4 tw-flex tw-flex-col tw-overflow-x-hidden">