changed gallery from row to grid view, updated property panel(flet ui)

webui/flet/scripts/flet_asset_manager.py

@@ -25,6 +25,9 @@ class AssetManager(ft.Container):
 	def add_blank_layer(self, e):
 		self.layer_panel.add_blank_layer(e)
 
+	def add_image_as_layer(self, image):
+		self.layer_panel.add_image_as_layer(image)
+
 	def add_images_as_layers(self, images):
 		self.layer_panel.add_images_as_layers(images)
 

webui/flet/scripts/flet_gallery_window.py

@@ -28,47 +28,30 @@ class GalleryWindow(ft.AlertDialog):
 	def get_gallery_images(self, gallery_name):
 		return flet_utils.get_gallery_images(gallery_name)
 
+	def select_image(self, e):
+		if e.control.border :
+			e.control.border = None
+			if e.control.image in self.selected_images:
+				self.selected_images.remove(e.control.image)
+			e.control.update()
+		else:
+			e.control.border = ft.border.all(2, e.page.tertiary_color)
+			self.selected_images.append(e.control.image)
+			e.control.update()
 
 class GalleryDisplay(ft.Container):
 	def get_gallery_display(self, gallery_name):
-		self.content = ft.Stack(
+		self.content = ft.GridView(
-				[
+				controls = None,
-						ft.Row(
+				padding = 0,
-								controls = None,
+				runs_count = 3,
-								wrap = False,
+				run_spacing = 12,
-								scroll = 'always',
+				spacing = 12,
-								expand = True,
+				expand = True,
-						),
-						ft.Column(
-								controls = [
-										ft.Row(
-												controls = [
-														ft.IconButton(
-																height = self.height * 0.5,
-																icon_size = 50,
-																content = ft.Icon(ft.icons.ARROW_CIRCLE_LEFT_OUTLINED),
-																tooltip = 'previous image',
-																on_click = None,
-														),
-														ft.IconButton(
-																height = self.height * 0.5,
-																icon_size = 50,
-																content = ft.Icon(ft.icons.ARROW_CIRCLE_RIGHT_OUTLINED),
-																tooltip = 'next image',
-																on_click = None,
-														),
-												],
-												expand = True,
-												alignment = 'spaceBetween',
-										),
-								],
-								alignment = 'center',
-						),
-				],
 		)
 		gallery = gallery_window.get_gallery_images(gallery_name)
 		if not gallery:
-			self.content.controls[0].controls.append(
+			self.content.controls.append(
 					ft.Image(
 							src = '/images/chickens.jpg',
 							tooltip = 'Nothing here but us chickens!',
@@ -77,30 +60,37 @@ class GalleryDisplay(ft.Container):
 			)
 			return
 
-		for i in range(len(gallery)):
+		for image in gallery:
-			image = gallery[i]
+			gallery_image = GalleryImage(
-			image_name = list(image.keys())[0]
+					content = ft.Image(
-			image_path = image[image_name]['img_path']
+							src = image.path,
-			image_data = None
+							tooltip = image.filename,
-			if 'info_path' in image[image_name]:
+							width = image.width,
-				image_data = image[image_name]['info_path']
+							height = image.height,
-			self.content.controls[0].controls.append(
+							gapless_playback = True,
-					ft.Container(
+					),
-							content = ft.Image(
+					image_fit = ft.ImageFit.CONTAIN,
-									src = image_path,
+					height = image.height,
-									tooltip = image_name,
+					width = image.width,
-									gapless_playback = True,
+					padding = 0,
-							),
+					margin = 0,
-							image_fit = ft.ImageFit.CONTAIN,
+					border = None,
-							padding = 0,
+					on_click = gallery_window.select_image
-							margin = 0,
-							on_click =
-					)
 			)
+			gallery_image.image = image
+			self.content.controls.append(gallery_image)
 
+class GalleryImage(ft.Container):
+	pass
 
 def add_as_new_layer(e):
-	e.page.asset_manager.add_image_as_layer(gallery_window.selected_image)
+	if gallery_window.selected_images:
+		e.page.asset_manager.add_images_as_layers(gallery_window.selected_images)
+		gallery_window.selected_images.clear()
+		for tab in gallery_window.content.content.tabs:
+			for image in tab.content.controls:
+				image.border = None
+		tab.update()
 
 def save_to_disk(e):
 	pass
@@ -159,4 +149,4 @@ gallery_window = GalleryWindow(
 
 gallery_window.uploads_gallery = uploads_gallery
 gallery_window.outputs_gallery = outputs_gallery
-gallery_window.selected_image = None
+gallery_window.selected_images = []

webui/flet/scripts/flet_property_manager.py

@@ -22,6 +22,10 @@ class PropertyManager(ft.Container):
 		self.property_panel.preview.width = self.page.right_panel_width
 		self.property_panel.preview_dragbar.content.content.height = self.page.divider_height
 		self.property_panel.preview_dragbar.content.content.color = self.page.tertiary_color
+		self.property_panel.canvas_properties_dragbar.content.content.height = self.page.divider_height
+		self.property_panel.canvas_properties_dragbar.content.content.color = self.page.tertiary_color
+		self.property_panel.layer_properties_dragbar.content.content.height = self.page.divider_height
+		self.property_panel.layer_properties_dragbar.content.content.color = self.page.tertiary_color
 
 	def set_tab_text_size(self, size):
 		for tab in self.tabs:
@@ -48,8 +52,15 @@ class PropertyManager(ft.Container):
 
 class PropertyPanel(ft.Container):
 	def resize_preview(self, e):
-		self.page.preview_height = max(200, self.page.preview_height + e.delta_y)
+		self.preview.height = max(200, self.preview.height + e.delta_y)
-		self.preview.height = self.page.preview_height
+		self.update()
+
+	def resize_canvas_properties(self, e):
+		self.canvas_properties.height = max(50, self.canvas_properties.height + e.delta_y)
+		self.update()
+
+	def resize_layer_properties(self, e):
+		self.layer_properties.height = max(50, self.layer_properties.height + e.delta_y)
 		self.update()
 
 preview_pane = ft.Container(
@@ -78,17 +89,156 @@ preview_dragbar = ft.GestureDetector(
 		),
 )
 
+def get_canvas_properties(e):
+	return ft.Column(
+			controls = [
+				ft.Row(
+						controls = [
+							ft.TextField(
+									label = 'Width',
+									value = e.page.canvas_size[0],
+									text_align = 'center',
+									content_padding = 0,
+									expand = 1,
+							),
+							ft.TextField(
+									label = 'Height',
+									value = e.page.canvas_size[1],
+									text_align = 'center',
+									content_padding = 0,
+									expand = 1,
+							),
+						],
+				),
+			],
+	)
+
+def open_close_canvas_properties(e):
+	if canvas_property_header.open:
+		e.control.icon = ft.icons.ARROW_RIGHT
+		e.control.icon_color = None
+		canvas_property_header.open = False
+		canvas_property_header.controls.pop()
+		canvas_property_header.update()
+	else:
+		e.control.icon = ft.icons.ARROW_DROP_DOWN
+		e.control.icon_color = e.page.tertiary_color
+		canvas_property_header.open = True
+		canvas_property_header.controls.append(get_canvas_properties(e))
+		canvas_property_header.update()
+
+canvas_property_header = ft.Column(
+		controls = [
+			ft.TextButton(
+					text = "Canvas Properties",
+					icon = ft.icons.ARROW_RIGHT,
+					on_click = open_close_canvas_properties,
+			),
+		],
+		height = 50,
+)
+
+canvas_property_header.open = False
+
+def resize_canvas_properties(e):
+	property_panel.resize_canvas_properties(e)
+
+canvas_property_dragbar = ft.GestureDetector(
+		mouse_cursor = ft.MouseCursor.RESIZE_ROW,
+		drag_interval = 50,
+		on_pan_update = resize_canvas_properties,
+		content = ft.Container(
+				content = ft.Divider(),
+				margin = 0,
+				padding = 0,
+		),
+)
+
+def get_layer_properties(e):
+	return ft.Column(
+			controls = [
+				ft.Row(
+						controls = [
+							ft.TextField(
+									label = 'Width',
+									value = e.page.active_layer.image.width,
+									text_align = 'center',
+									content_padding = 0,
+									expand = 1,
+							),
+							ft.TextField(
+									label = 'Height',
+									value = e.page.active_layer.image_height,
+									text_align = 'center',
+									content_padding = 0,
+									expand = 1,
+							),
+						],
+				),
+			],
+	)
+
+def open_close_layer_properties(e):
+	if layer_property_header.open:
+		e.control.icon = ft.icons.ARROW_RIGHT
+		e.control.icon_color = None
+		layer_property_header.open = False
+		layer_property_header.controls.pop()
+		layer_property_header.update()
+	else:
+		e.control.icon = ft.icons.ARROW_DROP_DOWN
+		e.control.icon_color = e.page.tertiary_color
+		layer_property_header.open = True
+		layer_property_header.controls.append(get_layer_properties(e))
+		layer_property_header.update()
+
+layer_property_header = ft.Column(
+		controls = [
+			ft.TextButton(
+					text = "layer Properties",
+					icon = ft.icons.ARROW_RIGHT,
+					on_click = open_close_layer_properties,
+					disabled = True,
+			),
+		],
+		height = 50,
+)
+
+layer_property_header.open = False
+
+def resize_layer_properties(e):
+	property_panel.resize_layer_properties(e)
+
+layer_property_dragbar = ft.GestureDetector(
+		mouse_cursor = ft.MouseCursor.RESIZE_ROW,
+		drag_interval = 50,
+		on_pan_update = resize_layer_properties,
+		content = ft.Container(
+				content = ft.Divider(),
+				margin = 0,
+				padding = 0,
+		),
+)
+
 property_panel = PropertyPanel(
 		content = ft.Column(
 				controls = [
 					preview_pane,
 					preview_dragbar,
+					canvas_property_header,
+					canvas_property_dragbar,
+					layer_property_header,
+					layer_property_dragbar,
 				],
 		),
 )
 
 property_panel.preview = preview_pane
 property_panel.preview_dragbar = preview_dragbar
+property_panel.canvas_properties = canvas_property_header
+property_panel.canvas_properties_dragbar = canvas_property_dragbar
+property_panel.layer_properties = layer_property_header
+property_panel.layer_properties_dragbar = layer_property_dragbar
 
 output_panel = PropertyPanel(
 		content = ft.Column(

webui/flet/scripts/flet_utils.py

@@ -141,11 +141,11 @@ def get_gallery_images(gallery_name):
 		return None
 	for f in files:
 		if f.endswith(('.jpg','.jpeg','.png')):
-			path_to_file = os.path.join('/uploads',f)
+			image = Image.open(os.path.join(path_to_gallery,f))
-			images.append({f:{'img_path':path_to_file}})
+			image = image.convert("RGBA")
-		if f.endswith(('.yaml')):
+			image.filename = f
-			path_to_file = os.path.join('/uploads',f)
+			image.path = os.path.join(gallery_name,f)
-			images.append({f:{'info_path':path_to_file}})
+			images.append(image)
 	return images