mirror of
https://github.com/Sygil-Dev/sygil-webui.git
synced 2024-12-14 05:58:18 +03:00
more work on canvas(flet ui)
This commit is contained in:
parent
58db3ffe02
commit
2cc91e3d07
@ -18,6 +18,8 @@ class Canvas(ft.Container):
|
||||
|
||||
self.overlay.canvas_size.content.color = self.page.text_color
|
||||
self.overlay.canvas_size.content.size = self.page.text_size
|
||||
self.add_layer_image(self.page.canvas_background)
|
||||
self.center_canvas()
|
||||
self.refresh_canvas()
|
||||
|
||||
def refresh_canvas(self):
|
||||
@ -26,9 +28,14 @@ class Canvas(ft.Container):
|
||||
def set_current_tool(self,tool):
|
||||
self.page.current_tool = tool
|
||||
|
||||
def add_layer_image(self, image):
|
||||
self.image_stack.add_layer_image(image)
|
||||
self.update()
|
||||
|
||||
def center_canvas(self):
|
||||
self.image_stack.left = (self.page.workspace_width * 0.5) - (self.page.canvas_size[0] * 0.5),
|
||||
self.image_stack.top = (self.page.workspace_height * 0.5) - (self.page.canvas_size[1] * 0.5),
|
||||
width, height = self.page.get_viewport_size()
|
||||
self.image_stack.left = (width * 0.5) - 2048
|
||||
self.image_stack.top = (height * 0.5) - 2048
|
||||
canvas.update()
|
||||
|
||||
def pan_canvas(self):
|
||||
@ -47,34 +54,54 @@ class CanvasOverlay(ft.Stack):
|
||||
self.update()
|
||||
|
||||
class ImageStack(ft.GestureDetector):
|
||||
def add_layer_image(self):
|
||||
pass
|
||||
def add_layer_image(self, image):
|
||||
layer_image = LayerImage(
|
||||
mouse_cursor = ft.MouseCursor.GRAB,
|
||||
drag_interval = 50,
|
||||
on_pan_update = self.drag_layer,
|
||||
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,
|
||||
),
|
||||
)
|
||||
self.content.controls.append(layer_image)
|
||||
|
||||
|
||||
class LayerImage(ft.GestureDetector):
|
||||
def center_layer(self):
|
||||
self.left = (self.page.workspace_width * 0.5) - (self.page.canvas_size[0] * 0.5),
|
||||
self.top = (self.page.workspace_height * 0.5) - (self.page.canvas_size[1] * 0.5),
|
||||
def center_layer(self, e):
|
||||
width, height = self.page.get_viewport_size()
|
||||
self.left = (width * 0.5) - (self.width * 0.5),
|
||||
self.top = (height * 0.5) - (self.height * 0.5),
|
||||
canvas.update()
|
||||
|
||||
def drag_layer(self):
|
||||
def drag_layer(self, e):
|
||||
pass
|
||||
|
||||
def resize_layer(self):
|
||||
def resize_layer(self, e):
|
||||
pass
|
||||
|
||||
def draw_on_layer(self):
|
||||
def draw_on_layer(self, e):
|
||||
pass
|
||||
|
||||
def paint_on_layer(self):
|
||||
def paint_on_layer(self, e):
|
||||
pass
|
||||
|
||||
class LayerImage(ft.GestureDetector):
|
||||
pass
|
||||
|
||||
def pan_canvas(e):
|
||||
canvas.pan_canvas(e)
|
||||
|
||||
image_stack = ImageStack(
|
||||
mouse_cursor = ft.MouseCursor.GRAB,
|
||||
# mouse_cursor = ft.MouseCursor.GRAB,
|
||||
drag_interval = 50,
|
||||
on_pan_update = None,
|
||||
on_scroll = None,
|
||||
on_pan_update = pan_canvas,
|
||||
width = 4096,
|
||||
height = 4096,
|
||||
left = 0,
|
||||
top = 0,
|
||||
content = ft.Stack(),
|
||||
@ -115,6 +142,11 @@ canvas_tools = ft.Container(
|
||||
),
|
||||
top = 4,
|
||||
right = 4,
|
||||
padding = 4,
|
||||
border_radius = 10,
|
||||
opacity = 0.5,
|
||||
bgcolor = 'black',
|
||||
|
||||
)
|
||||
|
||||
canvas_tools.zoom_in = zoom_in_button
|
||||
@ -135,7 +167,6 @@ canvas = Canvas(
|
||||
image_stack,
|
||||
canvas_overlay,
|
||||
],
|
||||
clip_behavior = None,
|
||||
),
|
||||
clip_behavior = 'antiAlias',
|
||||
alignment = ft.alignment.center,
|
||||
|
@ -63,9 +63,8 @@ class Messages(ft.Container):
|
||||
message_list.controls.append(msg)
|
||||
self.prune_messages()
|
||||
|
||||
message_list = ft.Column(
|
||||
spacing = 0,
|
||||
scroll = 'auto',
|
||||
message_list = ft.ListView(
|
||||
spacing = 4,
|
||||
auto_scroll = True,
|
||||
controls = [],
|
||||
)
|
||||
|
@ -68,8 +68,8 @@ class ToolManager(ft.Container):
|
||||
self.tool_properties.padding = self.page.container_padding
|
||||
self.tool_properties.margin = self.page.container_margin
|
||||
|
||||
self.dragbar.content.width = self.page.vertical_divider_width
|
||||
self.dragbar.content.color = self.page.tertiary_color
|
||||
self.dragbar.width = self.page.vertical_divider_width
|
||||
self.dragbar.color = self.page.tertiary_color
|
||||
|
||||
def resize_tool_manager(self, e: ft.DragUpdateEvent):
|
||||
self.page.tool_manager_width = max(50, self.page.tool_manager_width + e.delta_x)
|
||||
@ -176,7 +176,6 @@ tool_manager = ToolManager(
|
||||
tool_properties,
|
||||
],
|
||||
alignment = 'start',
|
||||
horizontal_alignment = 'center',
|
||||
expand = True,
|
||||
),
|
||||
tool_manager_dragbar,
|
||||
@ -189,5 +188,5 @@ tool_manager = ToolManager(
|
||||
tool_manager.toolbox = toolbox
|
||||
tool_manager.tool_divider = tool_divider.content.content
|
||||
tool_manager.tool_properties = tool_properties
|
||||
tool_manager.dragbar = tool_manager_dragbar
|
||||
tool_manager.dragbar = tool_manager_dragbar.content
|
||||
|
||||
|
@ -91,7 +91,7 @@ def get_image_from_uploads(name):
|
||||
|
||||
def get_canvas_background(path):
|
||||
image = Image.open(path)
|
||||
image = image.resize((512,512))
|
||||
image = image.resize((4096,4096))
|
||||
image = image.convert("RGBA")
|
||||
return image
|
||||
|
||||
|
@ -80,7 +80,6 @@ def main(page: ft.Page):
|
||||
# layouts
|
||||
def set_layout(e):
|
||||
page.current_layout = e.control.value
|
||||
set_property_panel_options()
|
||||
page.update()
|
||||
|
||||
page.set_layout = set_layout
|
||||
@ -91,19 +90,16 @@ def main(page: ft.Page):
|
||||
|
||||
# asset manager
|
||||
page.asset_manager = asset_manager
|
||||
page.layer_list = []
|
||||
page.visible_layer_list = []
|
||||
page.active_layer_list = []
|
||||
|
||||
# canvas
|
||||
page.canvas = canvas
|
||||
page.canvas_background = flet_utils.get_canvas_background('webui/flet/assets/images/templategrid_albedo.png')
|
||||
page.canvas_size = (512,512)
|
||||
page.canvas_size = [512,512]
|
||||
|
||||
def get_viewport_size():
|
||||
viewport_width = page.width - (page.tool_manager_width + (page.vertical_divider_width * 3) + page.left_panel_width + page.right_panel_width)
|
||||
viewport_height = page.height - (page.appbar_height * 3) - page.bottom_panel_height
|
||||
return (viewport_width, viewport_height)
|
||||
viewport_height = page.height - (page.titlebar_height * 3) - page.bottom_panel_height
|
||||
return viewport_width, viewport_height
|
||||
|
||||
page.get_viewport_size = get_viewport_size
|
||||
|
||||
@ -288,25 +284,6 @@ def main(page: ft.Page):
|
||||
|
||||
# layouts ############################################################
|
||||
|
||||
def set_current_tools():
|
||||
layout = page.current_layout
|
||||
if layout == 'Default':
|
||||
set_tools(default_tools)
|
||||
elif layout == 'Textual Inversion':
|
||||
set_tools(textual_inversion_tools)
|
||||
elif layout == 'Node Editor':
|
||||
set_tools(node_editor_tools)
|
||||
tool_manager.update()
|
||||
|
||||
def set_property_panel_options():
|
||||
layout = page.current_layout
|
||||
if layout == 'Default':
|
||||
set_properties(default_properties)
|
||||
elif layout == 'Textual Inversion':
|
||||
set_properties(textual_inversion_properties)
|
||||
elif layout == 'Node Editor':
|
||||
set_properties(node_editor_properties)
|
||||
|
||||
default_layout = ft.Row(
|
||||
controls = [
|
||||
tool_manager,
|
||||
|
Loading…
Reference in New Issue
Block a user