From 1714c6f0786d482682191bdde61cb91955221d74 Mon Sep 17 00:00:00 2001 From: paul Date: Fri, 13 Sep 2024 19:24:03 +0530 Subject: [PATCH] working on toolbar --- src/canvas/canvas.js | 24 +++++++++++++++--- src/canvas/constants/tools.js | 1 + src/canvas/toolbar.js | 33 ++++++++++++++++++------ src/canvas/widgets/base.js | 48 ++++++++++++++++++++++++++--------- src/components/editableDiv.js | 6 ----- src/components/header.js | 9 ++++--- src/utils/common.js | 1 - 7 files changed, 88 insertions(+), 34 deletions(-) diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index d790ae8..ba81618 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -74,6 +74,7 @@ class Canvas extends React.Component { this.fitCanvasToBoundingBox = this.fitCanvasToBoundingBox.bind(this) this.getCanvasBoundingRect = this.getCanvasContainerBoundingRect.bind(this) + this.setSelectedWidget = this.setSelectedWidget.bind(this) this.deleteSelectedWidgets = this.deleteSelectedWidgets.bind(this) this.removeWidget = this.removeWidget.bind(this) this.clearSelections = this.clearSelections.bind(this) @@ -363,6 +364,10 @@ class Canvas extends React.Component { }, this.applyTransform) } + setSelectedWidget(selectedWidget){ + this.setState({ selectedWidget: [selectedWidget] }) + } + clearSelections(){ this.getActiveObjects().forEach(widget => { widget.current?.deSelect() @@ -467,6 +472,9 @@ class Canvas extends React.Component { }), () => { }) + + if (this._onWidgetListUpdated) + this._onWidgetListUpdated([]) } removeWidget(widgetId){ @@ -474,9 +482,14 @@ class Canvas extends React.Component { // this.widgetRefs[widgetId]?.current.remove() delete this.widgetRefs[widgetId] - this.setState((prevState) => ({ - widgets: prevState.widgets.filter(widget => widget.id !== widgetId) - })) + const widgets = this.state.widgets.filter(widget => widget.id !== widgetId) + + this.setState({ + widgets: widgets + }) + + if (this._onWidgetListUpdated) + this._onWidgetListUpdated(widgets) } renderWidget(widget){ @@ -522,7 +535,10 @@ class Canvas extends React.Component { - + ) } diff --git a/src/canvas/constants/tools.js b/src/canvas/constants/tools.js index 486300a..f10073a 100644 --- a/src/canvas/constants/tools.js +++ b/src/canvas/constants/tools.js @@ -1,5 +1,6 @@ const Tools = { + INPUT: "input", COLOR_PICKER: "color_picker", EVENT_HANDLER: "event_handler", // shows a event handler with all the possible function in the dropdown } diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js index 4228aca..f3152b8 100644 --- a/src/canvas/toolbar.js +++ b/src/canvas/toolbar.js @@ -1,22 +1,32 @@ import { useEffect, useState } from "react" + +import { Input } from "antd" + import { capitalize } from "../utils/common" -function CanvasToolBar({isOpen, activeWidget}){ +/** + * + * @param {boolean} isOpen + * @param {import("./widgets/base.js").Widget} activeWidget + * @param {React.Dispatch>} setActiveWidget + * @returns + */ +function CanvasToolBar({isOpen, activeWidget, setActiveWidget}){ const [toolbarOpen, setToolbarOpen] = useState(isOpen) - const [widget, setWidget] = useState(activeWidget) - useEffect(() => { setToolbarOpen(isOpen) }, [isOpen]) - useEffect(() => { - setWidget(activeWidget) - }, [activeWidget]) - console.log("Widget type: ", widget?.getWidgetType()) + const handleWidgetNameChange = (e) => { + const updatedWidget = { ...activeWidget } // Create a shallow copy of the widget + updatedWidget?.setWidgetName(e.target.value) // Update widget's internal state + setActiveWidget(updatedWidget) // Update the state with the modified widget + } + return (

- {capitalize(`${widget?.getWidgetType() || ""}`)} + {capitalize(`${activeWidget?.getWidgetType() || ""}`)}

+
+ +
+
) diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index c02ecf9..b5a34eb 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -75,9 +75,6 @@ class Widget extends React.Component{ } this.state = { - attrs: { // attributes - // replace this with this.props - }, zIndex: 0, pos: {x: 0, y: 0}, size: { width: 100, height: 100 }, @@ -85,7 +82,27 @@ class Widget extends React.Component{ widgetName: widgetName || 'unnamed widget', // this will later be converted to variable name enableRename: false, // will open the widgets editable div for renaming resizing: false, - resizeCorner: "" + resizeCorner: "", + + attrs: { + styling: { + backgroundColor: { + tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string + value: "" + }, + foregroundColor: { + tool: Tools.COLOR_PICKER, + value: "" + }, + }, + layout: "show", // enables layout use "hide" to hide layout dropdown, takes the layout from this.layout + events: { + event1: { + tool: Tools.EVENT_HANDLER, + value: "" + } + } + }, } this.mousePress = this.mousePress.bind(this) @@ -97,6 +114,7 @@ class Widget extends React.Component{ // this.openRenaming = this.openRenaming.bind(this) this.isSelected = this.isSelected.bind(this) + this.setWidgetName = this.setWidgetName.bind(this) this.getPos = this.getPos.bind(this) this.setPos = this.setPos.bind(this) @@ -139,6 +157,10 @@ class Widget extends React.Component{ return this.constructor.widgetType } + getAttributes(){ + return this.state.attrs + } + /** * removes the element/widget */ @@ -341,6 +363,15 @@ class Widget extends React.Component{ }) } + setWidgetName(name){ + + this.setState((prev) => ({ + ...prev, + widgetName: name.length > 0 ? name : prev.widgetName, + + })) + } + renderContent(){ // throw new NotImplementedError("render method has to be implemented") return ( @@ -373,13 +404,6 @@ class Widget extends React.Component{ height: this.boundingRect.height + 5 } - const onWidgetNameChange = (value) => { - - this.setState((prev) => ({ - ...prev, - widgetName: value.length > 0 ? value : prev.widgetName - })) - } // console.log("selected: ", this.state.selected) return ( @@ -393,7 +417,7 @@ class Widget extends React.Component{ ${this.state.selected ? 'tw-border-2 tw-border-solid tw-border-blue-500' : 'tw-hidden'}`}>
- { - console.log("Event key: ", event.key) - if (event.key === "Enter"){ setIsEditable(false) } diff --git a/src/components/header.js b/src/components/header.js index 8a4a0bf..c48dca4 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,7 +1,7 @@ import { useState } from "react" -import { Select, Input } from "antd" -import { DownOutlined } from "@ant-design/icons" +import { Select, Input, Button } from "antd" +import { DownloadOutlined, DownOutlined } from "@ant-design/icons" const items = [ { @@ -29,8 +29,11 @@ function Header(props){ className="tw-min-w-[150px]" /> -
+
setProjectName(e.target.value)} placeholder="project name"/> +
diff --git a/src/utils/common.js b/src/utils/common.js index 912c755..2b658d7 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -20,6 +20,5 @@ export function removeDuplicateObjects(array, key) { * @returns */ export function capitalize(str) { - console.log("Text: ", str) return str.charAt(0).toUpperCase() + str.slice(1) } \ No newline at end of file