fix: fixed inner child resizing without dragging problem
This commit is contained in:
paul
@@ -178,15 +178,16 @@ class Canvas extends React.Component {
|
||||
// TODO: improve search, currently O(n), but can be improved via this.state.widgets or something
|
||||
|
||||
let innerWidget = null
|
||||
|
||||
// FIXME: target selection not accurate when there is inner child involved
|
||||
for (let [key, ref] of Object.entries(this.widgetRefs)) {
|
||||
console.log("key: ", key, innerWidget)
|
||||
if (ref.current.getElement().contains(target)) {
|
||||
|
||||
if (!innerWidget) {
|
||||
innerWidget = ref.current;
|
||||
innerWidget = ref.current
|
||||
} else if (innerWidget.getElement().contains(ref.current.getElement())) {
|
||||
// If the current widget is deeper than the existing innermost widget, update innerWidget
|
||||
innerWidget = ref.current;
|
||||
innerWidget = ref.current
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -247,7 +248,9 @@ class Canvas extends React.Component {
|
||||
if (event.button === 0) {
|
||||
this.mousePressed = true
|
||||
|
||||
// FIXME: the inner widgets are not selected properly
|
||||
if (selectedWidget) {
|
||||
console.log("selected widget: ", selectedWidget.getId(), selectedWidget.getElement())
|
||||
// if the widget is selected don't pan, instead move the widget
|
||||
if (!selectedWidget._disableSelection) {
|
||||
// console.log("selected widget: ", selectedWidget)
|
||||
@@ -263,9 +266,6 @@ class Canvas extends React.Component {
|
||||
selectedWidget: selectedWidget,
|
||||
toolbarAttrs: selectedWidget.getToolbarAttrs()
|
||||
})
|
||||
// this.context.updateActiveWidget(selectedWidget.__id)
|
||||
// this.context.updateToolAttrs(selectedWidget.getToolbarAttrs())
|
||||
// this.props.updateActiveWidget(selectedWidget)
|
||||
}
|
||||
this.currentMode = CanvasModes.MOVE_WIDGET
|
||||
}
|
||||
@@ -382,6 +382,7 @@ class Canvas extends React.Component {
|
||||
* @returns
|
||||
*/
|
||||
handleResize = (event) => {
|
||||
// FIXME: problem when resizing child element inside the child widget
|
||||
if (this.state.resizing === "") return
|
||||
|
||||
const widget = this.state.selectedWidget
|
||||
|
||||
@@ -83,6 +83,11 @@ class Widget extends React.Component {
|
||||
|
||||
widgetStyling: {
|
||||
// use for widget's inner styling
|
||||
backgroundColor: "#fff",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
flexWrap: "wrap"
|
||||
},
|
||||
|
||||
attrs: {
|
||||
@@ -164,6 +169,8 @@ class Widget extends React.Component {
|
||||
componentDidMount() {
|
||||
this.elementRef.current?.addEventListener("click", this.mousePress)
|
||||
|
||||
// FIXME: initial layout is not set properly
|
||||
console.log("prior layout: ", this.state.attrs.layout.value)
|
||||
this.setLayout(this.state.attrs.layout.value)
|
||||
this.setWidgetStyling('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff")
|
||||
|
||||
@@ -555,24 +562,12 @@ class Widget extends React.Component {
|
||||
*/
|
||||
load = (data) => {
|
||||
|
||||
if (Object.keys(data).length === 0) return // no data to load
|
||||
|
||||
for (let [key, value] of Object.entries(data.attrs|{}))
|
||||
this.setAttrValue(key, value)
|
||||
|
||||
if (data.attrs){
|
||||
if ('layout' in data.attrs){
|
||||
this.setLayout(data.attrs.layout.value || {})
|
||||
}
|
||||
|
||||
if ('backgroundColor' in data.attrs){
|
||||
this.setWidgetStyling('backgroundColor', data.attrs.styling.backgroundColor)
|
||||
}
|
||||
|
||||
if ('foregroundColor' in data.attrs){
|
||||
this.setWidgetStyling('foregroundColor', data.attrs.styling.backgroundColor)
|
||||
}
|
||||
|
||||
}
|
||||
delete data.attrs // think of immutable way to modify
|
||||
delete data.attrs
|
||||
|
||||
/**
|
||||
* const obj = { a: 1, b: 2, c: 3 }
|
||||
@@ -587,9 +582,8 @@ class Widget extends React.Component {
|
||||
// FIXME: children outside the bounding box
|
||||
renderContent() {
|
||||
// throw new NotImplementedError("render method has to be implemented")
|
||||
|
||||
return (
|
||||
<div className="tw-w-full tw-h-full tw-p-2 tw-rounded-md" style={this.state.widgetStyling}>
|
||||
<div className="tw-w-full tw-h-full tw-p-2 tw-content-start tw-rounded-md" style={this.state.widgetStyling}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
@@ -612,7 +606,6 @@ class Widget extends React.Component {
|
||||
height: `${this.state.size.height}px`,
|
||||
}
|
||||
|
||||
// console.log("Drag enabled: ", this.state.dragEnabled)
|
||||
// console.log("selected: ", this.state.selected)
|
||||
return (
|
||||
<WidgetDraggable widgetRef={this.elementRef}
|
||||
@@ -644,6 +637,7 @@ class Widget extends React.Component {
|
||||
>
|
||||
|
||||
<div className="tw-relative tw-w-full tw-h-full tw-top-0 tw-left-0">
|
||||
{this.renderContent()}
|
||||
|
||||
{
|
||||
// show drop style on drag hover
|
||||
@@ -659,7 +653,7 @@ class Widget extends React.Component {
|
||||
height: "calc(100% + 10px)",
|
||||
}
|
||||
}
|
||||
>
|
||||
>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -679,44 +673,51 @@ class Widget extends React.Component {
|
||||
className="tw-w-2 tw-h-2 tw-absolute tw--left-1 tw--top-1 tw-bg-blue-500"
|
||||
style={{ cursor: Cursor.NW_RESIZE }}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.props.onWidgetResizing("nw")
|
||||
this.setState({dragEnabled: false})
|
||||
}}
|
||||
onMouseLeave={() => this.setState({dragEnabled: true})}
|
||||
onMouseUp={() => this.setState({dragEnabled: true})}
|
||||
/>
|
||||
<div
|
||||
className="tw-w-2 tw-h-2 tw-absolute tw--right-1 tw--top-1 tw-bg-blue-500"
|
||||
style={{ cursor: Cursor.SW_RESIZE }}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.props.onWidgetResizing("ne")
|
||||
this.setState({dragEnabled: false})
|
||||
}}
|
||||
onMouseLeave={() => this.setState({dragEnabled: true})}
|
||||
onMouseUp={() => this.setState({dragEnabled: true})}
|
||||
/>
|
||||
<div
|
||||
className="tw-w-2 tw-h-2 tw-absolute tw--left-1 tw--bottom-1 tw-bg-blue-500"
|
||||
style={{ cursor: Cursor.SW_RESIZE }}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.props.onWidgetResizing("sw")
|
||||
this.setState({dragEnabled: false})
|
||||
}}
|
||||
onMouseLeave={() => this.setState({dragEnabled: true})}
|
||||
onMouseUp={() => this.setState({dragEnabled: true})}
|
||||
/>
|
||||
<div
|
||||
className="tw-w-2 tw-h-2 tw-absolute tw--right-1 tw--bottom-1 tw-bg-blue-500"
|
||||
style={{ cursor: Cursor.SE_RESIZE }}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.props.onWidgetResizing("se")
|
||||
this.setState({dragEnabled: false})
|
||||
}}
|
||||
onMouseLeave={() => this.setState({dragEnabled: true})}
|
||||
onMouseUp={() => this.setState({dragEnabled: true})}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{this.renderContent()}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@ const WidgetDraggable = memo(({ widgetRef, enableDrag=true, dragElementType="wid
|
||||
onDragEnter, onDragLeave, onDrop,
|
||||
droppableTags = ["widget"], ...props }) => {
|
||||
|
||||
|
||||
// FIXME: It's not possible to move the widget ~10px because, its considered as self drop, so fix it
|
||||
// const { draggedElement, onDragStart, onDragEnd } = useDragWidgetContext()
|
||||
const { draggedElement, onDragStart, onDragEnd, overElement, setOverElement } = useDragContext()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user