resize function override not working

[vh13294]

space.add custom resize function causing error?

space.add( {
start: (bound, space) => {
// code for init
},
animate: (time, ftime, space) => {
// code for animation
},
action: (type, x, y, event) => {
// code for interaction
},
resize: (size, event) => {
// code for resize
}
} );

[williamngan]

Hi @vh13294 , your code above looks correct to me. What is the error you receive? Can you post the full code so that I can help you debug it?

[vh13294]

`import {Component, OnInit} from '@angular/core';

// import third-party module
import {CanvasSpace, Pt, Group, Line, Const, Color} from 'pts';
import * as tinygradient from 'tinygradient';

@component({
selector: 'app-canvas',
templateUrl: './canvas.component.html',
styleUrls: ['./canvas.component.scss']
})
export class CanvasComponent implements OnInit {
constructor() { }

ngOnInit() {
this.floatySpace();
}

getGradients() {
const gradient = tinygradient(['#FF3F8E', '#04C2C9', '#2E55C1']);
const colorsHsv = gradient.hsv(30, false);
const newCol = colorsHsv.map(x => x.toRgbString());
return newCol;
}

getNextGradient(gradients: string[], current: string) {
const len = gradients.length;
const next = gradients.indexOf(current) + 1;
const i = next % len;
return gradients[i];
}

floatySpace() {
const colors = this.getGradients();
const space = new CanvasSpace('float').setup({ bgcolor: '#2d2b2b', retina: true, resize: true});
const form = space.getForm();
const color = Color.from(255, 255, 255, 1);
let center, pts, line, r, iColor = 0, rate = 1;

function timeout() {
  setTimeout(function () {
      iColor += rate;
      if (iColor >= 30) {
        rate = -1;
      } else if (iColor === 0) {
        rate = 1;
      }
      timeout();
  }, 1000);
}

timeout();
// Canvas
space.add({
  start: () => {
    // Elements
    pts = [];
    center = space.size.$divide(1.8);
    const angle = -(window.innerWidth * 0.5);
    let count = window.innerWidth * 0.05;
    if (count > 150) {
      count = 150;
    }
    line = new Group(new Pt(0, angle), new Pt(space.size.x, 0));

    r = Math.min(space.size.x, space.size.y) * 1;
    for (let i = 0; i < count; i++) {
      const p = new Group( new Pt(Math.random() * r - Math.random() * r, Math.random() * r - Math.random() * r) );
      p.moveBy( center ).rotate2D( i * Math.PI / count, center);
      p.brightness = 0.1;
      pts.push( p );
    }
  },

  animate: (time, ftime, context) => {
    let current = colors[iColor];
    for (const pt of pts) {
      current = this.getNextGradient(colors, current);
      pt.rotate2D( Const.one_degree / 15, center);
      form.stroke( false ).fill( current ).point(pt[0], 1);

      // get line from pt to the mouse line
      const ln = new Group(pt[0], Line.perpendicularFromPt(line, pt[0]));

      // opacity of line derived from distance to the line
      const opacity = Math.min( 0.8, 1 - Math.abs( Line.distanceFromPt(line, pt[0])) / r);
      const distFromMouse = Math.abs( Line.distanceFromPt(ln, space.pointer) );

      if (distFromMouse < 70) {
        if (pt.brightness < 0.3) {
          pt.brightness += 0.02;
        }
      } else {
        if (pt.brightness > 0.1) {
          pt.brightness -= 0.01;
        }
      }

      color[3] = pt.brightness;
      form.strokeOnly(color.rgba).fill( true ).line(ln);
    }
  },

  action: (type, x, y, event) => {
    if (type === 'drag') {
      line.rotate2D( Const.one_degree / 5 );
    }
  },
});

space.bindMouse().bindTouch().play();

}
}
`

[williamngan]

Hi @vh13294 , sorry about the late reply. Your code looks correct so I'm guessing it's something to do when initiating with angular components and Pts.

I'm not familiar with angular, but I'm thinking/guessing you can try to make sure your component template has been initialized before calling Pts -- otherwise Pts won't be able to find and resize the element.

What's the error you're getting, and do you get it on init or afterwards?

[vh13294]

I fixed the issue.

resize?(size: IPt, evt?: Event): undefined; => resize?(size: IPt, evt?: Event): any;

[vh13294]

Basiclly , what I am trying to acheive is to resize the canvas and re-render when the window is resized!

I tried space.autoResize = true; , but not working!

Is there is better way to acheive this?

[williamngan]

Thanks for the details. I think I figure out what's wrong. The first parameter size:IPt in the callback should be of type Bound, not an IPt. If it's a Pt, it'll just provide the position but not the size.
https://github.com/williamngan/pts/blob/master/src/Canvas.ts#L219

Meanwhile, you can see a demo of resizing canvas when window resize here:
https://ptsjs.org/demo/edit/?name=canvasspace.resize

If you cast the size parameter to a Bound, I think it should work for now. I'll fix the docs and check if autoResize property has bugs. Thanks for reporting!

[williamngan]

Hi @vh13294 , the typescript definitions for resize are fixed in 0.6.5. See if it works for you now.

This is a working demo for your reference:
https://ptsjs.org/demo/edit/?name=canvasspace.resize