Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added license and roadmap

Browse Source
This commit is contained in:
paul
2024-09-17 21:23:01 +05:30
parent 74119ed586
commit 2b1e3a6ee9
9 changed files with 182 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/background/dots.svg
View File

@@ -1,7 +1,7 @@
<svg width="100%" height="100%">
<pattern id="pattern-circles" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<circle id="pattern-circle" cx="10" cy="10" r="1.6257413380501518" fill="#000"></circle>
<pattern id="pattern-circles" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<circle id="pattern-circle" cx="10" cy="10" r="1.6257413380501518" fill="#4d4f4e"></circle>
</pattern>
<rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 387 B

After

Width:  |  Height:  |  Size: 390 B

41
src/canvas/canvas.js
View File

@@ -17,13 +17,16 @@ import { removeDuplicateObjects } from "../utils/common"
import { WidgetContext } from './context/widgetContext'
// import {ReactComponent as DotsBackground} from "../assets/background/dots.svg"
import DotsBackground from "../assets/background/dots.svg"
// import DotsBackground from "../assets/background/dots.svg"
import {ReactComponent as DotsBackground} from "../assets/background/dots.svg"
import DroppableWrapper from "../components/draggable/droppable"
import { ActiveWidgetContext, ActiveWidgetProvider, withActiveWidget } from "./activeWidgetContext"
import { DragWidgetProvider } from "./widgets/draggableWidgetContext"
// const DotsBackground = require("../assets/background/dots.svg")
const CanvasModes = {
DEFAULT: 0,
PAN: 1,
@@ -43,8 +46,6 @@ class Canvas extends React.Component {
this.canvasRef = React.createRef()
this.canvasContainerRef = React.createRef()
this.widgetRefs = {} // stores the actual refs to the widgets inside the canvas
this.currentMode = CanvasModes.DEFAULT
@@ -57,9 +58,10 @@ class Canvas extends React.Component {
}
// this._contextMenuItems = []
this.widgetRefs = {} // stores the actual refs to the widgets inside the canvas {id: ref, id2, ref2...}
this.state = {
widgets: [], // don't store the refs directly here, instead store it in widgetRef, store the widget type here
widgets: [], // stores the mapping to widgetRefs, stores id and WidgetType, later used for rendering [{id: , widgetType: WidgetClass}]
zoom: 1,
isPanning: false,
currentTranslate: { x: 0, y: 0 },
@@ -107,7 +109,7 @@ class Canvas extends React.Component {
componentDidMount() {
this.initEvents()
this.addWidget(Widget)
this.createWidget(Widget)
}
@@ -298,13 +300,13 @@ class Canvas extends React.Component {
}else{
// update the widgets position
this.state.selectedWidgets.forEach(widget => {
const {x, y} = widget.getPos()
// this.state.selectedWidgets.forEach(widget => {
// const {x, y} = widget.getPos()
const newPosX = x + (deltaX/this.state.zoom) // account for the zoom, since the widget is relative to canvas
const newPosY = y + (deltaY/this.state.zoom) // account for the zoom, since the widget is relative to canvas
// widget.setPos(newPosX, newPosY)
})
// const newPosX = x + (deltaX/this.state.zoom) // account for the zoom, since the widget is relative to canvas
// const newPosY = y + (deltaY/this.state.zoom) // account for the zoom, since the widget is relative to canvas
// widget.setPos(newPosX, newPosY)
// })
}
@@ -450,9 +452,9 @@ class Canvas extends React.Component {
/**
*
* @param {Widget} widgetComponentType - don't pass <Widget /> instead pass Widget object
* @param {Widget} widgetComponentType - don't pass <Widget /> instead pass Widget object/class
*/
addWidget(widgetComponentType, callback){
createWidget(widgetComponentType, callback){
const widgetRef = React.createRef()
const id = `${widgetComponentType.widgetType}_${UID()}`
@@ -573,7 +575,7 @@ class Canvas extends React.Component {
const container = draggedElement.getAttribute("data-container")
console.log("Dropped on canvas",)
// console.log("Dropped on canvas",)
// const canvasContainerRect = this.getCanvasContainerBoundingRect()
const canvasRect = this.canvasRef.current.getBoundingClientRect()
@@ -586,7 +588,7 @@ class Canvas extends React.Component {
if (container === "sidebar"){
// if the widget is being dropped from the sidebar, use the info to create the widget first
this.addWidget(Widget, ({id, widgetRef}) => {
this.createWidget(Widget, ({id, widgetRef}) => {
widgetRef.current.setPos(finalPosition.x, finalPosition.y)
})
}else if (container === "canvas"){
@@ -633,12 +635,19 @@ class Canvas extends React.Component {
ref={this.canvasContainerRef}
style={{
transition: " transform 0.3s ease-in-out",
backgroundImage: `url('${DotsBackground}')`,
backgroundImage: `url(${DotsBackground})`,
backgroundSize: 'cover', // Ensure proper sizing if needed
backgroundRepeat: 'no-repeat',
}}
tabIndex={0} // allow focus
>
<DotsBackground
style={{
width: '100%',
height: '100%',
backgroundSize: 'cover'
}}
/>
{/* Canvas */}
<div data-canvas className="tw-w-full tw-h-full tw-absolute tw-top-0 tw-select-none
"

1
src/canvas/widgets/widgetDragDrop.js
View File

@@ -3,6 +3,7 @@ import { useDragWidgetContext } from "./draggableWidgetContext"
import { useDragContext } from "../../components/draggable/draggableContext"
// FIXME: sometimes even after drag end the showDroppable is visible
/**
* @param {} - widgetRef - the widget ref for your widget
* @param {boolean} - enableDraggable - should the widget be draggable