added widget images

package-lock.json

@@ -18,7 +18,9 @@
         "@testing-library/user-event": "^13.5.0",
         "antd": "^5.20.0",
         "autoprefixer": "^10.4.20",
+        "dom-to-image-more": "^3.4.5",
         "fabric": "^6.1.0",
+        "file-saver": "^2.0.5",
         "postcss-cli": "^11.0.0",
         "re-resizable": "^6.9.17",
         "react": "^18.3.1",
@@ -7670,6 +7672,11 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom-to-image-more": {
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.4.5.tgz",
+      "integrity": "sha512-xLkG5idpEPgfuf5bZ82kbNnXq4U4PAB4wd7Zun7cEHrYvjolMtTQdIlheQURS8jLy07TGZeWqoTqGW6onZr0Tw=="
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -9275,6 +9282,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",

package.json

@@ -13,7 +13,9 @@
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.20.0",
     "autoprefixer": "^10.4.20",
+    "dom-to-image-more": "^3.4.5",
     "fabric": "^6.1.0",
+    "file-saver": "^2.0.5",
     "postcss-cli": "^11.0.0",
     "re-resizable": "^6.9.17",
     "react": "^18.3.1",

src/canvas/canvas.js

@@ -2,9 +2,12 @@ import React from "react"
 
 // import { DndContext } from '@dnd-kit/core'
 
-import { DeleteOutlined, EditOutlined, ReloadOutlined } from "@ant-design/icons"
+import { DeleteOutlined, EditOutlined, FileImageOutlined, ReloadOutlined } from "@ant-design/icons"
 import { Button, Tooltip, Dropdown } from "antd"
 
+import domtoimage from "dom-to-image-more"
+import { saveAs } from 'file-saver'
+
 // import Droppable from "../components/utils/droppableDnd"
 import Widget from "./widgets/base"
 import Cursor from "./constants/cursor"
@@ -291,6 +294,24 @@ class Canvas extends React.Component {
                             label: (<div onClick={() => this.deleteSelectedWidgets([selectedWidget])}><DeleteOutlined /> Delete</div>),
                             icons: <DeleteOutlined />,
                             danger: true
+                        },
+                        {
+                            type: 'divider',
+                        },
+                        {
+                            key: "snap",
+                            label: (<div onClick={() => {
+                                        domtoimage.toPng(selectedWidget.getElement(), {
+                                            width: selectedWidget.getElement().offsetWidth * 2,   // Multiply element's width by 2
+                                            height: selectedWidget.getElement().offsetHeight * 2  // Multiply element's height by 2
+                                        }).then((dataUrl) => {
+                                            saveAs(dataUrl, 'widget.png')  
+                                        }).catch((error) => {
+                                            console.error('Error capturing widget as PNg:', error)
+                                        })  
+                                    }}>
+                                    <FileImageOutlined /> Save as Image</div>),
+                            icons: <FileImageOutlined />,
                         }
                     ]
                 })

src/frameworks/tkinter/sidebarWidgets.js

@@ -1,7 +1,5 @@
 
-import Widget from "../../canvas/widgets/base"
 
-import ButtonWidget from "./assets/widgets/button.png"
 import { CheckBox, RadioButton } from "./widgets/ checkButton"
 import Button from "./widgets/button"
 import Frame from "./widgets/frame"
@@ -12,71 +10,83 @@ import OptionMenu from "./widgets/optionMenu"
 import Slider from "./widgets/slider"
 import TopLevel from "./widgets/toplevel"
 
+import MainWindowImage from "./assets/widgets/mainwindow.png"
+import TopLevelImage from "./assets/widgets/Toplevel.png"
+import FrameImage from "./assets/widgets/frame2.png"
+import LabelImage from "./assets/widgets/label.png"
+import ButtonImage from "./assets/widgets/button.png"
+import InputImage from "./assets/widgets/input.png"
+import TextAreaImage from "./assets/widgets/textarea.png"
+import SliderImage from "./assets/widgets/slider.png"
+import DropDownImage from "./assets/widgets/dropdown.png"
+import CheckButtonImage from "./assets/widgets/check.png"
+import RadioButtonImage from "./assets/widgets/radio.png"
+
 
 const TkinterSidebar = [
     {
         name: "Main window",
-        img: ButtonWidget,
+        img: MainWindowImage,
         link: "https://github.com", 
         widgetClass: MainWindow
     },
     {
         name: "Top Level",
-        img: ButtonWidget,
+        img: TopLevelImage,
         link: "https://github.com", 
         widgetClass: TopLevel
     },
     {
         name: "Frame",
-        img: ButtonWidget,
+        img: FrameImage,
         link: "https://github.com",
         widgetClass: Frame
     },
     {
         name: "Label",
-        img: ButtonWidget,
+        img: LabelImage,
         link: "https://github.com",
         widgetClass: Label
     },
     {
         name: "Button",
-        img: ButtonWidget,
+        img: ButtonImage,
         link: "https://github.com",
         widgetClass: Button
     },
     {
         name: "Entry",
-        img: ButtonWidget,
+        img: InputImage,
         link: "https://github.com",
         widgetClass: Input
     },
     {
         name: "Text",
-        img: ButtonWidget,
+        img: TextAreaImage,
         link: "https://github.com",
         widgetClass: Text
     },
     {
         name: "CheckBox",
-        img: ButtonWidget,
+        img: CheckButtonImage,
         link: "https://github.com",
         widgetClass: CheckBox
     },
     {
         name: "Radio button",
-        img: ButtonWidget,
+        img: RadioButtonImage,
         link: "https://github.com",
         widgetClass: RadioButton
     },
     {
         name: "Scale",
-        img: ButtonWidget,
+        img: SliderImage,
         link: "https://github.com",
         widgetClass: Slider
     },
     {
         name: "Option Menu",
-        img: ButtonWidget,
+        img: DropDownImage,
         link: "https://github.com",
         widgetClass: OptionMenu
     },

src/frameworks/tkinter/widgets/spinBox.js

@@ -0,0 +1,81 @@
+import Widget from "../../../canvas/widgets/base"
+import Tools from "../../../canvas/constants/tools"
+import { removeKeyFromObject } from "../../../utils/common"
+
+
+class SpinBox extends Widget{
+
+    static widgetType = "spin_box"
+    constructor(props) {
+        super(props)
+
+        this.droppableTags = null // disables drops
+
+        const newAttrs = removeKeyFromObject("layout", this.state.attrs)
+
+        this.state = {
+            ...this.state,
+            size: { width: 120, height: 40 },
+            attrs: {
+                ...newAttrs,
+                styling: {
+                    ...newAttrs.styling,
+                    foregroundColor: {
+                        label: "Foreground Color",
+                        tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
+                        value: "#000",
+                        onChange: (value) => {
+                            this.setWidgetStyling("color", value)
+                            this.setAttrValue("styling.foregroundColor", value)
+                        }
+                    }
+                },
+                placeHolder: {
+                    label: "PlaceHolder",
+                    tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
+                    toolProps: {placeholder: "text", maxLength: 100}, 
+                    value: "placeholder text",
+                    onChange: (value) => this.setAttrValue("placeHolder", value)
+                }
+
+            }
+        }
+    }
+
+    componentDidMount(){
+        super.componentDidMount()
+        this.setAttrValue("styling.backgroundColor", "#fff")
+        this.setWidgetName("Entry")
+    }
+
+    getToolbarAttrs(){
+
+        const toolBarAttrs = super.getToolbarAttrs()
+
+        return ({
+            id: this.__id,
+            widgetName: toolBarAttrs.widgetName,
+            placeHolder: this.state.attrs.placeHolder,
+            size: toolBarAttrs.size,
+
+            ...this.state.attrs,
+
+        })
+    }
+
+    renderContent(){
+        return (
+            <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
+                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetStyling}>
+                    <div className="tw-text-sm tw-text-gray-300">
+                        {this.getAttrValue("placeHolder")}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+}
+
+
+export default SpinBox