add docs for svg.select.js

.gitignore

@@ -1,4 +1,5 @@
 .vitepress/dist
 .vitepress/cache
 .vitepress/.temp
-node_modules
+node_modules
+dist

demo.md

@@ -11,6 +11,9 @@
   const polygonNormal = ref();
   const polygonSnap = ref();
   const polygonCtrl = ref();
+  const polygonPreserve = ref();
+  const polygonCenter = ref();
+  const polygonCustomHandles = ref();
 
   onMounted(() => {
     new SVG()
@@ -27,7 +30,7 @@
       .polygon("350,50 283,250 450,122 250,122 416,250")
       .select()
       .pointSelect()
-      .resize();
+      .resize({'grid': 20, 'degree':15});
 
     var poly = new SVG().addTo(polygonCtrl.value)
       .size("100%", "100%")
@@ -47,10 +50,38 @@
           poly.resize({'grid': 1,'degree':0.1});
       }
     })
+
+    new SVG()
+      .addTo(polygonPreserve.value)
+      .size("100%", "100%")
+      .polygon("350,50 283,250 450,122 250,122 416,250")
+      .select()
+      .resize({ preserveAspectRatio: true });
+
+    new SVG()
+      .addTo(polygonCenter.value)
+      .size("100%", "100%")
+      .polygon("350,50 283,250 450,122 250,122 416,250")
+      .select()
+      .resize({ preserveAspectRatio: true, aroundCenter: true });
+
+    new SVG()
+      .addTo(polygonCustomHandles.value)
+      .size("100%", "100%")
+      .polygon("350,50 283,250 450,122 250,122 416,250")
+      .select({
+        createHandle: (group) => group.rect(10, 10).css({"fill": "red"}),
+        updateHandle: (shape, p) => shape.center(p[0], p[1]),
+      })
+      .pointSelect({
+        createHandle: (group) => group.circle(10).css({"fill": "blue"}),
+        updateHandle: (shape, p) => shape.center(p[0], p[1]),
+      })
+      .resize();
   })
 </script>
 
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
+This page shows usage of the select and resize library
 
 ## Normal resizing
 
@@ -105,3 +136,49 @@ window.addEventListener("keyup", function (e) {
 ```
 
 <div ref="polygonCtrl" class="box"></div>
+
+## Preserve aspect ratio
+
+```ts
+new SVG()
+  .addTo("#polygon_preserve")
+  .size("100%", "100%")
+  .polygon("350,50 283,250 450,122 250,122 416,250")
+  .select()
+  .resize({ preserveAspectRatio: true });
+```
+
+<div ref="polygonPreserve" class="box"></div>
+
+## Scale around center
+
+```ts
+new SVG()
+  .addTo("#polygon_center")
+  .size("100%", "100%")
+  .polygon("350,50 283,250 450,122 250,122 416,250")
+  .select()
+  .resize({ preserveAspectRatio: true, aroundCenter: true });
+```
+
+<div ref="polygonCenter" class="box"></div>
+
+## Custom handles
+
+```ts
+new SVG()
+  .addTo("#polygon_custom_handles")
+  .size("100%", "100%")
+  .polygon("350,50 283,250 450,122 250,122 416,250")
+  .select({
+    createHandle: (group) => group.rect(10, 10).css({ fill: "red" }),
+    updateHandle: (shape, p) => shape.center(p[0], p[1]),
+  })
+  .pointSelect({
+    createHandle: (group) => group.circle(10).css({ fill: "blue" }),
+    updateHandle: (shape, p) => shape.center(p[0], p[1]),
+  })
+  .resize();
+```
+
+<div ref="polygonCustomHandles" class="box"></div>

package.json

@@ -7,7 +7,7 @@
   },
   "devDependencies": {
     "@svgdotjs/svg.js": "^3.2.4",
-    "@svgdotjs/svg.resize.js": "^2.0.0",
+    "@svgdotjs/svg.resize.js": "^2.0.1",
     "@svgdotjs/svg.select.js": "^4.0.0",
     "vitepress": "^1.2.3"
   }