more tweaks to property panel (flet ui)

webui/flet/scripts/flet_asset_manager.py

@@ -71,11 +71,18 @@ class LayerPanel(ft.Container):
 			if layer.visible:
 				self.visible_layers.append(layer)
 
+	def update_layer_properties(self,e):
+		self.page.property_manager.refresh_layer_properties()
+
 	def make_layer_active(self, index):
 		for i, layer in enumerate(self.layers):
 			layer.active = False
+			layer.handle.color = None
 			if i == index:
 				layer.active = True
+				layer.handle.color = self.page.tertiary_color
+				self.page.active_layer = layer
+				self.page.property_manager.refresh_layer_properties()
 
 	def add_layer_slot(self, image):
 		label = ft.TextField(
@@ -84,9 +91,11 @@ class LayerPanel(ft.Container):
 				text_size = self.page.text_size,
 				content_padding = ft.padding.only(left = 12, top = 0, right = 0, bottom = 0),
 				expand = True,
+				on_submit = self.update_layer_properties,
 		)
 		handle = ft.Icon(
 				name = ft.icons.DRAG_HANDLE,
+				color = None,
 				tooltip = 'drag to move',
 		)
 		layer_slot = LayerSlot(
@@ -95,11 +104,12 @@ class LayerPanel(ft.Container):
 							label,
 							handle,
 						],
-						height = self.page.icon_size * 2,
+						height = self.page.layer_height,
 						expand = True,
 				),
 		)
 		layer_slot.label = label
+		layer_slot.handle = handle
 		layer_slot.index = 0
 		layer_slot.visible = True
 		layer_slot.active = False
@@ -108,6 +118,7 @@ class LayerPanel(ft.Container):
 		self.layers = self.content.content.controls
 		self.update_layer_indexes()
 		self.make_layer_active(0)
+		self.page.property_manager.refresh_layer_properties()
 		self.update()
 
 	def add_blank_layer(self, e):
@@ -125,22 +136,42 @@ class LayerPanel(ft.Container):
 		for image in images:
 			self.add_image_as_layer(image)
 
+	def get_layer_index_from_position(self, pos):
+		index = int(pos / self.page.layer_height)
+		if index > len(self.layers):
+			return 0
+		return index
+
 class LayerSlot(ft.Container):
 	pass
 
 
-def layer_left_click(e):
+def layer_left_click(e: ft.TapEvent):
+	index = layer_panel.get_layer_index_from_position(e.local_y)
+	layer_panel.make_layer_active(index)
+	layer_panel.update()
+
+def pickup_layer(e: ft.DragStartEvent):
+	pass
+
+def on_layer_drag(e: ft.DragUpdateEvent):
+	pass
+
+def drop_layer(e: ft.DragEndEvent):
 	pass
 
 layer_panel = LayerPanel(
 		content = ft.GestureDetector(
 				content = ft.Column(
-							controls = [],
+						controls = [],
-							expand = True,
+						expand = True,
-							scroll = 'hidden',
+						scroll = 'hidden',
 				),
 				drag_interval = 10,
-				on_tap = layer_left_click,
+				on_tap_down = layer_left_click,
+				on_vertical_drag_start = pickup_layer,
+				on_vertical_drag_update = on_layer_drag,
+				on_vertical_drag_end = drop_layer,
 		),
 )
 
@@ -153,7 +184,7 @@ layer_panel.layer_last_index = 0
 asset_panel = AssetPanel(
 		content = ft.Column(
 				controls = [
-						ft.Text("Under Construction"),
+					ft.Text("Under Construction"),
 				],
 		),
 )

webui/flet/scripts/flet_canvas.py

@@ -116,18 +116,33 @@ class ImageStack(ft.Container):
 		self.content.controls.append(canvas_bg)
 
 	def add_layer_image(self, image):
-		layer_image = LayerImage(
+		layer_image = None
-				left = 0,
+		if image.path == None:
-				top = 0,
+			layer_image = LayerImage(
-				width = image.width,
+					left = 0,
-				height = image.height,
+					top = 0,
-				content = ft.Image(
+					width = image.width,
-						src = f'{image.path}',
+					height = image.height,
-						width = image.width,
+					content = ft.Image(
-						height = image.height,
+							src_base64 = flet_utils.convert_image_to_base64(image),
-						gapless_playback = True,
+							width = image.width,
-				),
+							height = image.height,
-		)
+							gapless_playback = True,
+					),
+			)
+		else:
+			layer_image = LayerImage(
+					left = 0,
+					top = 0,
+					width = image.width,
+					height = image.height,
+					content = ft.Image(
+							src = f'{image.path}',
+							width = image.width,
+							height = image.height,
+							gapless_playback = True,
+					),
+			)
 		layer_image.image = image
 		self.center_layer(layer_image)
 		self.content.controls.append(layer_image)

webui/flet/scripts/flet_property_manager.py

@@ -27,6 +27,8 @@ class PropertyManager(ft.Container):
 		self.property_panel.layer_properties_divider.content.height = self.page.divider_height
 		self.property_panel.layer_properties_divider.content.color = self.page.tertiary_color
 
+		self.refresh_canvas_properties()
+
 	def set_tab_text_size(self, size):
 		for tab in self.tabs:
 			tab.tab_content.size = size
@@ -50,11 +52,33 @@ class PropertyManager(ft.Container):
 		self.property_panel.preview.content.src_base64 = flet_utils.convert_image_to_base64(image)
 		self.property_panel.update()
 
+	def refresh_canvas_properties(self):
+		self.property_panel.refresh_canvas_properties()
+
+	def refresh_layer_properties(self):
+		self.property_panel.refresh_layer_properties()
+
 class PropertyPanel(ft.Container):
 	def resize_preview(self, e):
 		self.preview.height = max(200, self.preview.height + e.delta_y)
 		self.update()
 
+	def refresh_canvas_properties(self):
+		self.canvas_properties.controls[0].controls[1].value = self.page.canvas_size[0]
+		self.canvas_properties.controls[0].controls[3].value = self.page.canvas_size[1]
+		self.canvas_properties.update()
+
+	def refresh_layer_properties(self):
+		self.layer_property_header.disabled = False
+		self.layer_property_header.open = True
+		self.layer_property_header.icon = ft.icons.ARROW_DROP_DOWN
+		self.layer_property_header.icon_color = self.page.tertiary_color
+		self.layer_properties.visible = True
+		self.layer_properties.controls[0].controls[0].value = self.page.active_layer.label.value
+		self.layer_properties.controls[1].controls[0].value = self.page.active_layer.image.width
+		self.layer_properties.controls[1].controls[1].value = self.page.active_layer.image.height
+		self.update()
+
 preview_pane = ft.Container(
 		content = ft.Image(
 				src_base64 = None,
@@ -81,43 +105,19 @@ 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_properties.visible = False
-		canvas_property_header.update()
+		property_panel.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_properties.visible = True
-		canvas_property_header.update()
+		property_panel.update()
 
 canvas_property_header = ft.Column(
 		controls = [
@@ -131,63 +131,107 @@ canvas_property_header = ft.Column(
 
 canvas_property_header.open = False
 
+canvas_properties = ft.Column(
+		visible = False,
+		controls = [
+			ft.Row(
+					controls = [
+						ft.Text(
+								value = 'Width:',
+								text_align = 'center',
+								no_wrap = True,
+								expand = 2,
+						),
+						ft.Text(
+								value = 0,
+								text_align = 'start',
+								expand = 1,
+						),
+						ft.Text(
+								value = 'Height:',
+								text_align = 'start',
+								no_wrap = True,
+								expand = 2,
+						),
+						ft.Text(
+								value = 0,
+								text_align = 'center',
+								expand = 1,
+						),
+					],
+			),
+		],
+)
+
 canvas_property_divider = 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_properties.visible = False
-		layer_property_header.update()
+		property_panel.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_properties.visible = True
-		layer_property_header.update()
+		property_panel.update()
 
-layer_property_header = ft.Column(
+layer_property_header = ft.TextButton(
-		controls = [
+		text = "Layer Properties",
-			ft.TextButton(
+		icon = ft.icons.ARROW_RIGHT,
-					text = "Layer Properties",
+		on_click = open_close_layer_properties,
-					icon = ft.icons.ARROW_RIGHT,
+		disabled = True,
-					on_click = open_close_layer_properties,
-					disabled = True,
-			),
-		],
 )
 
 layer_property_header.open = False
 
+def update_layer_name(e):
+	e.page.active_layer.label.value = e.control.value
+	e.page.asset_manager.update()
+
+layer_properties = ft.Column(
+		visible = False,
+		controls = [
+			ft.Row(
+					controls = [
+						ft.TextField(
+								label = 'Layer Name',
+								value = '',
+								text_align = 'center',
+								content_padding = 0,
+								expand = 1,
+								on_submit = update_layer_name,
+						),
+					],
+			),
+			ft.Row(
+					controls = [
+						ft.TextField(
+								label = 'Width',
+								value = 0,
+								text_align = 'center',
+								content_padding = 0,
+								expand = 1,
+						),
+						ft.TextField(
+								label = 'Height',
+								value = 0,
+								text_align = 'center',
+								content_padding = 0,
+								expand = 1,
+						),
+					],
+			),
+		],
+)
+
 layer_property_divider = ft.Container(
 		content = ft.Divider(),
 		margin = 0,
@@ -201,8 +245,10 @@ property_panel = PropertyPanel(
 					preview_pane,
 					preview_dragbar,
 					canvas_property_header,
+					canvas_properties,
 					canvas_property_divider,
 					layer_property_header,
+					layer_properties,
 					layer_property_divider,
 				],
 		),
@@ -210,9 +256,11 @@ property_panel = PropertyPanel(
 
 property_panel.preview = preview_pane
 property_panel.preview_dragbar = preview_dragbar
-property_panel.canvas_properties = canvas_property_header
+property_panel.canvas_property_header = canvas_property_header
 property_panel.canvas_properties_divider = canvas_property_divider
-property_panel.layer_properties = layer_property_header
+property_panel.canvas_properties = canvas_properties
+property_panel.layer_property_header = layer_property_header
+property_panel.layer_properties = layer_properties
 property_panel.layer_properties_divider = layer_property_divider
 
 output_panel = PropertyPanel(

webui/flet/scripts/flet_utils.py

@@ -74,6 +74,7 @@ def create_blank_image(size):
 	name = 'blank_layer_' + str(create_blank_image.count).zfill(2)
 	img = Image.new('RGBA',size,(0,0,0,1))
 	img.filename = name
+	img.path = None
 	return img
 
 # takes name of image

webui/flet/webui_flet.py

@@ -96,6 +96,7 @@ def main(page: ft.Page):
 	# asset manager
 	page.asset_manager = asset_manager
 	page.active_layer = None
+	page.layer_height = 50
 
 	# canvas
 	page.canvas = canvas