eoussama / eo-textdraw-editor Goto Github PK

useBox should add a box element underneath the text element.
More investigation should be made as to the box color and size.

Originally posted by @eoussama in https://github.com/EOussama/eo-textdraw-editor/issue_comments/710768851

Initialize a Next.js project and go from there.

Toolbox buttons should be able to support nested options, for example, the text textdraw should offer shortcuts for creating text textdraws in all four font types.

Toolbox tools:

• Box textdraw
• Text textdraw (Stylized, Normal, Thin, Bold)
• Sprite textdraw
• Model textdraw
• Comment
• Zoom
• Move
• Delete
• Board background
• Toggle grid
• Export textdraws
• Import textdraws
• Duplicate board
• Reset board

More in the wiki page.

The textdraw UI component should be more modular.

Proposed ngrx

Edit: Since the project moved away from Angular and to React, Zustand was used as a state management solution.

All that has to do with decorative highlights.

• Outline
• Shadow
• Color

Dragging is randomly locked sometimes.

Editor should contain all core components, toolbox, board, options, layers...etc.

• Editor component
• Editor page

Textdraw alignment (anchoring?). Check the wiki page for more info.

Textdraws should be able to be resized in all directions.

There is a slight delay/freeze when a text element is first dragged.

It should be impossible to resize for more than the board's dimension can allow for.

Add the remaining properties for all elements respectively.

Resources:

• Reference picture
• TextDrawCreate

Meta properties:

• id: Element id (string; randomly generated)
• type: Element type (enum; box, text, sprite, preview)
• name: Element name, used to blend in the UI (string; generated default value)

Other properties

• backgroundColor
• position
• size
• color
• backgroundColor
• useBox #10
• shadow
• outline
• alignment
• global
• selectable
• font
• text

More in the wiki page.

Resizing is very hard and messy as it stands now.
The following example should provide extra instructions on how to improve it: https://github.com/mattlewis92/angular-resizable-element/blob/master/demo/demo.component.ts

Aims:

• Increase the resize area
• Improve the handle (icon + spacing)
• Change the max-width/max-height approach in favor of native validation
• Enable back the top and left resize

Resolve console DOM errors coming from react-draggable.

Board is unable to scroll to edge

More on the wiki page.

There is a stutter after performing the first drag operation.

• #10
• #61
• #62
• #63
• #65
• #64

• Board
• Draggable Elements
• Resizebale Elements

This issue details the Layer object and explains its role and purpose.

A layer is auto-created whenever a new textdraw is added to the board. A textdraw element may or may not be associated with a layer, having said that, a present textdraw on the board should always be associated with a layer that controls its visibility, write mode (read-only), and render order.

Layers provide the following features:

• Visibility control
• Write/Read mode
• Affects textdraw render order
• Terminates associated textdraw when deleted

Add global state management, the editor especially should operate on an event-based system.

There should be a toolbox component to the left of the screen (by default), it should host all sorts of components and tools that the user can use.

The toolbox panel, like the rest of the panels, should be draggable and arrangeable as the user sees fit, it should also be toggleable. Shortcuts are a must and some tools can be dragged into the board (like textdraws, comments, ...etc)

• #66
• #67
• Shortcuts
• Allow drag and drop
• Collapsible
• Arrangeable

Collapse panels. Only the title should be visible.

Migrate all to an ECS-based design pattern.

Meta floating values should be rounded.

This issue details the base TextDraw object.

A textdraw element is a base for all entities, it provides basic drag-n-drop and resizing capabilities as well as a few common color controlling properties.

• #54
• #56
• #55
• #52
• #51

Paneling state should be kept track of.

Panels should be able to be closed.

Rename component properties to something more "unique" to avoid name collisions.

Added undo and redo functionality.
The editor board should keep track of changes on entity base.

Example: (w: 200, h: 50)

Player textdraw type.

More in the wiki page.

Add basic styling and meta data for panels.

This issue goes in-depth about defining the Board object.

Boards serve as a host for textdraw elements and render them based on the state of their associated layer. In a way, the board hosts layers which in turn are associated with a textdraw.

• Board info (resolution, mouse pos, img)
• Zoom
• Move
• Snap to grid
• Background (dotten, lines, image, color)

A toolbox component panel to the left of the screen by default.

• #68
• #84

Add interfaces for resizing and dragging

Options should appear as a side element next to the toolbar, it should contain two panels, one for creation and one for edition.

The options panel should have controls for editing all relevant properties for a selected textdraw element.

Create a suitable logo for this project. I'm thinking something about a translucent background and some text.

• Logo
• Favicon

Despite the resize cursor showing up, the element ends up getting dragged instead of resizing.

Needs to support a toggleable box and color.

Revelent wiki pages:

• Box color
• Use box

Currently, only dragged elements are elevated, this should also apply to active elements (hovered element excluded)

Add a text element.
Should not be resized and should have editable text on the fly

Panels need to be dragged around and support nesting.

• Rearranging
• Nesting

Draggable items should be bounded more efficiently.
As it stands, there is a bug with the left bind for textdraw after the board's parent element became absolutely positioned.

It would also help if there was a built-in workaround in the react-draggable library.

Panels are arrangeable elements that contain child panels and or elements.
Panels are responsible for binding the children's dimensions.

• #78
• #76
• #80
• #81
• #82

More in the wiki page.