chore: add ko-fi funding link

Author: xiaoiver

.github/FUNDING.yml

@@ -2,13 +2,13 @@
 
 github: xiaoiver
 patreon: # Replace with a single Patreon username
-open_collective: infinite-canvas-tutorial
-ko_fi: # Replace with a single Ko-fi username
+open_collective: # Replace with a single Open Collective username
+ko_fi: yuqipan
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
 polar: # Replace with a single Polar username
-buy_me_a_coffee: pyqiverson0
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
 custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

README.md

@@ -7,6 +7,8 @@
 
 > [My free course in Gumroad]. Feel free to rate!
 
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/U7U71DK7IM)
+
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vite-tvhpcpvl?file=main.js)
 
 What is an Infinite Canvas? The term "infinite" in [infinitecanvas] is described as follows:

README.zh_CN.md

@@ -7,6 +7,8 @@
 
 > [我在 Gumroad 上的免费课程]，欢迎评分！
 
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/U7U71DK7IM)
+
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vite-tvhpcpvl?file=main.js)
 
 什么是无限画布？[infinitecanvas] 对“无限”的描述如下：

packages/webcomponents/src/API.ts

@@ -337,6 +337,35 @@ export class API {
     );
   }
 
+  deleteNodesById(ids: SerializedNode['id'][]) {
+    const nodes = this.getNodes();
+    const index = nodes.findIndex((n) => ids.includes(n.id));
+    if (index !== -1) {
+      nodes.splice(index, 1);
+    }
+
+    ids.forEach((id) => {
+      const entity = this.#idEntityMap.get(id);
+      if (entity) {
+        entity.id().delete();
+      }
+      this.#idEntityMap.delete(id);
+    });
+
+    this.setNodes(nodes);
+
+    this.#store.shouldUpdateSnapshot();
+    this.#store.commit(arrayToMap(this.getNodes()), this.getAppState());
+
+    this.element.dispatchEvent(
+      new CustomEvent(Event.NODE_DELETED, {
+        detail: {
+          nodes,
+        },
+      }),
+    );
+  }
+
   undo() {
     const result = this.#history.undo(
       arrayToMap(this.getNodes()),

packages/webcomponents/src/event.ts

@@ -22,6 +22,7 @@ export enum Event {
   TASK_CHANGED = 'ic-task-changed',
   NODES_UPDATED = 'ic-nodes-updated',
   NODE_UPDATED = 'ic-node-updated',
+  NODE_DELETED = 'ic-node-deleted',
   VISIBILITY_CHANGED = 'ic-visibility-changed',
   SELECTED_NODES_CHANGED = 'ic-selected-nodes-changed',
 }
@@ -43,6 +44,7 @@ declare global {
     [Event.SCREENSHOT_DOWNLOADED]: CustomEvent<Screenshot>;
     [Event.NODES_UPDATED]: CustomEvent<{ nodes: SerializedNode[] }>;
     [Event.NODE_UPDATED]: CustomEvent<{ node: SerializedNode }>;
+    [Event.NODE_DELETED]: CustomEvent<{ nodes: SerializedNode[] }>;
     [Event.SELECTED_NODES_CHANGED]: CustomEvent<{
       selected: SerializedNode['id'][];
       preserveSelection: boolean;

packages/webcomponents/src/spectrum/infinite-canvas.ts

@@ -39,6 +39,7 @@ import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import '@spectrum-web-components/picker/sp-picker.js';
 
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-remove.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-text.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-visibility.js';

packages/webcomponents/src/spectrum/layer-thumbnail.ts

@@ -61,8 +61,17 @@ export class LayerThumbnail extends LitElement {
 
     let $el: SVGElement;
 
-    const { type, fill, stroke, strokeWidth } = this
-      .node as CircleSerializedNode;
+    const {
+      type,
+      fill,
+      stroke,
+      strokeWidth,
+      strokeLinecap,
+      strokeLinejoin,
+      strokeMiterlimit,
+      strokeDasharray,
+      strokeDashoffset,
+    } = this.node as CircleSerializedNode;
     if (type === 'circle') {
       $el = createSVGElement('circle') as SVGElement;
       $el.setAttribute('cx', `${minX + width / 2}`);
@@ -99,6 +108,21 @@ export class LayerThumbnail extends LitElement {
       if (strokeWidth) {
         $el.setAttribute('stroke-width', strokeWidth.toString());
       }
+      if (strokeLinecap) {
+        $el.setAttribute('stroke-linecap', strokeLinecap);
+      }
+      if (strokeLinejoin) {
+        $el.setAttribute('stroke-linejoin', strokeLinejoin);
+      }
+      if (strokeMiterlimit) {
+        $el.setAttribute('stroke-miterlimit', strokeMiterlimit.toString());
+      }
+      if (strokeDasharray) {
+        $el.setAttribute('stroke-dasharray', strokeDasharray);
+      }
+      if (strokeDashoffset) {
+        $el.setAttribute('stroke-dashoffset', strokeDashoffset.toString());
+      }
     }
 
     const isGradientOrPattern = isGradient(fill) || isPattern(fill);

packages/webcomponents/src/spectrum/layers-panel.ts

@@ -36,6 +36,11 @@ export class LayersPanel extends LitElement {
       margin: 0;
     }
 
+    .actions {
+      padding: 4px;
+      padding-top: 0;
+    }
+
     .container {
       height: 300px;
       overflow: hidden;
@@ -60,6 +65,25 @@ export class LayersPanel extends LitElement {
     );
   }
 
+  private handleDelete() {
+    const { layersSelected } = this.api.getAppState();
+    this.api.deleteNodesById(layersSelected);
+
+    // Try to select the next layer
+    const nextLayer = this.nodes.find(
+      (node) => !layersSelected.includes(node.id),
+    );
+    if (nextLayer) {
+      this.api.selectNodes([nextLayer.id]);
+    }
+
+    // TODO: scroll to the selected layer
+  }
+
+  private handleAdd() {
+    // this.api.addNodes(this.nodes);
+  }
+
   private handleSelect(e: MouseEvent, id: SerializedNode['id']) {
     const { layersSelected } = this.api.getAppState();
 
@@ -81,6 +105,23 @@ export class LayersPanel extends LitElement {
               <sp-icon-close slot="icon"></sp-icon-close>
             </sp-action-button>
           </h4>
+          <sp-action-group class="actions">
+            <sp-action-button quiet size="s" @click=${this.handleAdd}>
+              <sp-tooltip self-managed placement="bottom">
+                Add new layer
+              </sp-tooltip>
+              <sp-icon-add slot="icon"></sp-icon-add>
+            </sp-action-button>
+            <sp-action-button
+              quiet
+              size="s"
+              @click=${this.handleDelete}
+              .disabled=${layersSelected.length === 0}
+            >
+              <sp-tooltip self-managed placement="bottom"> Delete </sp-tooltip>
+              <sp-icon-delete slot="icon"></sp-icon-delete>
+            </sp-action-button>
+          </sp-action-group>
           <div class="container">
             ${map(this.nodes, (node) => {
               // TODO: hierarchy

packages/webcomponents/src/spectrum/properties-panel-content.ts

@@ -446,6 +446,10 @@ export class PropertiesPanelContent extends LitElement {
   }
 
   render() {
+    if (!this.node) {
+      return;
+    }
+
     const { type } = this.node;
     const isGroup = type === 'g';
     const isText = type === 'text';