fixed toolbar animation

notes.md

@@ -1,5 +1,5 @@
 ### State management in react is a f*king mess
-### Update to TypeScript
+### Migrate to TypeScript
 
 
 ### Don't use delete keyword to delete keys from object, it becomes hard to debug

roadmap.md

@@ -10,7 +10,8 @@ Any feature that has 👑 beside it, is meant only for [premium users](./readme.
 - [ ] Documentation
 - [ ] Tree view for elements on the canvas
 - [ ] Add text editor to support event handlers
-- [ ] Support more widgets
+- [ ] Support for Event handlers
+- [ ] Support more pre-built widgets such as ttk.Notebook, multi-page etc.
 - [ ] Rewrite DND for better feedback - (swappy/react-dnd-kit/ GSAP draggable)
 - [ ] Duplicate widgets
 
@@ -21,6 +22,7 @@ Any feature that has 👑 beside it, is meant only for [premium users](./readme.
 - [ ] Load UI files 👑
 - [ ] Light/Dark theme 👑
 - [ ] Run the preview 👑
+- [ ] Load templates 👑
 
 ### 2.0.0
 - [ ] Support for more third party plugins
@@ -32,5 +34,7 @@ Any feature that has 👑 beside it, is meant only for [premium users](./readme.
 
 
 ### 3.0.0
+- [ ] Allow 3rd party UI plugin developers
+- [ ] Allow Templates to be sharable
 - [ ] Node based System  (eg: like blender/ unity node system)
 - [ ] Support for PySide / PyQt 👑 (commercial license only)

src/canvas/canvas.js

@@ -77,7 +77,7 @@ class Canvas extends React.Component {
             contextMenuItems: [],
             selectedWidget: null,
 
-            toolbarOpen: true,
+            toolbarOpen: false,
             toolbarAttrs: null
         }
 
@@ -240,7 +240,8 @@ class Canvas extends React.Component {
                     // console.log("selected widget", selectedWidget.getToolbarAttrs(), selectedWidget, this.state.selectedWidget)
                     this.setState({
                         selectedWidget: selectedWidget,
-                        toolbarAttrs: selectedWidget.getToolbarAttrs()
+                        toolbarAttrs: selectedWidget.getToolbarAttrs(),
+                        toolbarOpen: true
                     })
 
 
@@ -271,7 +272,7 @@ class Canvas extends React.Component {
 
             this.setState({
                 contextMenuItems: [],
-                toolbarOpen: true
+                // toolbarOpen: true
             })
             // this.setState({
             //     showContextMenu: false
@@ -538,7 +539,7 @@ class Canvas extends React.Component {
         this.setState({
             selectedWidget: null,
             toolbarAttrs: null,
-            // toolbarOpen: 
+            toolbarOpen: false
         })
 
     }
@@ -649,6 +650,7 @@ class Canvas extends React.Component {
       handleDropEvent = (e, draggedElement, widgetClass = null) => {
 
         e.preventDefault()
+        console.log("Drop event")
 
         this.setState({ isWidgetDragging: false })
 
@@ -1043,7 +1045,7 @@ class Canvas extends React.Component {
     render() {
 
         return (
-            <div className="tw-relative tw-flex tw-w-full tw-h-full tw-max-h-[100vh]">
+            <div className="tw-relative tw-overflow-hidden tw-flex tw-w-full tw-h-full tw-max-h-[100vh]">
 
                 <div className="tw-absolute tw-p-2 tw-bg-white tw-z-10 tw-min-w-[100px] tw-h-[50px] tw-gap-2 
                                     tw-top-4 tw-place-items-center tw-right-4 tw-shadow-md tw-rounded-md tw-flex">

src/canvas/toolbar.js

@@ -282,10 +282,15 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
 
     return (
         <div
-            className={`tw-absolute tw-top-20 tw-right-5 tw-bg-white ${toolbarOpen ? "tw-w-[280px]" : "tw-w-0"
-                } tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg 
-                             tw-transition-transform tw-duration-75 tw-overflow-x-hidden
-                             tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto`}
+            className={`tw-absolute tw-top-20 tw-right-5 tw-bg-white 
+                ${toolbarOpen ? "tw-translate-x-0" : "tw-translate-x-full"} 
+                tw-w-[280px] tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg 
+                tw-transition-transform tw-duration-[0.3s] tw-overflow-x-hidden
+                tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto`}
+
+                style={{
+                    transform: toolbarOpen ? "translateX(0)" : "translateX(calc(100% + 50px))"
+                }}
         >
             <h3 className="tw-text-lg tw-text-center">
                 {capitalize(`${widgetType || ""}`).replace(/_/g, " ")}

src/components/cards.js

@@ -29,7 +29,7 @@ export function SidebarWidgetCard({ name, img, url, license, widgetClass, innerR
             <DraggableWrapper data-container={"sidebar"} 
                                 dragElementType={widgetClass.widgetType} 
                                 dragWidgetClass={widgetClass}
-                                className="tw-cursor-pointer tw-w-fit tw-h-fit">
+                                className="tw-cursor-pointer tw-w-fit tw-bg-white tw-h-fit">
                 
                 <div ref={innerRef} className="tw-select-none  tw-h-[200px] tw-w-[230px] tw-flex tw-flex-col 
                                                 tw-rounded-md tw-overflow-hidden 

src/components/draggable/droppable.js

@@ -18,6 +18,8 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
 
     const handleDragEnter = (e) => {
         
+        console.log("Drag enter")
+
         if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")){
             // if the drag is starting from outside (eg: file drop) or if drag doesn't exist
             return

src/components/modals.js

@@ -18,7 +18,9 @@ export const ButtonModal = ({ message, title, okText="OK", onOk, onCancel, okBut
         setIsModalOpen(true)
     }
 
-    const handleOk = () => {
+    const handleOk = (e) => {
+        e.stopPropagation()
+
         setIsModalOpen(false)
         if (onOk){
             onOk()