Code Monkey home page Code Monkey logo

ts-paint's Introduction

TS Paint

A rewrite of MS Paint for Windows 95 in Typescript and Angular

Screenshot:

Live version:

https://jgosar.github.io/ts-paint/

The project is still at an early stage of development, but the general roadmap is:

  • Implement all the features of Microsoft Paint for Windows 95
  • Add unit tests for everything
  • Add lots of new features that MS Paint did not support (the sky is the limit)

Chrome extension

As a fun exercise, I have also implemented an extension for Google Chrome. It adds the option 'Edit in TS Paint' to the context menu when you right-click on an image on any website, which loads the image into TS Paint in a new tab. To install the extension, follow these steps:

  • Go to chrome://extensions
  • In the upper right corner enable Developer mode
  • In the upper left corner, click Load unpacked
  • In the directory picker, select the ts-paint\ts-paint-chrome-extension directory

Future plans

Immediate TODO list

  • Eraser tool
  • Add option of using different line thicknesses
  • Text tool
  • Options/Edit Colors window, include some extra modern features, like HSL colors and hex color codes
  • File/Save as window (Changing save location is not possible, but I can add the options of renaming the file or saving it as a JPG)
  • Use the File System Access API to overwrite files directly, instead of saving changes to a new downloaded file
  • Image/Draw Opaque option
  • View/Zoom/Show Grid option

Nice to have

  • Different mouse cursors for different drawing tools
  • Polygon tool
  • Curve tool
  • Brush tool
  • Airbrush tool
  • View/View Bitmap option
  • File/Print (Possibility of printing the image without the UI)

Planned features that are not part of the original MS Paint

  • CSS Filter color effects (hue-rotate, brightness, contrast, etc.)
  • Transparency
  • Clipboard manager
  • Editing history window + Export/import editing steps to/from JSON
  • Layers?

ts-paint's People

Contributors

jgosar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

ts-paint's Issues

Fix paste when image is magnified

When pasting image data, it always gets positioned to coordinates (0,0). If magnification is active and (0,0) is not in the viewport, the pasted image should be placed where the viewport is.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.