diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 5326353..3098ebf 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -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 diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 2c28ca2..c7b752d 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -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 ( -
+
{this.props.children}
) @@ -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 (
+ {this.renderContent()} { // show drop style on drag hover @@ -659,7 +653,7 @@ class Widget extends React.Component { height: "calc(100% + 10px)", } } - > + >
} @@ -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})} />
{ + e.stopPropagation() + e.preventDefault() this.props.onWidgetResizing("ne") this.setState({dragEnabled: false}) }} - onMouseLeave={() => this.setState({dragEnabled: true})} + onMouseUp={() => this.setState({dragEnabled: true})} />
{ + e.stopPropagation() + e.preventDefault() this.props.onWidgetResizing("sw") this.setState({dragEnabled: false}) }} - onMouseLeave={() => this.setState({dragEnabled: true})} + onMouseUp={() => this.setState({dragEnabled: true})} />
{ + e.stopPropagation() + e.preventDefault() this.props.onWidgetResizing("se") this.setState({dragEnabled: false}) }} - onMouseLeave={() => this.setState({dragEnabled: true})} + onMouseUp={() => this.setState({dragEnabled: true})} />
- {this.renderContent()}
diff --git a/src/canvas/widgets/widgetDragDrop.js b/src/canvas/widgets/widgetDragDrop.js index 42ed6b2..65b5a30 100644 --- a/src/canvas/widgets/widgetDragDrop.js +++ b/src/canvas/widgets/widgetDragDrop.js @@ -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()