working on canvas and widget

src/canvas/widgets/base.js

@@ -0,0 +1,178 @@
+import React from "react"
+import { NotImplementedError } from "../../utils/errors"
+
+import Tools from "../constants/tools"
+import Layouts from "../constants/layouts"
+import Cursor from "../constants/cursor"
+
+
+function UID(){
+    return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}
+
+/**
+ * Base class to be extended
+ */
+class Widget extends React.Component{
+
+    constructor(props, _type="widget"){
+
+        super(props)
+        
+        // const _type="widget"
+        this.type = _type
+        // this id has to be unique inside the canvas, it will be set automatically and should never be changed
+        this.__id = `${_type}_${UID()}`
+        this._zIndex = 0
+
+        this._selected = false
+        this._disableResize = false
+        this._disableSelection = false
+
+        this.cursor = Cursor.POINTER
+
+        this.icon = "" // antd icon name representing this widget
+        
+        this.elementRef = React.createRef()
+
+        this.props = {
+            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.functions = {
+            "load": {"args1": "number", "args2": "string"}
+        }
+
+
+        this.layout = Layouts.PACK
+        this.boundingRect = {
+            x: 0,
+            y: 0,
+            height: 100,
+            width: 100
+        } 
+
+    }
+
+
+    setComponentAdded(added=true){
+
+
+        // this.elementRef = document.querySelector(`[data-id="${this.__id}"]`)
+
+    }
+
+    componentDidMount(){
+        this.elementRef?.addEventListener("click", this.mousePress)
+    }
+
+    componentWillUnmount(){
+        this.elementRef?.removeEventListener("click", this.mousePress)
+    }
+
+    mousePress(event){
+
+        if (!this._disableSelection){
+            this._selected = true
+
+            const widgetSelected = new CustomEvent("selection:created", {
+                detail: {
+                    event,
+                    id: this.__id,
+                    element: this
+                },
+            })
+            console.log("dispatched")
+            document.dispatchEvent(widgetSelected)
+        }
+    }
+
+    select(){
+        this._selected = true
+    }
+
+    deSelect(){
+        this._selected = false
+    }
+
+    getProps(){
+        return this.props
+    }
+
+    getWidgetFunctions(){
+        return this.functions
+    }
+
+    getId(){
+        return this.__id
+    }
+
+    renderContent(){
+        // throw new NotImplementedError("render method has to be implemented")
+        return (
+            <div className="tw-w-full tw-h-full tw-bg-red-400">
+
+            </div>
+        )
+    }
+
+    /**
+     * This is an internal methods don't override
+     * @returns {HTMLElement}
+     */
+    render(){
+        
+        let style = {
+            cursor: this.cursor,
+            top: "40px",  
+            left: "40px",  
+            width: this.boundingRect.width,
+            height: this.boundingRect.height
+        }
+
+        let selectionStyle = {
+            x: "-5px",
+            y: "-5px",
+            width: this.boundingRect.width + 5,
+            height: this.boundingRect.height + 5
+        }
+
+        return (
+            
+            <div data-id={this.__id} className="tw-relative tw-w-fit tw-h-fit" style={style}
+                >
+
+                {this.render()}
+                <div className="tw-absolute tw-bg-transparent tw-scale-[1.1] tw-opacity-35 
+                                tw-w-full tw-h-full tw-top-0 tw-border-2 tw-border-solid tw-border-black">
+                    
+                    <div className="">
+
+                    </div>
+
+                </div>
+            </div>
+        )
+
+    }
+
+}   
+
+
+export default Widget