docs and types

src/Container.ts

@@ -33,7 +33,7 @@ export interface ContainerConfig extends NodeConfig {
 export abstract class Container<
   ChildType extends Node = Node
 > extends Node<ContainerConfig> {
-  children: Array<ChildType> | undefined = [];
+  children: Array<ChildType> = [];
 
   /**
    * returns an array of direct descendant nodes
@@ -220,7 +220,9 @@ export abstract class Container<
    *  return node.getType() === 'Shape'
    * })
    */
-  findOne<ChildNode extends Node = Node>(selector: string | Function): ChildNode | undefined {
+  findOne<ChildNode extends Node = Node>(
+    selector: string | Function
+  ): ChildNode | undefined {
     var result = this._generalFind<ChildNode>(selector, true);
     return result.length > 0 ? result[0] : undefined;
   }
@@ -313,7 +315,7 @@ export abstract class Container<
    * @returns {Array} array of shapes
    */
   getAllIntersections(pos) {
-    var arr = [];
+    var arr: Shape[] = [];
 
     this.find('Shape').forEach(function (shape: Shape) {
       if (shape.isVisible() && shape.intersects(pos)) {
@@ -341,7 +343,7 @@ export abstract class Container<
     this._requestDraw();
   }
   drawScene(can?: SceneCanvas, top?: Node) {
-    var layer = this.getLayer(),
+    var layer = this.getLayer()!,
       canvas = can || (layer && layer.getCanvas()),
       context = canvas && canvas.getContext(),
       cachedCanvas = this._getCanvasCache(),
@@ -368,7 +370,7 @@ export abstract class Container<
       return this;
     }
 
-    var layer = this.getLayer(),
+    var layer = this.getLayer()!,
       canvas = can || (layer && layer.hitCanvas),
       context = canvas && canvas.getContext(),
       cachedCanvas = this._getCanvasCache(),

src/Node.ts

@@ -148,7 +148,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   parent: Container<Node> | null = null;
   _cache: Map<string, any> = new Map<string, any>();
   _attachedDepsListeners: Map<string, boolean> = new Map<string, boolean>();
-  _lastPos: Vector2d = null;
+  _lastPos: Vector2d | null = null;
   _attrsAffectingSize!: string[];
   _batchingTransformChange = false;
   _needClearTransformCache = false;

src/shapes/Text.ts

@@ -134,7 +134,7 @@ function checkDefaultFill(config: TextConfig) {
  * @param {Object} config
  * @param {String} [config.fontFamily] default is Arial
  * @param {Number} [config.fontSize] in pixels.  Default is 12
- * @param {String} [config.fontStyle] can be 'normal', 'bold', 'italic' or even 'italic bold'.  Default is 'normal'
+ * @param {String} [config.fontStyle] can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'.  'normal' is the default.
  * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
  * @param {String} [config.textDecoration] can be line-through, underline or empty string. Default is empty string.
  * @param {String} config.text
@@ -702,7 +702,7 @@ Factory.addGetterSetter(Text, 'fontFamily', 'Arial');
 Factory.addGetterSetter(Text, 'fontSize', 12, getNumberValidator());
 
 /**
- * get/set font style.  Can be 'normal', 'italic', or 'bold' or even 'italic bold'.  'normal' is the default.
+ * get/set font style.  Can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'.  'normal' is the default.
  * @name Konva.Text#fontStyle
  * @method
  * @param {String} fontStyle

src/shapes/TextPath.ts

@@ -37,7 +37,7 @@ function _strokeFunc(context) {
  * @param {Object} config
  * @param {String} [config.fontFamily] default is Arial
  * @param {Number} [config.fontSize] default is 12
- * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
+ * @param {String} [config.fontStyle] Can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'.  'normal' is the default.
  * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
  * @param {String} [config.textBaseline] Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'. Default is middle
  * @param {String} config.text
@@ -444,7 +444,7 @@ Factory.addGetterSetter(TextPath, 'fontFamily', 'Arial');
 Factory.addGetterSetter(TextPath, 'fontSize', 12, getNumberValidator());
 
 /**
- * get/set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
+ * get/set font style.  Can be 'normal', 'italic', or 'bold', '500' or even 'italic bold'.  'normal' is the default.
  * @name Konva.TextPath#fontStyle
  * @method
  * @param {String} fontStyle

test/sandbox.html

@@ -25,78 +25,47 @@
   </head>
 
   <body>
-    <div id="container" style="background-color: bisque"></div>
+    <div id="container"></div>
 
     <script type="module">
       import Konva from '../src/index.ts';
 
-      const config = {
-        canvas: { width: window.innerWidth, height: window.innerHeight },
-        filter: { pixelSize: 26 },
-        image: { naturalWidth: 500, naturalHeight: 500, scale: 1 },
-        imageCropped: { width: 150, height: 150 },
-        shapeReference: { colorOdd: 'white', colorEven: 'black' },
-      };
-
-      const image = document.createElement('img');
-      image.crossOrigin = 'anonymous';
-      image.src = `https://placekitten.com/${config.image.naturalWidth}/${config.image.naturalHeight}`;
-
       var stage = new Konva.Stage({
         container: 'container',
-        width: config.canvas.width,
+        width: window.innerHeight,
-        height: config.canvas.height,
+        height: window.innerHeight,
       });
 
       var layer = new Konva.Layer();
       stage.add(layer);
 
-      image.onload = async function () {
+      const circle = new Konva.Circle({
-        // await image.decode(); // used to dynamically determine natural dimensions - not needed, in config
+        x: 100,
+        y: 150,
+        radius: 50,
+        fill: 'red',
+        draggable: true,
+      });
+      layer.add(circle);
 
-        var imageOriginal = new Konva.Image({
+      const tr = new Konva.Transformer({
-          x: 0,
+        nodes: [circle],
-          y: 0,
+      });
-          scaleX: config.image.scale,
+      layer.add(tr);
-          scaleY: config.image.scale,
-          image,
-          width: config.image.naturalWidth,
-          height: config.image.naturalHeight,
-        });
 
-        var imageFiltered = new Konva.Image({
+      const dot = new Konva.Circle({
-          cropX: 0,
+        x: 100,
-          cropY: 0,
+        y: 100,
-          cropWidth: config.imageCropped.width,
+        radius: 2,
-          cropHeight: config.imageCropped.height,
+        fill: 'blue',
-          x: 0,
+      });
-          y: 0,
-          scaleX: config.image.scale,
-          scaleY: config.image.scale,
-          image,
-          width: config.imageCropped.width,
-          height: config.imageCropped.height,
-          pixelSize: config.filter.pixelSize,
-        });
 
-        imageFiltered.cache();
+      layer.add(dot);
 
-        imageFiltered.filters([Konva.Filters.Pixelate]);
+      circle.on('transform', () => {
-
+        dot.x(circle.x());
-        var rect = new Konva.Image({
+        dot.y(circle.y() - circle.radius() * circle.scaleY() - 50);
-          x: 0,
+      });
-          y: 0,
-          scaleX: config.image.scale,
-          scaleY: config.image.scale,
-          width: config.imageCropped.width,
-          height: config.imageCropped.height,
-          stroke: 'red',
-          strokeWidth: 0.5,
-        });
-
-        // add the shapes to the layer
-        layer.add(imageOriginal, imageFiltered, rect);
-      };
     </script>
   </body>
 </html>

tsconfig.json

@@ -8,7 +8,8 @@
     "lib": ["ES2015", "dom"],
     "moduleResolution": "node",
     "declaration": true,
-    "removeComments": false
+    "removeComments": false,
+    "strictNullChecks": false,
   },
   "include": ["./src/**/*.ts"]
 }