Treffer: Tree-based collage model with transverse-connections

An interactive tree-based collage model with transverse connections is presented, which is developed to effectively overcome the limitations inherent in existing graphic editors such as Photoshop Online, Canva, and Pixlr Editor. Based on a comprehensive analysis of popular existing solutions, it has been established that the main drawbacks of these collage editors include the absence of automatic connections between image element containers and the necessity for extensive manual adjustments of the collage structure when editing respective compositions. Consequently, some issues regarding maintaining visual consistency and harmony arise when resizing images or altering the positions of individual collage elements. The developed collage model is structured as a clearly defined hierarchical tree with four nested levels: root element, rows, columns, and image element containers. A significant enhancement is the introduction of transverse connections between adjacent containers, which enable automatic bidirectional recalculations of container positions and sizes upon changing the parameters of any individual element. Mathematical foundations of this model are described in detail, specifically utilizing graph and tree theory principles, which formally define the logic behind element interactions within the collage. The implementation of the model is performed using the TypeScript programming language and Fabric.js library, actively employing Composite design patterns for structuring components and Observer patterns for efficient management of reactivity and state changes in real-time. Experimental studies of the developed model have demonstrated significant improvement in the graphic composition editing process: the number of necessary user actions is reduced several times compared to traditional models. Additionally, the system exhibits high performance, responsiveness to changes, and stable maintenance of visual harmony even under intensive element editing. It has been