nkihrk / canvas-eve Goto Github PK

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 ?

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 ?

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

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