konvajs / ng2-konva Goto Github PK

View Code? Open in Web Editor NEW

113.0 9.0 32.0 718 KB

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.

Home Page: http://rafaelescala.com/ng2-konva/

TypeScript 98.88% HTML 0.89% SCSS 0.22%

ng2 angular2 angular canvas canvas-animation konvajs konva shape

ng2-konva's Introduction

ng2-konva

ng2-konva is a JavaScript library for drawing complex canvas graphics using Angular.

It provides declarative and reactive bindings to the Konva Framework.

All ng2-konva components correspond to Konva components of the same name with the prefix 'ko-'. All the parameters available for Konva objects can be passed as config to the corresponding ng2-konva components.

Core shapes are: ko-stage, ko-layer, ko-rect, ko-circle, ko-ellipse, ko-line, ko-image, ko-text, ko-text-path, ko-star, ko-label, SVG Path, ko-regular-polygon. Also you can create custom shape.

To get more info about Konva you can read Konva Overview.

Documentation

http://rafaelescala.com/ng2-konva/

Installation

To install this library, run:

$ npm install ng2-konva --save

ng2-konva components are all standalone. There are two components you will need to import: CoreShapeComponent and StageComponent

import { Component } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { CircleConfig } from 'konva/lib/shapes/Circle';
import {
  CoreShapeComponent,
  NgKonvaEventObject,
  StageComponent,
} from 'ng2-konva';

@Component({
  selector: 'app-circle-example',
  template: `
    <br />
    <section>
      <ko-stage [config]="configStage">
        <ko-layer>
          <ko-circle
            [config]="configCircle"
            (click)="handleClick($event)"
          ></ko-circle>
        </ko-layer>
      </ko-stage>
    </section>
  `,
  standalone: true,
  imports: [StageComponent, CoreShapeComponent],
})
export class CircleExampleComponent {
  public configStage: Partial<StageConfig> = {
    width: 200,
    height: 500,
  };
  public configCircle: CircleConfig = {
    x: 100,
    y: 100,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
  };

  public handleClick(event: NgKonvaEventObject<MouseEvent>): void {
    console.log('Hello Circle', event);
  }
}

Demo

You can find more examples in the demo project located in projects/demo.

Related repositories

react-konva - React + Konva
vue-konva - Vue + Konva

License

MIT © Rafael Escala

ng2-konva's People

Contributors

Stargazers

Watchers

ng2-konva's Issues

Metadata version mismatch for module

Hi,

after installing and configuring ng2, I got this error from .../node_modules/ng2-konva/ng2-konva.d.ts, found version 4, expected 3, resolving symbol SharedModuleModule in .../src/app/shared-module/shared-module.module.ts, resolving symbol SharedModuleModule in .../src/app/shared-module/shared-module.module.ts

Angular version = 4.4.6
Could you help me?

how to make use for free hand drawing?

i want the user to mouse down and draw ex:box,polygon,pencil,text like paint app.Can help on taht

Using concurrently `konva` and `ng2-konva` leads to a falsely error warning

Hi,

I found out that in cases when a new instance of any class from konva library is created before instantiating ng2-konva components leads to the following falsely error warning (lines 629 - 634 in ng2-konva.js):

if (glob.Konva) {
   console.error(
      'Konva instance is already exist in current eviroment. ' +
      'Please use only one instance.'
   );
}

In our case it is a situation when SystemJS loader already loaded konva.min.js lib (because of any its class is used, like this.tween = new Tween({...})) and only after that ng2-konva.umd.min.js is loaded when any ng2-konva component is instantiated.

The case doesn't mean that any lib is loaded twice at all.

Support for Angular 6 and RxJS 6

Hi,

because RxJS 6 (and Angular 6 uses RxJS 6) changed syntax for imports of all observables from ...
import { Observable } from 'rxjs/Observable'; to ... import { Observable } from 'rxjs'; ... it is now a problem to correctly use ng2-konva with it.

Do you think is it possible to publish release 1.0 which would be fully compatible with Angular 6?

There should be just one change I think ... and it is exactly related to the import of Observable ...

import { Observable } from 'rxjs/Observable'; should be changed to import { Observable } from 'rxjs';

I would be great if you can do it. Thanks.

Demo for Angular Konva not working as intended

On the page for the ng2-konva library, the "Draggable Star" demo is not reflecting the item config changes within the handleDragStart and handleDragEnd functions. It appears that
ngComponent.config.next({ shadowOffsetX: 15, shadowOffsetY: 15, scaleX: ngComponent.getConfig().startScale * 1.2, scaleY: ngComponent.getConfig().startScale * 1.2, });

and

shape.to({ duration: 0.5, easing: Konva.Easings.ElasticEaseOut, scaleX: ngComponent.getConfig().startScale, scaleY: ngComponent.getConfig().startScale, shadowOffsetX: 5, shadowOffsetY: 5 });

are not being applied on drag and drop.

Transformer

I think this repo doesn't support the feature of transformer.
And it's not compatible with angular 10 with ivy.

How to align text in the middle of the screen?

I want to use ko-text and align text in the middle of the screen. I tried to use setOffset() method following this tutorial. https://konvajs.github.io/docs/shapes/Text.html. But failed. Any suggestions?

NG2-KONVA components not recognized in Angular 5.1.0 template

@rafaesc Hi,

after installing konva and ng2-konva and specifying all necessary metadata in a module and trying to place some basic components in a template, VSC editor (version 1.18.1) is unable to find out those components and there is an error like 'ko-stage' is not a known element, 'ko-layer' is not a known element or 'ko-circle' is not a known element.

Also when trying to compile using ngc, it has a problem with the imported KonvaModule which leads to error TS2307: Cannot find module './app.module.ngfactory' ... Unexpected value 'KonvaModule in C:/.../node_modules/ng2-konva/dist/index.d.ts' imported by the module 'AppModule in C:/.../aot/app/app.module.ts'. Please add a @NgModule annotation.

I think that this behavior can be related to requirements for Package Format 5.0 which ng2-konva doesn't fulfill ... import { KonvaModule } from 'ng2-konva'; leads to module ".../node_modules/ng2-konva/dist/index" ... and I am not sure if it is correct due to Package Format 5.0.

The only way how to compile this simple case and also run it without a problem is just only in JIT mode.

import { KonvaModule } from 'ng2-konva';
...
@NgModule({
	...
	imports: [
		...
		KonvaModule
	],
	...
})

<ko-stage [config]="configStage">
	<ko-layer>
		<ko-circle [config]="configCircle" (click)="handleClick($event)"></ko-circle>
	</ko-layer>
</ko-stage>

Check content of different layers

After moving a shape from one layer to another layer using shape.moveTo(...) (eg in the 'star' example from 'layer' to 'dragLayer'), I still see the shape in the children list of 'layer', while the children list of 'dragLayer' is empty. How can we verify the moveTo function is working correctly (and assure optimal performance)?
Thanks if anyone could comment.

Konva instance is already exist in current eviroment

Hi,

I'm using Angular 5 and I'm getting the following error in the console log:
"Konva instance is already exist in current eviroment. Please use only one instance."

I looked in to it and saw that the konva npm package loads before ng2-konva.

konva/konva.js
ng2-konva/ng2-konva.es5.js

Doesn't work with a *ngif div

So i tried this code:

`<ko-layer #howerlayer>

  <div *ngFor="let layer of layers">

      <ko-group>
        <div *ngFor="let run of [0,1,2,3]">
          <ko-line [config]="generateLineConfig(layer, run)"></ko-line>
        </div>
        <ko-rect [config]="generateRectangleConfig(layer)"
                 (click)="mouseSingleClickEvenet($event)"
                 (mouseout)="mouseOutOfObject($event)"
                 (mousemove)="mouseInObject($event)">
        </ko-rect>
      </ko-group>

  <div *ngIf="someDataThatCanBeNull">
    <ko-rect [config]="genereateRectangleConfig"></ko-rect>
  </div>

  </div>

</ko-layer> `

The Problem is here, when the part with the ngif statement is not null it should appear, but it doesen't every time, when it gets redrawn it shows, that the data gets loaded but it doesn't appear.

Could you fix this or maybe help me out ?

br
D4rkn

hello How to use "image" in "ng2-konva"

Star example doesn't work as expected

In the star example you have 2 methods in the source code that seems to not be used handleDragstart and handleDragend.

I tried to fix it by using the dragstart and dragend events but I get an error at ngComponent.config.next

Do you have any idea how to fix it and make it work like in the Konva docs - Elastic_Stars ?

Animations

Is it possible to do animations like such: https://konvajs.github.io/docs/animations/Create_an_Animation.html

I see sprites do support animation but I need to animate a line which doesn't extend it from what I can tell. Thanks.

Why does this project no longer seem to be maintained?

How much can it still be used? Thanks

Yarn build failed - Development documentation

I was going to add some features for angular konva such as grouping and upgrading to the latest version of Angular 12.2.20.

but unable to build the project using yarn or npm. Are you able to add some documentation for contributors?

yarn install

/usr/bin/node /usr/lib/node_modules/yarn/bin/yarn.js install
yarn install v1.22.11
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
warning @angular-devkit/build-angular > [email protected]: 3.x is no longer supported
warning @angular-devkit/build-angular > [email protected]: This module is no longer maintained, try this instead:
  npm i nyc
Visit https://istanbul.js.org/integrations for other alternatives.
warning @angular-devkit/build-angular > @angular-devkit/core > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @angular-devkit/build-angular > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @angular-devkit/build-angular > node-sass > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning @angular-devkit/build-angular > node-sass > node-gyp > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning @angular-devkit/build-angular > @angular-devkit/core > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @angular-devkit/build-angular > webpack-dev-server > sockjs > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning @angular-devkit/build-angular > node-sass > request > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning @angular-devkit/build-angular > webpack-dev-middleware > webpack-log > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning @angular-devkit/build-angular > node-sass > request > [email protected]: this library is no longer supported
warning @angular/cli > @schematics/update > npm-registry-client > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve.
[3/5] Fetching packages...
warning [email protected]: Invalid bin field for "mini-css-extract-plugin".
warning [email protected]: Invalid bin field for "url-loader".
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning "@angular-devkit/build-angular > @ngtools/[email protected]" has incorrect peer dependency "typescript@~2.4.0 || ~2.5.0 || ~2.6.0 || ~2.7.0".
warning " > @angular/[email protected]" has incorrect peer dependency "typescript@>=2.7.2 <2.8".
warning "@angular/compiler-cli > [email protected]" has incorrect peer dependency "typescript@>=2.4.2 <2.9".
warning " > [email protected]" has unmet peer dependency "tsickle@>=0.27.3".
warning " > [email protected]" has unmet peer dependency "file-loader@*".
[5/5] Building fresh packages...
[1/4] ⢀ node-sass
[-/4] ⢀ waiting...
[-/4] ⢀ waiting...
error /u1/code/personal/ng2-konva/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /u1/code/personal/ng2-konva/node_modules/node-sass
Output:
Building: /usr/bin/node /u1/code/personal/ng2-konva/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/bin/node',
gyp verb cli   '/u1/code/personal/ng2-konva/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` succeeded python2 /usr/bin/python2
gyp verb check python version `/usr/bin/python2 -c "import platform; print(platform.python_version());"` returned: "2.7.18\n"
gyp verb get node dir no --target version specified, falling back to host node version: 16.9.1
gyp verb command install [ '16.9.1' ]
gyp verb install input version string "16.9.1"
gyp verb install installing version: 16.9.1
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 16.9.1
gyp verb build dir attempting to create "build" dir: /u1/code/personal/ng2-konva/node_modules/node-sass/build
gyp verb build dir "build" dir needed to be created? /u1/code/personal/ng2-konva/node_modules/node-sass/build
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: /u1/code/personal/ng2-konva/node_modules/node-sass/build/config.gypi
(node:7560) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
(Use `node --trace-deprecation ...` to show where the warning was created)
gyp verb config.gypi checking for gypi file: /u1/code/personal/ng2-konva/node_modules/node-sass/config.gypi
gyp verb common.gypi checking for gypi file: /u1/code/personal/ng2-konva/node_modules/node-sass/common.gypi
gyp verb gyp gyp format was not specified; forcing "make"
gyp info spawn /usr/bin/python2
gyp info spawn args [
gyp info spawn args   '/u1/code/personal/ng2-konva/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/u1/code/personal/ng2-konva/node_modules/node-sass/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/u1/code/personal/ng2-konva/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/dinesh/.node-gyp/16.9.1/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/home/dinesh/.node-gyp/16.9.1',
gyp info spawn args   '-Dnode_gyp_dir=/u1/code/personal/ng2-konva/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/home/dinesh/.node-gyp/16.9.1/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/u1/code/personal/ng2-konva/node_modules/node-sass',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp verb command build []
gyp verb build type Release
gyp verb architecture x64
gyp verb node dev dir /home/dinesh/.node-gyp/16.9.1
gyp ERR! build error 
gyp ERR! stack Error: not found: make
gyp ERR! stack     at getNotFoundError (/u1/code/personal/ng2-konva/node_modules/which/which.js:13:12)
gyp ERR! stack     at F (/u1/code/personal/ng2-konva/node_modules/which/which.js:68:19)
gyp ERR! stack     at E (/u1/code/personal/ng2-konva/node_modules/which/which.js:80:29)
gyp ERR! stack     at /u1/code/personal/ng2-konva/node_modules/which/which.js:89:16
gyp ERR! stack     at /u1/code/personal/ng2-konva/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /u1/code/personal/ng2-konva/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:198:21)
gyp ERR! System Linux 5.11.0-34-generic
gyp ERR! command "/usr/bin/node" "/u1/code/personal/ng2-konva/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /u1/code/personal/ng2-konva/node_modules/node-sass
gyp ERR! node -v v16.9.1
gyp ERR! node-gyp -v v3.6.2



warning Error running install script for optional dependency: "/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass
Output:
Building: /usr/bin/node /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/bin/node',
gyp verb cli   '/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing \"build\" directory
gyp verb command configure []
gyp verb check python checking for Python executable \"python2\" in the PATH
gyp verb `which` succeeded python2 /usr/bin/python2
gyp verb check python version `/usr/bin/python2 -c \"import sys; print \"2.7.18
gyp verb check python version .%s.%s\" % sys.version_info[:3];\"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 16.9.1
gyp verb command install [ '16.9.1' ]
gyp verb install input version string \"16.9.1\"
gyp verb install installing version: 16.9.1
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check \"installVersion\"
gyp verb got \"installVersion\" 9
gyp verb needs \"installVersion\" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 16.9.1
gyp verb build dir attempting to create \"build\" dir: /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass/build
gyp verb build dir \"build\" dir needed to be created? /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass/build
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass/build/config.gypi
(node:7567) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
(Use `node --trace-deprecation ...` to show where the warning was created)
gyp verb config.gypi checking for gypi file: /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass/config.gypi
gyp verb common.gypi checking for gypi file: /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass/common.gypi
gyp verb gyp gyp format was not specified; forcing \"make\"
gyp info spawn /usr/bin/python2
gyp info spawn args [
gyp info spawn args   '/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/dinesh/.node-gyp/16.9.1/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/home/dinesh/.node-gyp/16.9.1',
gyp info spawn args   '-Dnode_gyp_dir=/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/home/dinesh/.node-gyp/16.9.1/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp verb command build []
gyp verb build type Release
gyp verb architecture x64
gyp verb node dev dir /home/dinesh/.node-gyp/16.9.1
gyp ERR! build error 
gyp ERR! stack Error: not found: make
gyp ERR! stack     at getNotFoundError (/u1/code/personal/ng2-konva/node_modules/which/which.js:13:12)
gyp ERR! stack     at F (/u1/code/personal/ng2-konva/node_modules/which/which.js:68:19)
gyp ERR! stack     at E (/u1/code/personal/ng2-konva/node_modules/which/which.js:80:29)
gyp ERR! stack     at /u1/code/personal/ng2-konva/node_modules/which/which.js:89:16
gyp ERR! stack     at /u1/code/personal/ng2-konva/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /u1/code/personal/ng2-konva/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:198:21)
gyp ERR! System Linux 5.11.0-34-generic
gyp ERR! command \"/usr/bin/node\" \"/u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\" \"--verbose\" \"--libsass_ext=\" \"--libsass_cflags=\" \"--libsass_ldflags=\" \"--libsass_library=\"
gyp ERR! cwd /u1/code/personal/ng2-konva/node_modules/@angular-devkit/build-angular/node_modules/node-sass
gyp ERR! node -v v16.9.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1"
info This module is OPTIONAL, you can safely ignore this error

Process finished with exit code 1

problem with disable filter

Hi, I want to add a filter to the image and then delete the filter, but after deleting the image, the quality decreases.
this image show result
http://dls.kingblack.ir/files/problem%20konva.png

After the stage is redrawn, the original event will be triggered multiple times. Is there a way to reset or refresh the stage?

    <ko-stage #stage [config]="configStage">
        <ko-layer #layer [config]="configLayer">
        </ko-layer>
    </ko-stage>

    this.stage.getStage().addEventListener(
      'touchstart mousedown',
      (evt) => {

Documentation on ko-image

Hi *,

I spend half of today figuring out how to display an image on a konva layer in an angular app. Maybe an example in the documentation regarding image handling could save noobs like me a lot of time. But maybe it's just me. Anyway, here's what worked for me (disclaimer: since I'm a javascript beginner, maybe my approach is completely wrong):

import { Component, OnInit, EventEmitter } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Observable, of } from 'rxjs';

// declare window to remove typescript warning
interface Window {
  Image: any;
}
declare const window: Window;

@Component({
  selector: 'app-detail',
  templateUrl: './app-detail.component.html',
  styleUrls: ['./app-detail.component.css']
})
export class DetailComponent implements OnInit {
  public configStage: Observable<any> = of({
    width: 700,
    height: 1000
  });

  public configImage:EventEmitter<any> = new EventEmitter();

  constructor(private route: ActivatedRoute) { }

  showImage(src: string) {
    const image = new window.Image();
    image.src = src;
    image.onload = () => {
      this.configImage.emit({
        image: image,
      })
    }
  }

  ngOnInit() {
    this.showImage('/path/to/image');
  }
}

Dynamically adding objects to Konva stage

I'm trying to add objects to my Konva stage by clicking on buttons.
I adjusted the star example but I can't get it to work. Is there a way to do that? :)

https://gist.github.com/saitho/a244927f4dc9ea73b50eb8f86a833047

Angular 17

Will there be a Version for Angular 17?

Create custom components

Is it possible to create custom components that always have some pre-existing behaviour.

I'd like to create and visual programming interface with blocks that can be linked to each other. A bit like Unreal Engine 4 Blueprints.

So I'd like to make for example a FloatBlock component that always has some particular behaviour.

resizable rectangle

HI,
I need to create a draggable and resizable rectangle. Currently I can drag the rectangle but I can't resize it. How can I do it , which method should I use?

code:
html component:
<ko-stage #stage [config]="configStage">
<ko-layer #layer>
<ko-rect [config]="configRect"#rect >

ts component:
import { Component, ViewChild, OnInit } from '@angular/core';
import { of, Observable } from 'rxjs';
import { KonvaComponent } from 'ng2-konva';

@component({
selector: 'app-camera-img',
templateUrl: './camera-img.component.html',

})
export class CameraImgComponent implements OnInit {
@ViewChild('stage') stage: KonvaComponent;
@ViewChild('layer') layer: KonvaComponent;
@ViewChild('rect') rect: KonvaComponent;

public configStage: Observable = of({
width: 400,
height: 200
});

public configRect: Observable = of({
x: 160,
y: 60,
width: 100,
height: 90,
fill: 'red',
name: 'rect',
stroke: 'black',
draggable: true,
});

constructor(
private apiBackendService: ApiBackendService
) {
}
ngOnInit() {
}
}

old version can be installed from npm

In a new angular app, the example code copy-pasted. The mentioned error message appeared. As I see in the code, there is no NgKonvaEventObject.

Click coordinates?

I wonder whether there's a way to get the coordinates of a click?

The concept of further development ...

Hi,

I would like to open the theme of further development of your library. I mean especially things like:

support for grouping (like ko-group),
support for cloning (keeping Angular API even when you need to clone existing Angular component instances to newly created ones),
and others.

Are you open to that?

Version 2.0.3 is unusable ... wrong package format

Rafael, version 2.0.3 is unusable ... just wrong package format. Version 2.0.2 was OK.

Cant create dynamic stage component

Hello

I am trying to create a dynamic stage components but then I cant get the stage to add my layers/shapes to. Can you make this possible or am I missing something?

How to change and update the created list in an HTML template?

Hello.
I created in html-template list

<ko-group *ngFor="let item of listItems" [config]="item.getConfigGroup()" (click)="handleClick($event)">
  <ko-image [config]="item.getConfigImage()"></ko-image>
  <ko-line [config]="item.getConfigAix()"></ko-line>
</ko-group>

In the list I can change the configs, but I can not increase the list or decrease.
The list in the code grows, but not on the canvas

Highest Angular version

What is the highest angular version with which this works?

Current Angular version: 18.0.6

ng2-konva not working in angular 4

Hi,

Getting following errors:

ERROR in node_modules/konva/konva.d.ts (550,84): Cannot find name 'ImageBitmap'.

ERROR in node_modules/konva/konva.d.ts (551,84): Cannot find name 'ImageBitmap'.

ERROR in node_modules/konva/konva.d.ts (552,84): Cannot find name 'ImageBitmap'.

ERROR in node_modules/konva/konva.d.ts (572,23): Cannot find name 'Path2D'.

angular version: 4
angular/cli: 1.0.6
node: 6.9.2

Error "Please add a @NgModule annotation" with Angular 5

It seems that there is some kind of bug with ng2-konva using with Angular 5.0.3

Reproduce:

Create a new project with angular CLI (1.5.4)
Install the actual ng2-konva version
Follow the quick starte guide from here https://www.npmjs.com/package/ng2-konva
Try to build production: ng build --prod

This will give you the following error:
ERROR in Error: Unexpected value 'KonvaModule in C:/private/projects/testkonva/node_modules/ng2-konva/dist/index.d.ts' imported by the module 'AppModule in C:/private/projects/testkonva/src/app/app.module.ts'. Please add a @NgModule annotation.

Thanks in advance!

Is this a dead repo?

I see the react repo being maintained, but not this one. It'd be nice for Angular to have the same level of support.

can not even compile, please fix it!!!

My team keeps getting the error after the module imported:
ERROR in Error: KonvaModule is not an NgModule
at _getNgModuleMetadata (C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@angular\compiler-cli\src\ngtools_impl.js:140:15)
at _extractLazyRoutesFromStaticModule (C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce (native)
at _extractLazyRoutesFromStaticModule (C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@angular\compiler-cli\src\ngtools_impl.js:128:10)
at Object.listLazyRoutesOfModule (C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@ngtools\webpack\src\plugin.js:241:66)
at _donePromise.Promise.resolve.then.then.then.then.then (C:\Users\Bradley\Desktop\SMG\Project\GamePortalAngular\GamePortal\node_modules@ngtools\webpack\src\plugin.js:495:24)
at process._tickCallback (internal/process/next_tick.js:109:7)

Cannot find name 'ImageBitmap'

Hi,

after installing and configuring ng2, following this link - https://www.npmjs.com/package/ng2-konva-, I got this error from node_modules/konva/konva.d.ts (551,84): Cannot find name 'ImageBitmap'.

Could you help me, please to fix this issue ?