diff --git a/webui/flet/scripts/flet_asset_manager.py b/webui/flet/scripts/flet_asset_manager.py index 45dda90..d33d9a9 100644 --- a/webui/flet/scripts/flet_asset_manager.py +++ b/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 = [], - expand = True, - scroll = 'hidden', + controls = [], + expand = True, + 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"), ], ), ) diff --git a/webui/flet/scripts/flet_canvas.py b/webui/flet/scripts/flet_canvas.py index 643f40b..53b2052 100644 --- a/webui/flet/scripts/flet_canvas.py +++ b/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( - 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 = None + if image.path == None: + layer_image = LayerImage( + left = 0, + top = 0, + width = image.width, + height = image.height, + content = ft.Image( + src_base64 = flet_utils.convert_image_to_base64(image), + 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) diff --git a/webui/flet/scripts/flet_property_manager.py b/webui/flet/scripts/flet_property_manager.py index 0542d56..2a70903 100644 --- a/webui/flet/scripts/flet_property_manager.py +++ b/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_property_header.update() + canvas_properties.visible = False + 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_property_header.update() + canvas_properties.visible = True + 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_property_header.update() + layer_properties.visible = False + 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_property_header.update() + layer_properties.visible = True + property_panel.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, - ), - ], +layer_property_header = ft.TextButton( + text = "Layer Properties", + icon = ft.icons.ARROW_RIGHT, + 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( diff --git a/webui/flet/scripts/flet_utils.py b/webui/flet/scripts/flet_utils.py index 62befdf..abf0cd5 100644 --- a/webui/flet/scripts/flet_utils.py +++ b/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 diff --git a/webui/flet/webui_flet.py b/webui/flet/webui_flet.py index 54770c5..38b0979 100644 --- a/webui/flet/webui_flet.py +++ b/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