BitMappery

So you are rebuilding Photoshop in the browser ?

No, I'm building a tool that does the bare minimum what I require and what I don't find in other open source tools. That doesn't mean of course that contributions related to Photoshop-esque features aren't welcomed.

All self-written ?

Yep, though it helps having worked five years in the photo software industry and having tackled problems before.

BitMappery does however make use of the following excellent libraries to speed up its development:

• Vue with Vuex and VueI18n
• Pickr by Simonwep
• Vue slider component by NightCatSama
• Vue search select by Moreta

Dropbox integration

Requires you to register a client id or access token.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test

Lints and fixes files

npm run lint

TODO / Roadmap

• Something weird with best fit only fitting when window resize fires (also see weird non-cleared canvas areas)
• When resizing document, layers are not always equal to the document size/width (e.g. pasted from selections)
• Layer bitmaps and masks must not be stored as Vue observables
• Layer and mask coordinates are not saved when saving / switching document?
• Make canvas only as large as its wrapper. Use viewport in zCanvas to render visible content (requires custom scroll handlers for panning)
• Layer view in options-panel: allow naming, repositioning, toggle visibility, opacity
• Canvas util : store transparency of images
• Restored base64 images should be treated as binary once more (see layer-factory)
• scale logic should move from zoomable-canvas into zCanvas (as handleInteraction needs to transform offsets by zoom ratio, see LayerSprite!)
• Zoom set original size isn't that accurate (check also on mobile views), needs calculateMaxScaling ?
• Implement rectangular selection
• Implement merged layer selection
• Unload Blobs when images are no longer used in document (see sprite-factory disposeSprite, keep instance count of usages)
• Load/save documents from/to Dropbox
• Text editing using Google fonts!
• Add tools for layer rotation and scaling
• Implement layer scale
• Implement clone brush
• Implement document crop
• Implement change history