{/* ${this.state.isDragging ? "tw-pointer-events-none" : "tw-pointer-events-auto"} */}
{
e.stopPropagation()
diff --git a/src/canvas/widgets/widgetDragDrop.js b/src/canvas/widgets/widgetDragDrop.js
index 6571d53..58557a5 100644
--- a/src/canvas/widgets/widgetDragDrop.js
+++ b/src/canvas/widgets/widgetDragDrop.js
@@ -16,7 +16,6 @@ const WidgetDraggable = memo(({ widgetRef, enableDrag=true, dragElementType="wid
onDragEnter, onDragLeave, onDrop, style={},
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()
@@ -61,7 +60,6 @@ const WidgetDraggable = memo(({ widgetRef, enableDrag=true, dragElementType="wid
const dragEleType = draggedElement.getAttribute("data-draggable-type")
// console.log("Drag entering...", overElement === e.currentTarget)
- // FIXME: the outer widget shouldn't be swallowed by inner widget
if (draggedElement === widgetRef.current){
// prevent drop on itself, since the widget is invisible when dragging, if dropped on itself, it may consume itself
return
diff --git a/src/components/cards.js b/src/components/cards.js
index 8526c9a..38f18a4 100644
--- a/src/components/cards.js
+++ b/src/components/cards.js
@@ -5,9 +5,10 @@ import { FileImageOutlined, GithubOutlined, GitlabOutlined, LinkOutlined,
AudioOutlined, VideoCameraOutlined,
FileTextOutlined} from "@ant-design/icons"
import DraggableWrapper from "./draggable/draggable"
+import { useDragContext } from "./draggable/draggableContext"
-export function DraggableWidgetCard({ name, img, url, innerRef}){
+export function SidebarWidgetCard({ name, img, url, widgetClass, innerRef}){
const urlIcon = useMemo(() => {
if (url){
@@ -29,6 +30,7 @@ export function DraggableWidgetCard({ name, img, url, innerRef}){
//
-
{ file.fileType === "image" &&
@@ -111,7 +113,7 @@ export function DraggableAssetCard({file}){
}
-
{file.name}
+
{file.name}
)
diff --git a/src/components/draggable/draggable.js b/src/components/draggable/draggable.js
index 13e7ad8..1050e7b 100644
--- a/src/components/draggable/draggable.js
+++ b/src/components/draggable/draggable.js
@@ -7,7 +7,7 @@ import { useDragContext } from "./draggableContext"
* @param {string} - dragElementType - this will set the data-draggable-type which can be accessed on droppable to check if its allowed or not
* @returns
*/
-const DraggableWrapper = memo(({dragElementType, className, children, ...props}) => {
+const DraggableWrapper = memo(({dragElementType, dragWidgetClass=null, className, children, ...props}) => {
const { onDragStart, onDragEnd } = useDragContext()
@@ -20,10 +20,7 @@ const DraggableWrapper = memo(({dragElementType, className, children, ...props})
const handleDragStart = (event) => {
// event.dataTransfer.setData("text/plain", "")
-
- if (onDragStart)
- onDragStart(draggableRef?.current)
-
+ onDragStart(draggableRef?.current, dragWidgetClass)
}
diff --git a/src/components/draggable/draggableContext.js b/src/components/draggable/draggableContext.js
index b6f070d..4925b6d 100644
--- a/src/components/draggable/draggableContext.js
+++ b/src/components/draggable/draggableContext.js
@@ -1,4 +1,6 @@
import React, { createContext, useContext, useState } from 'react'
+import { isSubClassOfWidget } from '../../utils/widget'
+// import Widget from '../../canvas/widgets/base'
export const DragContext = createContext()
@@ -9,16 +11,25 @@ export const DragProvider = ({ children }) => {
const [draggedElement, setDraggedElement] = useState(null)
const [overElement, setOverElement] = useState(null) // the element the dragged items is over
- const onDragStart = (element) => {
+ const [widgetClass, setWidgetClass] = useState(null) // helper to help pass the widget type from sidebar to canvas
+
+ const onDragStart = (element, widgetClass=null) => {
setDraggedElement(element)
+
+ if (widgetClass && !isSubClassOfWidget(widgetClass))
+ throw new Error("widgetClass must inherit from the Widget base class")
+
+ setWidgetClass(() => widgetClass) // store the class so later it can be passed to the canvas from sidebar
}
const onDragEnd = () => {
setDraggedElement(null)
+ setWidgetClass(null)
}
return (
-
+
{children}
)
diff --git a/src/components/draggable/droppable.js b/src/components/draggable/droppable.js
index 40765f7..eb7c9bc 100644
--- a/src/components/draggable/droppable.js
+++ b/src/components/draggable/droppable.js
@@ -5,7 +5,7 @@ import { useDragContext } from "./draggableContext"
const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) => {
- const { draggedElement, overElement, setOverElement } = useDragContext()
+ const { draggedElement, overElement, setOverElement, widgetClass } = useDragContext()
const [showDroppable, setShowDroppable] = useState({
show: false,
@@ -53,7 +53,7 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
})
if(onDrop){
- onDrop(e, draggedElement)
+ onDrop(e, draggedElement, widgetClass)
}
}
diff --git a/src/frameworks/tkinter/assets/widgets/button.png b/src/frameworks/tkinter/assets/widgets/button.png
new file mode 100644
index 0000000..2d45182
Binary files /dev/null and b/src/frameworks/tkinter/assets/widgets/button.png differ
diff --git a/src/frameworks/tkinter/sidebarWidgets.js b/src/frameworks/tkinter/sidebarWidgets.js
new file mode 100644
index 0000000..b60ac4a
--- /dev/null
+++ b/src/frameworks/tkinter/sidebarWidgets.js
@@ -0,0 +1,41 @@
+
+import Widget from "../../canvas/widgets/base"
+
+import ButtonWidget from "./assets/widgets/button.png"
+
+
+const TkinterSidebar = [
+ {
+ name: "Main window",
+ img: ButtonWidget,
+ link: "https://github.com",
+ widgetClass: Widget
+ },
+ {
+ name: "Top Level",
+ img: ButtonWidget,
+ link: "https://github.com",
+ widgetClass: Widget
+ },
+ {
+ name: "Frame",
+ img: ButtonWidget,
+ link: "https://github.com",
+ widgetClass: Widget
+ },
+ {
+ name: "Button",
+ img: ButtonWidget,
+ link: "https://github.com",
+ widgetClass: Widget
+ },
+ {
+ name: "Input",
+ img: ButtonWidget,
+ link: "https://github.com",
+ widgetClass: Widget
+ },
+]
+
+
+export default TkinterSidebar
\ No newline at end of file
diff --git a/src/sidebar/widgetsContainer.js b/src/sidebar/widgetsContainer.js
index 15c5bd5..b755e8a 100644
--- a/src/sidebar/widgetsContainer.js
+++ b/src/sidebar/widgetsContainer.js
@@ -2,11 +2,12 @@ import { useEffect, useMemo, useState } from "react"
import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons"
-import {DraggableWidgetCard} from "../components/cards"
+import {SidebarWidgetCard} from "../components/cards"
import ButtonWidget from "../assets/widgets/button.png"
import { filterObjectListStartingWith } from "../utils/filter"
+import Widget from "../canvas/widgets/base"
/**
@@ -14,56 +15,30 @@ import { filterObjectListStartingWith } from "../utils/filter"
* @param {function} onWidgetsUpdate - this is a callback that will be called once the sidebar is populated with widgets
* @returns
*/
-function WidgetsContainer({onWidgetsUpdate}){
+function WidgetsContainer({sidebarContent, onWidgetsUpdate}){
- const widgets = useMemo(() => {
- return [
- {
- name: "TopLevel",
- img: ButtonWidget,
- link: "https://github.com",
- // widgetType: Widget
- },
- {
- name: "Frame",
- img: ButtonWidget,
- link: "https://github.com"
- },
- {
- name: "Button",
- img: ButtonWidget,
- link: "https://github.com"
- },
- {
- name: "Input",
- img: ButtonWidget,
- link: "https://github.com"
- },
- ]
- }, [])
const [searchValue, setSearchValue] = useState("")
- const [widgetData, setWidgetData] = useState(widgets)
+ const [widgetData, setWidgetData] = useState(sidebarContent)
useEffect(() => {
- setWidgetData(widgets)
+ setWidgetData(sidebarContent)
+ // if (onWidgetsUpdate){
+ // onWidgetsUpdate(widgets)
+ // }
- if (onWidgetsUpdate){
- onWidgetsUpdate(widgets)
- }
-
- }, [widgets])
+ }, [sidebarContent])
useEffect(() => {
if (searchValue.length > 0){
- const searchData = filterObjectListStartingWith(widgets, "name", searchValue)
+ const searchData = filterObjectListStartingWith(sidebarContent, "name", searchValue)
setWidgetData(searchData)
}else{
- setWidgetData(widgets)
+ setWidgetData(sidebarContent)
}
}, [searchValue])
@@ -95,10 +70,11 @@ function WidgetsContainer({onWidgetsUpdate}){
{
widgetData.map((widget, index) => {
return (
-
)
diff --git a/src/utils/widget.js b/src/utils/widget.js
new file mode 100644
index 0000000..f839b39
--- /dev/null
+++ b/src/utils/widget.js
@@ -0,0 +1,16 @@
+import Widget from "../canvas/widgets/base"
+
+// checks if the object is instance is instance of widget class
+export const isSubClassOfWidget = (_class) => {
+
+ return Widget.isPrototypeOf(_class) || _class === Widget
+}
+
+
+
+export const isInstanceOfWidget = (_class) => {
+
+ console.log("Widget is instance of Object: ", _class)
+
+ return _class instanceof Widget
+}