Milestone

[softmarshmallow]

Grida Canvas Milestone

Document / Global Properties

Feature to have a value as variables, colors as tokens

• Grida Canvas - Tokens & Variables #232

Document / Component-Instance Model

Feature to have non-widget, non-template node as component, define properties, assign properties, and pass properties to instance.

Document / Widget Model

Feature to have any user defined component (React component) to be defined as a widget for complex designs, while subtree of that widget be able to follow normal document model, enabling end-users to modify that widget as they want (mostly its' style)

Document / Image File Model

Feature to efficiently manage uploaded files, by hashing them, preventing same files being uploaded for performance and better lookups.

IO-SVG

Module to import from SVG, making Grida Canvas SVG backend 90% compatitable with SVG files.
At the moment, we only support partial SVG, including path, fill and strokes.

IO-HTML

Module to import from html/css. Since html/css is the best format for AI to perform web design, this is essential for AI plugins.

IO-Figma

Module to import from Figma Document, aims to provide a confident import pipeline and ability to render Figma designs with pure html/css

Surface / Text Editor

Feature to allow users to easily edit the text node, including bold, itallic, and different styles per text spans.

Surface / Path Editor

Pen tool, a path edit tool, provides user to modify verticies and segments, tangent values with ease.

Features spec

• add vertex
• select vertex(s)
• remove vertex(s)
• translate vertex(s)
• select tangent(s)
• translate tangent(s)
• remove tangent(s) (set zero)
• connect vertex with segment

Surface / Image Editor

Image Editor, aka Image Transform Editor, allows user to crop, rotate images.

Surface / Gradient Editor

Gradient Editor allows user to add color stop, select stop and transform the gradient.

Surface / Flex-Grid DND

Feature to have DND feature on Flex and Grid layouts.

• [Grida Canvas] Core Gesture - Flex-Grid DND (WIP) #227

Core / API Scripting Interface

Feature to have developers interect with the editor, via API. (In this context, API meaning local API, like blender's bpy)

Editor / Hierarchy (Tree view)

Making Editor Hierarchy to have a DND feature, like move, nest, order. Just like VSCode's tree view

Editor / SVG Editor

Showcase of our Canvas Editor, dedicated to Vector graphics design, with Pure SVG Backend

Editor / Plugin / Tailwind Builder

Showcase / Plugin of our Canvas Editor, having the world's most advanced Website builder, with Tailwind css.

Editor / Plugin / Code

Plugin of our Canvas Editor, making https://github.com/gridaco/code compatible with our new document model

Editor / Plugin / Pixel Grid

Surface-UX Plugin, that displays pixel grid (when zoomed), Just like Figma

• [Grida Canvas] Add Pixel Grid #225

Editor / Plugin / Ruler

Surface-UX Plugin, that displays ruler, Just like Figma / Framer

Editor / Asset Library

Open, Free Standard Asset Library Including Vector Shapes, 3D Illustrations, Icons and more.

Editor / UX / Repeat Duplicate

Duplicate, CMD+D shall be context aware of its previous diff, allowing sequential duplicate resulting a new transformed outputs.

E.g. when clone rect 0,0,100,100 to 200,200, next repeat shall be 400,400