nkihrk / canvas-eve

CANVAS EVE is a daily-use canvas which will be helpful in various ways ; Use it as references, memos, image-preview, etc.

CANVAS EVE

CANVAS EVE is a daily-use canvas which will be helpful in various ways ;
Use it as references, memos, image-preview, etc.
DEMO

Heads up : This project is currently under development. It won`t be stable for now.

💡 Current Features

• Drag'n'Drop single or multiple files on the app
  • Supported file formats :
    • jpg/png/gif/svg/bmp/psd
    • obj(mtl)/fbx/gltf(bin)/vrm/pmx/pmd
• Paste a single file to the app
  • Supported file formats : jpg/png/gif/svg/bmp/psd
• Play YouTube on the app with browser-like-window
• Color Picker for images
• Pen/Eraser for drawing
• Zoom In/Out with mousewheel rotation
• Move around the canvas with mousewheel
• Resize/Pinned/Rotate/Flip files on the canvas
• Single/Multiple Selection on the canvas
• Auto-Aligment for files with Ctrl + Arrow key
• Photoshop-like UI
• Right-Click Context Menu

⛏️ How To Build

$ cd CANVAS-EVE/
$ npm install
$ npm run build

Use Webpack's web-dev-server to host a local server( http://localhost:8080/ )

$ npm run start_win // For windows user
$ npm run start_linux // For linux user

📝 Future Release Notes

Last updated : November 27, 2019

• Make the app cross-browser and cross-platform. Will be launched as both a web service and native apps.
• Switching tool-tabs with a click
• Moving tools to other sidebars
• In-app browser
• Split view
• Multiple canvas creating and its management system
• GLSL node editor
• Text editor
• Music player
• Stopwatch and timer
• OCR

💪 Currently Working On...

Last updated : November 27, 2019

• Photoshop-like UI. This will be finished in the near future
• Link Pinterest with the app to get images from user`s boards
• High-performance tuning for the engine
• Loading PDF

⚙️ How To Use

🏷️ Pen and eraser

🏷️ Playing Youtube videos including playlists.

🏷️ Color picker. Only image formats are suppported for now.

🏷️ Loading PSD. Will implement layer extracting feature in the future.

🏷️ Auto-aligment for multiple files on the canvas. Press Ctrl + Arrow key to wake up the auto-aligment.

🏷️ Loading FBX. Currently TGA texture format is not supported.

🏷️ Loading GLTF. Currently Binary glTF is not supported. Draco compressed glTF in the same.

🏷️ Loading pmx/pmd(MMD). Will implement a loader for VMD motion files

🏷️ Loading OBJ(and MTL)

🏷️ Loading VRM

🦟 Bug Report

If you find bugs, please report to me opening new issues on GitHub.

canvas-eve's Issues

The path of favicon gets wrong result when deploying

Webpack never interprets template`s path, which causes the wrong path to an image.

_updateCanvasVal() currently holds some issue causing wrong calculations

src/js/oekaki-eve.js (line 802 - 816)

_updateCanvasVal(e) {
      const $canvas = this.canvas.$newCanvasId;
      const startX = this.canvas.newCanvasPos.x;
      const startY = this.canvas.newCanvasPos.y;
      const endX = e.clientX - $('#zoom').offset().left;
      const endY = e.clientY - $('#zoom').offset().top;

      const resultX = M.abs(endX - startX);
      const resultY = M.abs(endY - startY);

      $canvas.css({
        width: `${resultX * GlbEve.MOUSE_WHEEL_VAL}px`,
        height: `${resultY * GlbEve.MOUSE_WHEEL_VAL}px`
      });
},

The cause is the down-below code.

const resultX = M.abs(endX - startX);
const resultY = M.abs(endY - startY);

M is short for Math, so the resultX and resultY always return positive values, which causes wrong calculations when endX or/and endY are less than startX or/and startY.

It needs to be fixed somehow. Unless the created canvas get inverted, anything is OK

main.scss won't seems to fix relative paths issues when importing it to another entry point

src/scss/main.scss

When importing main.scss, which is an entry point for scss files, it will be successfully converted and loaded via webpack-dev-server. However, it will be failed compiling when running $ npm run build due to failure in loading image files.

An example code for importing main.scss.

import '../scss/main.scss';

Here is an example code for the relative path.

src/scss/components/_colpick-eve.scss (line 79)

background-image: url('../../../assets/img/red_spuit.png');

When I tried rewriting all the paths from relative to absolute, which is like down below, the build is successfully finished, but web-dev-server fails to load images on the contrary.

background-image: url(`/assets/img/red_spuit.png`);

Is there any way to figure this out ?

Currently DracoLoader is not working due to the plugin path issue

src/js/three-eve.js (line 122)

Here is the current code.

dracoLoader.setDecoderPath('../three-modules/draco/');

../three-modules/draco/ is the relative path from three-eve.js, where is the module DracoLoader looking for its decoder.
However, it doesn't seem to be loaded properly inside DracoLoader().
The concole log errors show that the loader try to find draco_wasm_wrapper.js, for example, from the path of http://localhost:8080/, and failed because of the root path set to be /build. Also the compiled JS bundles are in http://localhost:8080/js/.

Is there any way to resolve the path ?