first svelte demos

ink-docstrap/template/tmpl/layout.tmpl

@@ -62,6 +62,13 @@
               Vue
             </a>
 
+          </li>
+
+					<li class="main-nav-item">
+            <a href="/docs/svelte/index.html" class="main-nav-link">
+              Svelte
+            </a>
+
           </li>
 
 					<li class="main-nav-item">

source/docs/svelte/Cache.md

@@ -0,0 +1,21 @@
+title: How to cache canvas shapes with Vue
+layout: vue_page
+---
+
+
+If you want to cache a node in `vue` app, you need to have an access to Konva node and use `node.cache()` function.
+
+To get an access to a node you can use references and `component.getNode()` method:
+
+**Instruction: try to drag whole stage. Then try again with cached group.**
+
+You should see much better performance.
+
+```javascript
+// in template:
+<v-group ref="group">
+// later in the code:
+this.$refs.group.getNode().cache();
+```
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/cache?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

source/docs/svelte/Custom_Shape.md

@@ -0,0 +1,14 @@
+title: How to draw custom canvas shape with Vue?
+layout: vue_page
+---
+
+To create a custom shape with `vue-konva`, we should use `v-shape` component.
+
+When creating a custom shape, we need to define a drawing function that is passed a Konva.Canvas renderer.
+
+We can use the renderer to access the HTML5 Canvas context, and to use special methods like `context.fillStrokeShape(shape)` which automatically handles filling, stroking, and applying shadows.
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/custom_shape?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+
+

source/docs/svelte/Drag_And_Drop.md

@@ -0,0 +1,12 @@
+title: Drag and drop canvas shapes with vue
+layout: vue_page
+---
+
+To enable drag&drop for any node on canvas you just need to pass `draggable: true` property into the component.
+
+When you drag&drop shape it is recommended to save its position into you app store. You can use `dragmove` and `dragend` events for that purpose.
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/drag_and_drop?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+
+

source/docs/svelte/Events.md

@@ -0,0 +1,14 @@
+title: How to listen to an event on a canvas shape with Vue and Konva?
+layout: vue_page
+---
+
+With `vue-konva` you can easily listen to user input events (`click`, `dblclick`, `mouseover`, `tap`, `dbltap`, `touchstart`, etc...) and drag&drop events (`dragstart`, `dragmove`, `dragend`).
+
+For the full list of events take a look into [on() method documentation](/api/Konva.Node.html#on).
+
+
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/events?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+
+

source/docs/svelte/Filters.md

@@ -0,0 +1,13 @@
+title: How to apply canvas filters with vue and konva?
+layout: vue_page
+---
+
+To apply filters you need to cache `Konva.Node` manually. You can do it `created()` method.
+Probably you will need to recache nodes every time you update their styles in `updated()`.
+
+Instructions: click on the rectangle to see changes
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/filters?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+
+

source/docs/svelte/Images.md

@@ -0,0 +1,10 @@
+title: How to draw image on canvas with Vue?
+layout: vue_page
+---
+
+For images you need manually create native window.Image instance or `canvas` element and use it as image attribute of `v-image` component.
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/images?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+
+

source/docs/svelte/Save-Load.md

@@ -0,0 +1,13 @@
+title: Saving and loading canvas with Vue and Konva
+layout: vue_page
+---
+
+## How to serialize and deserialize Konva stage with Vue?
+
+Pure `Konva` has special mechanizm to save/load full canvas stage with `node.toJSON()` and `Node.create(json)` functions.
+[See demo](/docs/data_and_serialization/Simple_Load.html).
+
+But we don't recommend to use these methods if you are using `vue-konva`. In `vue-konva` you should have a state of the app defined in your vue components. That state maps into nodes with templates. To save/load full stage you just need to save/load state of the app and you **don't need to save Konva internals and nodes**.
+
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/save-load?hidenavigation=1&view=split&fontsize=10&module=%2Fsrc%2FApp.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

source/docs/svelte/Shapes.md

@@ -0,0 +1,15 @@
+title: Drawing canvas shapes with Svelte
+layout: svelte_page
+
+---
+
+All `svelte-konva` components correspond to `Konva` components of the same name.
+All the parameters available for `Konva` objects are valid props for
+corresponding `svelte-konva` components, unless noted otherwise.
+
+Core shapes are: Rect, Circle, Ellipse, Line, Image, Text, TextPath, Star,
+Label, SVG Path, RegularPolygon. You can also create custom shapes.
+
+To get more info about Konva you can read [Konva Overview](/docs/overview.html).
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/svelte-demos/shapes?hidenavigation=1&view=split&fontsize=10&module=/App.svelte" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

source/docs/svelte/Simple_Animations.md

@@ -0,0 +1,14 @@
+title: How to apply canvas animations with vue and konva?
+layout: vue_page
+---
+
+Konva itself has two methods for animations [Tween](/docs/tweens/Linear_Easing.html) and [Animation](/docs/animations/Rotation.html). You can apply both of them to nodes manually.
+
+For simple use cases we recommend to use `node.to()` method.
+
+Instructions: Try to move a rectangle.
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/simple_animations?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+
+

source/docs/svelte/Transformer.md

@@ -0,0 +1,16 @@
+title: How to resize and rotate canvas shapes with vue and konva?
+layout: vue_page
+---
+
+Currently there is no good pure declarative "vue-way" to use Transformer tool.
+But you still can use it with some small manual requests to the Konva nodes.
+And it will work just fine.
+
+Idea: you need to create `Konva.Transformer` node, and attach it into required node manually.
+
+Instructions: click on shape to select it.
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/transformer?hidenavigation=1&view=split&fontsize=10&module=/src/App.vue" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+
+

source/docs/svelte/index.md

@@ -0,0 +1,40 @@
+title: Getting started with svelte and canvas via Konva
+layout: svelte_page
+
+---
+
+## How to use canvas with Svelte?
+
+`svelte-konva` is a JavaScript library for drawing complex canvas graphics using Svelte.
+
+GitHub: https://github.com/konvajs/svelte-konva
+
+It provides declarative and reactive bindings to the [Konva Framework](https://konvajs.org/).
+
+All `svelte-konva` components correspond to `Konva` components of the same name with the prefix 'v-'. All the parameters available for `Konva` objects can add as `config` in the prop for corresponding `svalte-konva` components.
+
+To get more info about `Konva` you can read [Konva Overview](https://konvajs.org/docs/overview.html).
+
+## Quick Start
+
+### 1 Install via npm
+
+```npm
+npm i svelte-konva konva
+```
+
+### 2 Import and use svelte konva components
+
+```js
+<script>
+  import { Stage, Layer, Rect } from 'svelte-konva';
+</script>
+
+<Stage config={{ width: 1000, height: 1000 }}>
+  <Layer>
+    <Rect config={{ x: 100, y: 100, width: 400, height: 200, fill: 'blue' }} />
+  </Layer>
+</Stage>
+```
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/svelte-demos/basic_demo?hidenavigation=1&view=split&fontsize=10&module=%2FApp.svelte" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

source/docs/svelte/zIndex.md

@@ -0,0 +1,18 @@
+title: How to change the zIndex of nodes with Vue?
+layout: vue_page
+---
+
+## How to change the zIndex and reorder components in `vue-konva`?
+
+When you are working with `Konva` directly you have many methods to change the order of nodes like `node.zIndex(5)`, `node.moveToTop()`, etc. [Tutorial](/docs/groups_and_layers/Layering.html).
+
+But it is not recommended to use these methods when you are working with the `vue` framework.
+
+`vue-konva` is trying to follow the order of the nodes exactly as you described them in your `<template>`. So instead of changing the `zIndex` manually, you just need to update the data of the app correctly, so the components inside your `<template>` maintain the correct order.
+
+Don't use the `zIndex` for your canvas components.
+
+Instructions: Try to drag a circle. See how it goes to the top. We are doing this by manipulating the data of the app so that the circles inside the `<template>` maintain the correct order.
+
+
+<iframe src="https://codesandbox.io/embed/github/konvajs/site/tree/master/vue-demos/zIndex?hidenavigation=1&view=split&fontsize=10" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

source/docs/tools.md

@@ -1,8 +1,8 @@
-title: Konva.js Tools and Plugins
----
+## title: Konva.js Tools and Plugins
 
-* [Konva + React](https://github.com/lavrton/react-konva/)
-* [Konva + Vue](https://github.com/rafaesc/vue-konva)
-* [Konva + Backbone](https://github.com/lavrton/backbone.konvaview)
-* [Konva + Knockout](https://github.com/mcintyre321/knockout-konva)
-* [Typescript definitions](https://github.com/konvajs/konva/blob/master/src/index-types.d.ts)
+- [Konva + React](https://github.com/konvajs/react-konva/)
+- [Konva + Vue](https://github.com/konvajs/vue-konva)
+- [Konva + Svelte](https://github.com/konvajs/vue-konva)
+- [Konva + Backbone](https://github.com/lavrton/backbone.konvaview)
+- [Konva + Knockout](https://github.com/mcintyre321/knockout-konva)
+- [Typescript definitions](https://github.com/konvajs/konva/blob/master/src/index-types.d.ts)

source/index.jade

@@ -33,7 +33,7 @@ comments: false
 
           .feature
             img(src="/assets/features/undraw_voice_interface_eckp.svg")
-            h3.desc Native integration with web frameworks such as React and Vue
+            h3.desc Native integration with web frameworks such as React, Vue and Svelte
 
           .feature
             img(src="/assets/features/undraw_drag_5i9w.svg")

svelte-demos/basic_demo/App.svelte

@@ -0,0 +1,64 @@
+<script>
+	import { Stage, Layer, Star } from "svelte-konva";
+
+	let width = window.innerWidth;
+	let height = window.innerHeight;
+	let list = [];
+	for (let n = 0; n < 30; n++) {
+	  list.push({
+	    id: Math.round(Math.random() * 10000).toString(),
+	    x: Math.random() * width,
+	    y: Math.random() * height,
+	    rotation: Math.random() * 180,
+	    scale: Math.random()
+	  });
+	}
+	let dragItemId = null;
+
+	let handleDragStart = e => {
+	  // save drag element:
+	  dragItemId = e.detail.target.id();
+	  // move current element to the top:
+	  const item = list.find(i => i.id === dragItemId);
+	  // const index = list.indexOf(item);
+	  // list.splice(index, 1);
+	  // list.push(item);
+	};
+	let handleDragEnd = e => {
+	  const item = list.find(i => i.id === dragItemId);
+	  if (!item) {
+	    return;
+	  }
+	  item.x = e.detail.target.x();
+	  item.y = e.detail.target.y();
+	  dragItemId = null;
+	};
+</script>
+
+<Stage config={{ width, height }}>
+  <Layer>
+	{#each list as item (item.id)}
+		<Star config={{
+			x: item.x,
+			y: item.y,
+			rotation: item.rotation,
+			id: item.id,
+			numPoints: 5,
+			innerRadius: 30,
+			outerRadius: 50, fill: '#89b717',
+			opacity: 0.8,
+			draggable: true,
+			scaleX: dragItemId === item.id ? item.scale * 1.2 : item.scale,
+			scaleY: dragItemId === item.id ? item.scale * 1.2 : item.scale,
+			shadowColor: 'black',
+			shadowBlur: 10,
+			shadowOffsetX: dragItemId === item.id ? 15 : 5,
+			shadowOffsetY: dragItemId === item.id ? 15 : 5,
+			shadowOpacity: 0.6
+    }}
+		on:dragstart={handleDragStart}
+		on:dragend={handleDragEnd}
+		/>
+	{/each}
+  </Layer>
+</Stage>

svelte-demos/basic_demo/index.js

@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.body
+});
+
+export default app;

svelte-demos/basic_demo/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "svelte-konva",
+  "version": "1.0.0",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.10.1",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-svelte": "^6.1.1",
+    "rollup-plugin-terser": "^4.0.4",
+    "sirv-cli": "^0.3.1"
+  },
+  "dependencies": {
+    "konva": "9.0.1",
+    "svelte": "3.29.4",
+    "svelte-konva": "0.1.1"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "autobuild": "rollup -c -w",
+    "dev": "run-p start:dev autobuild",
+    "start": "sirv public",
+    "start:dev": "sirv public --dev"
+  },
+  "keywords": ["svelte", "starter"],
+  "description": "Svelte example starter project"
+}

svelte-demos/basic_demo/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>Svelte Konva app</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>