tuanchauict / monosketch Goto Github PK

View Code? Open in Web Editor NEW

332.0 4.0 6.0 5.27 MB

An ASCII graph drawing app

Home Page: https://monosketch.io

License: Apache License 2.0

Kotlin 94.19% HTML 0.14% Shell 0.14% SCSS 5.14% CSS 0.11% Python 0.28%

ascii-graphics webapp kotlin-js ascii ascii-art ascii-editor diagram-editor kotlin

monosketch's Introduction

What is it?

Mono Sketch is a client-side-only web-based sketch tool for drawing ASCII diagrams. You can use the app at app.monosketch.io.

        +10-15V                0,047R                                        
       ●─────────○───────○─░░░░░─○─○─────────○────○─────╮                    
    +  │         │       │       │ │         │    │     │                    
    ─═════─      │       │       │ │         │    │     │                    
    ─═════─    ──┼──     │       │╭┴╮        │    │     │                    
    ─═════─     ─┼─      │       ││ │ 2k2    │    │     │                    
    -  │      470│ +     │       ││ │        │    │     │                    
       │       uF│       ╰──╮    │╰┬╯       ╭┴╮   │     │                    
       └─────────│          │    │ │     1k │ │   │     ▽ LED                
                 │         6│   7│ │8       │ │   │     ┬                    
              ───┴───    ╭──┴────┴─┴─╮      ╰┬╯   │     │                    
               ─═══─     │           │1      │  │ / BC  │                    
                 ─       │           ├───────○──┤/  547 │                    
                GND      │           │       │  │ ▶     │                    
                         │           │      ╭┴╮   │     │                    
               ╭─────────┤           │  220R│ │   ○───┤├┘  IRF9Z34           
               │         │           │      │ │   │   │├─▶                   
               │         │  MC34063  │      ╰┬╯   │   │├─┐ BYV29       -12V6 
               │         │           │       │    │      ○──┤◀─○────○───X OUT
             - │ +       │           │2      ╰────╯      │     │    │        
6000 micro ────┴────     │           ├──○                C│    │   ─── 470   
Farad, 40V ─ ─ ┬ ─ ─     │           │ GND               C│    │   ███  uF   
Capacitor      │         │           │3                  C│    │    │\       
               │         │           ├────────┤├╮        │     │   GND       
               │         ╰─────┬───┬─╯          │       GND    │             
               │              5│  4│            │              │             
               │               │   ╰────────────○──────────────│             
               │               │                               │             
               ╰───────────────●─────/\/\/─────────○────░░░░░──╯             
                                     2k            │         1k0             
                                                  ╭┴╮                        
                                                  │ │5k6   3k3               
                                                  │ │in Serie                
                                                  ╰┬╯                        
                                                   │                         
                                                  GND

Features

Supporting features

Draw tools:

Rectangle
Text
Line

Shape formats:

Fill
Border
Line start/end heads
Rounded corner

Editing:

Infinity scroll, no limitation for 4 directions
Autosave
Multiple projects
Copy / Cut / Paste / Duplicate
Move and change shapes' order
Dark mode
Line snapping: connect a line to a shape

Exporting:

Export selected shapes
Copy as text (cmd + shift + C or ctrl + shift + C)

Future features

Grouping

Group is added as a kind of shape but until now, there are no features that are applying Group except for rendering. Besides, the shape tool does not work with groups or multiple selected shapes. This project aims to make the tool able to work with Group and also add a Shape tree on the left of the tool.

Paint tool

Currently, Mono Sketch provides only three tools: Rectangle, Text, and Line. One tool that is also used frequently when drawing with ASCII is paint - draw with a specific character. This project also aims to provide richer options of Fill, Border, Line Start/End head

Sharing

Allow opening files from a url, share to gist, etc.

Contributing

This project is fully written with KotlinJS and SASS for CSS. There is no environment setup required except for Java.

To run debug:

./gradlew browserDevelopmentRun --continuous -Dorg.gradle.parallel=false

Or with production configuration

./gradlew browserProductionRun --continuous -Dorg.gradle.parallel=false

-Dorg.gradle.parallel=false is a workaround for a bug on KotlinJS build with --continuous.

Run with Python

This is an alternative to browserDevelopmentRun for running the app for development (sometimes, the Gradle does not reload when the code is updated).

Requirements: Pipenv.

pipenv install
pipenv run dev

monosketch's People

Contributors

Stargazers

Watchers

Forkers

snowby666 marqueiv techiscy dxps toanluongnhu1709 anndream

monosketch's Issues

[Extra] Allow preselect attributes when draw tool is selected

[Line shape] Not create new joint point when moving anchor points after moving edge

Should apply the same behavior with before moving edge: also move the adjacent points

[Bug] Issue with merging when line has head anchors

        ▲     
┌───────┬────┐
│       │    │
│       │    │
│       │    │
│       │    │
└───────┴────┘
        ▼

Group multiple shapes command

Group/ungroup function is ready for shape manager, but there is no command for grouping and ungrouping as well as testing the other features work well with group shape

Add UI tool to trigger commands

Infinity scroll: Scroll the board infinitively

Improve row and column index on the edges of canvas

Select and transform multiple shape

Store shape ID inside InteractionPoint

Export to text by selected shapes

Change mouse cursor equivalent to indicator points

Enhance the command when using mouse

Create a CI for running unit test when creating a PR

This is still in the early stage of the project, and APIs are changed frequently. Therefore, when creating a new class, we usually also need to change some APIs on the current existing APIs.
Personally, I focus on new APIs but not running test old APIs while developing (bad habit), therefore, we need to create a CI to detect broken APIs due to the change.

[Bug] CSS and position does not work on Safari

Text shape: Open a modal for entering text content when mouse up

Import/Export JSON

Simplify shape update command

Currently, we are using Extra for updating other attributes other than bound.
This makes primary values like text for Text shape or points for Line shape become a secondary resident.