From d5ba3572655e13b1c6598ac82a72819bffa90c27 Mon Sep 17 00:00:00 2001 From: paul Date: Sat, 28 Sep 2024 21:50:30 +0530 Subject: [PATCH] added image to label and duplicate names will be renamed on upload --- src/canvas/toolbar.js | 14 +++++- .../tkinter/plugins/analogTimepicker.js | 2 +- src/frameworks/tkinter/plugins/pandasTable.js | 2 +- src/frameworks/tkinter/plugins/videoPlayer.js | 7 ++- src/frameworks/tkinter/widgets/label.js | 43 ++++++++++++++++++- src/sidebar/uploadsContainer.js | 23 +++++++++- 6 files changed, 83 insertions(+), 8 deletions(-) diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js index a8e7c74..3af04b2 100644 --- a/src/canvas/toolbar.js +++ b/src/canvas/toolbar.js @@ -96,6 +96,11 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => { } } + function getUploadFileFromName(name){ + + return uploadedAssets.find(val => val.name === name) + } + const renderUploadDropDown = (val, filter) => { @@ -114,8 +119,13 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => { placeholder="select content" showSearch className="tw-w-full" - value={val.value} - onChange={(value) => handleChange(value, val.onChange)} + value={val.value?.name || ""} + onChange={(value) => { + + const file = getUploadFileFromName(value) + + handleChange({name: value, previewUrl: file.previewUrl}, val.onChange) + }} filterOption={(input, option) => (option?.value ?? '').toLowerCase().includes(input.toLowerCase()) } diff --git a/src/frameworks/tkinter/plugins/analogTimepicker.js b/src/frameworks/tkinter/plugins/analogTimepicker.js index 07610c3..5352464 100644 --- a/src/frameworks/tkinter/plugins/analogTimepicker.js +++ b/src/frameworks/tkinter/plugins/analogTimepicker.js @@ -19,7 +19,7 @@ const Themes = { class AnalogTimePicker extends TkinterBase{ - static widgetType = "analogue_timepicker" + static widgetType = "analog_timepicker" static requiredImports = [ ...TkinterBase.requiredImports, diff --git a/src/frameworks/tkinter/plugins/pandasTable.js b/src/frameworks/tkinter/plugins/pandasTable.js index 36edeb2..a282690 100644 --- a/src/frameworks/tkinter/plugins/pandasTable.js +++ b/src/frameworks/tkinter/plugins/pandasTable.js @@ -173,7 +173,7 @@ class PandasTable extends TkinterBase{ } if (defaultTable){ - code.push(`${variableName}.importCSV(${getPythonAssetPath(defaultTable, "text/csv")})`) + code.push(`${variableName}.importCSV(${getPythonAssetPath(defaultTable.name, "text/csv")})`) } return [ diff --git a/src/frameworks/tkinter/plugins/videoPlayer.js b/src/frameworks/tkinter/plugins/videoPlayer.js index ad012cc..ccf03ec 100644 --- a/src/frameworks/tkinter/plugins/videoPlayer.js +++ b/src/frameworks/tkinter/plugins/videoPlayer.js @@ -65,13 +65,13 @@ class VideoPlayer extends TkinterBase{ const defaultVideo = this.getAttrValue("defaultVideo") const play = this.getAttrValue("play") - + const code = [ `${variableName} = TkinterVideo(master=${parent}, scaled=True)`, ] if (defaultVideo){ - code.push(`${variableName}.load(${getPythonAssetPath(defaultVideo, "video")})`) + code.push(`${variableName}.load(${getPythonAssetPath(defaultVideo.name, "video")})`) } if (play){ @@ -100,6 +100,9 @@ class VideoPlayer extends TkinterBase{ } renderContent(){ + + // const defaultVideo = this.getAttrValue("defaultVideo") + return (
diff --git a/src/frameworks/tkinter/widgets/label.js b/src/frameworks/tkinter/widgets/label.js index 470aa65..27c512f 100644 --- a/src/frameworks/tkinter/widgets/label.js +++ b/src/frameworks/tkinter/widgets/label.js @@ -1,5 +1,6 @@ import Tools from "../../../canvas/constants/tools" import { convertObjectToKeyValueString } from "../../../utils/common" +import { getPythonAssetPath } from "../../utils/pythonFilePath" import { TkinterWidgetBase } from "./base" @@ -7,6 +8,7 @@ class Label extends TkinterWidgetBase{ static widgetType = "label" + constructor(props) { super(props) @@ -45,14 +47,45 @@ class Label extends TkinterWidgetBase{ } + getImports(){ + const imports = super.getImports() + + if (this.getAttrValue("imageUpload")) + imports.push("import os", "from PIL import Image, ImageTk", ) + + return imports + } + + getRequirements(){ + const requirements = super.getImports() + + if (this.getAttrValue("imageUpload")) + requirements.push(`pillow`) + + return requirements + } generateCode(variableName, parent){ + const labelText = this.getAttrValue("labelWidget") const config = convertObjectToKeyValueString(this.getConfigCode()) + const image = this.getAttrValue("imageUpload") + let labelInitialization = `tk.Label(master=${parent}, text="${labelText}")` + + const code = [] + + if (image.name){ + code.push(`${variableName}_img = Image.open("${getPythonAssetPath(image.name, "image")}")`) + code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`) + labelInitialization = `tk.Label(master=${parent}, image="${variableName}_img", text="${labelText}")` + } + + code.push("\n") + code.push(labelInitialization) return [ - `${variableName} = tk.Label(master=${parent}, text="${labelText}")`, + ...code, `${variableName}.config(${config})`, `${variableName}.${this.getLayoutCode()}` ] @@ -74,11 +107,19 @@ class Label extends TkinterWidgetBase{ } renderContent(){ + + const image = this.getAttrValue("imageUpload") + return (
{/* {this.props.children} */} + { + image && ( + + ) + }
{this.getAttrValue("labelWidget")}
diff --git a/src/sidebar/uploadsContainer.js b/src/sidebar/uploadsContainer.js index 0c6cea5..351a818 100644 --- a/src/sidebar/uploadsContainer.js +++ b/src/sidebar/uploadsContainer.js @@ -75,9 +75,25 @@ function UploadsContainer() { function handleDelete(file){ // remove the file from the asset on delete setUploadedAssets(prev => prev.filter(val => val.uid !== file.uid)) - } + function generateUniqueFileName(fileName) { + const existingFiles = uploadedAssets.map(asset => asset.name) + let uniqueName = fileName + let counter = 1 + + // if a file with the same name exists, append a counter to the file name + while (existingFiles.includes(uniqueName)) { + const nameWithoutExtension = fileName.replace(/\.[^/.]+$/, "") // Remove extension + const extension = fileName.split('.').pop() // Get extension + uniqueName = `${nameWithoutExtension} (${counter}).${extension}` + counter++ + } + + return uniqueName + } + + return (
{ setDragEnter(true) }} @@ -109,11 +125,16 @@ function UploadsContainer() { if (fileType === "image" || fileType === "video"){ previewUrl = URL.createObjectURL(info.file.originFileObj) } + + // Check if a file with the same name already exists, and generate a unique name + const uniqueFileName = generateUniqueFileName(info.file.name) + const newFileData = { ...info.file, previewUrl, fileType, + name: uniqueFileName } // setUploadData(prev => [newFileData, ...prev])