@pictogrammers/components 0.3.2 → 0.4.0

package/pg/tree/__examples__/basic/basic.ts

@@ -0,0 +1,162 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgTree, { SelectedTreeItem } from '../../tree';
+
+import template from './basic.html';
+import PgTreeButtonIcon from '../../../treeButtonIcon/treeButtonIcon';
+import PgTreeItem from 'pg/treeItem/treeItem';
+
+const IconAccount = 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z';
+const IconFile = 'M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z';
+const IconFolder = 'M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z';
+const IconEye = 'M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z';
+const IconEyeOff = 'M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z';
+const IconLock = 'M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z';
+const IconUnlock = 'M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,0 14,15A2,2 0 0,0 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17Z';
+
+function createFolder(label, expanded = true, items: any[] = []) {
+  return {
+    icon: {
+      path: IconFolder
+    },
+    label,
+    expanded,
+    actions: [{
+      type: PgTreeButtonIcon,
+      icon:  IconEye,
+      enabled: true
+    },
+    {
+      type: PgTreeButtonIcon,
+      label: 'Delete',
+      icon: IconUnlock,
+      enabled: false
+    }],
+    items
+  };
+}
+
+function createItem(label) {
+  return {
+    icon: {
+      path: IconFile
+    },
+    label,
+    actions: [{
+      type: PgTreeButtonIcon,
+      icon:  IconEye,
+      enabled: true
+    },
+    {
+      type: PgTreeButtonIcon,
+      label: 'Delete',
+      icon: IconUnlock,
+      enabled: false
+    }]
+  };
+}
+
+@Component({
+  selector: 'x-pg-tree-basic',
+  template
+})
+export default class XPgTreeBasic extends HTMLElement {
+  @Part() $tree: PgTree;
+  @Part() $addItem: HTMLButtonElement;
+  @Part() $addFolder: HTMLButtonElement;
+  @Part() $removeItem: HTMLButtonElement;
+  @Part() $updateItem: HTMLButtonElement;
+
+  #selectedItems = [];
+
+  connectedCallback() {
+    this.$tree.addEventListener('action', (e: any) => {
+      const item = e.detail.item as SelectedTreeItem;
+      // action clicked
+      const { actionIndex } = e.detail;
+      const action = item.getData().actions[actionIndex];
+      const { enabled } = action;
+      if (actionIndex === 0 && enabled) {
+        action.icon = IconEyeOff;
+        action.enabled = false;
+      } else if (actionIndex === 0 && !enabled){
+        action.icon = IconEye;
+        action.enabled = true;
+      }
+      if (actionIndex === 1 && enabled) {
+        action.icon = IconUnlock;
+        action.enabled = false;
+      } else if (actionIndex === 1 && !enabled){
+        action.icon = IconLock;
+        action.enabled = true;
+      }
+    });
+    this.$tree.addEventListener('move', (e: any) => {
+      this.#selectedItems.forEach((item: any) => {
+        item.move(e.detail.item, e.detail.position);
+      });
+    });
+    this.$tree.addEventListener('rename', (e: any) => {
+      const { indexes, label } = e.detail;
+      const item = this.#getItem(indexes);
+      item.label = label;
+    });
+    this.$tree.addEventListener('menu', (e: any) => {
+      // menu
+    });
+    this.$tree.addEventListener('select', (e: any) => {
+      this.#selectedItems = e.detail.items;
+    });
+    this.$tree.items = [
+      createFolder('Folder 1', true, [
+        createItem('Item 1')
+      ]),
+      createItem('Item 2')
+    ];
+
+    let fileNext: number = 3;
+    this.$addItem.addEventListener('click', () => {
+      this.#selectedItems.forEach((selected: any) => {
+        if (selected.getData().items) {
+          selected.getData().items.push(createItem(`Item ${fileNext}`));
+        } else {
+          selected.getParentData().items.push(createItem(`Item ${fileNext}`));
+        }
+        fileNext++;
+      });
+    });
+
+    let folderNext = 2;
+    this.$addFolder.addEventListener('click', () => {
+      this.#selectedItems.forEach((selected: SelectedTreeItem) => {
+        if (selected.getData().items) {
+          selected.getData().items.push(createFolder(`Folder ${folderNext}`));
+        } else {
+          selected.getParentData().items.push(createFolder(`Folder ${folderNext}`));
+        }
+        folderNext++;
+      });
+    });
+
+    this.$removeItem.addEventListener('click', () => {
+      if (this.#selectedItems.length === 0) {
+        alert('Select items first!');
+      }
+      this.#selectedItems.forEach((item: SelectedTreeItem) => {
+        item.remove();
+      });
+    });
+
+    let updatedTimes = 0;
+    this.$updateItem.addEventListener('click', () => {
+      this.#selectedItems.forEach((selected: SelectedTreeItem) => {
+        selected.getData().label = `Updated ${updatedTimes++}`;
+      });
+    });
+  }
+
+  #getItem(indexes: number[]) {
+    return indexes.reduce((item, index) => {
+      return item.items[index];
+    }, this.$tree);
+  }
+}

package/pg/tree/index.ts

@@ -0,0 +1,3 @@
+import PgTree from './tree';
+
+export default PgTree;

package/pg/tree/tree.css

@@ -0,0 +1,28 @@
+:host {
+  display: contents;
+  --pg-tree-selected-primary: #453C4F;
+  --pg-tree-selected-secondary: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.1));
+  --pg-tree-selected-secondary-hover: var(--pg-tree-item-background-selected, rgb(69, 60, 79, 0.2));
+}
+/*
+--pg-tree-item-background-selected
+*/
+:host(:focus-within) {
+  --pg-tree-selected-primary: rgb(79, 143, 249);
+  --pg-tree-selected-secondary: rgba(79, 143, 249, 0.15);
+  --pg-tree-selected-secondary-hover: rgba(79, 143, 249, 0.25);
+}
+
+[part=items] {
+  display: flex;
+  flex-direction: column;
+  background: var(--pg-tree-background, transparent);
+  padding: 0.25rem;
+  gap: 0.25rem;
+  --x: 0;
+  --pg-_is-dragging: false;
+}
+
+[part=items].dragging {
+  --pg-_is-dragging: true;
+}

package/pg/tree/tree.html

@@ -0,0 +1 @@
+<div part="items"></div>

package/pg/tree/tree.ts

@@ -0,0 +1,217 @@
+import { Component, Prop, Part, forEach, getProxyValue } from '@pictogrammers/element';
+
+import PgTreeItem from '../treeItem/treeItem';
+
+import template from './tree.html';
+import style from './tree.css';
+
+export type SelectedTreeItem = {
+  indexes: number[];
+  remove: () => void;
+  getData: () => any;
+  getParentData: () => any;
+}
+
+function move(arr, fromIndex, toIndex) {
+  const [element] = arr.splice(fromIndex, 1);
+  arr.splice(toIndex, 0, element);
+}
+
+@Component({
+  selector: 'pg-tree',
+  style,
+  template
+})
+export default class PgTree extends HTMLElement {
+  @Prop() items: any[] = [];
+
+  @Part() $items: HTMLDivElement;
+
+  #selectedIndexes = new Map();
+
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.items,
+      type: (item) => {
+        return PgTreeItem;
+      }
+    });
+    this.$items.addEventListener('action', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('action', {
+        detail: {
+          actionIndex: e.detail.actionIndex,
+          item: this.#wrap(e.detail.indexes)
+        }
+      }));
+    });
+    this.$items.addEventListener('move', (e: any) => {
+      const { indexes, position } = e.detail;
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('move', {
+        detail: {
+          item: this.#wrap(e.detail.indexes),
+          position
+        }
+      }));
+    });
+    this.$items.addEventListener('toggle', (e: any) => {
+      const { indexes } = e.detail;
+      let item = this.#getItem(indexes);
+      item.expanded = !item.expanded;
+    });
+    this.$items.addEventListener('select', (e: any) => {
+      e.stopPropagation();
+      const { indexes, type, ctrlKey, shiftKey } = e.detail;
+      const item = this.#getItem(indexes);
+      const selectedCount = this.#selectedIndexes.size;
+      const unproxyItem = getProxyValue(item);
+      if (!ctrlKey && selectedCount && !this.#selectedIndexes.has(unproxyItem)) {
+        this.#selectedIndexes.forEach((x: any) => this.#getItem(x).selected = false);
+        this.#selectedIndexes.clear();
+      }
+      item.selected = type === 'rename' ? true : !item.selected;
+      if (item.selected) {
+        this.#selectedIndexes.set(unproxyItem, indexes);
+      } else {
+        this.#selectedIndexes.delete(unproxyItem);
+      }
+      // Dispatch Event
+      this.dispatchEvent(new CustomEvent('select', {
+        detail: {
+          items: [...this.#selectedIndexes.values()].map((indexes: any) => {
+            return this.#wrap(indexes);
+          }),
+        }
+      }));
+    });
+    this.$items.addEventListener('keydown', (e: any) => {
+      if (e.key === 'Delete') {
+        this.#selectedIndexes.forEach((indexes: number[]) => {
+          this.#removeItem(indexes);
+        });
+        this.#selectedIndexes.clear();
+      }
+    });
+    this.$items.addEventListener('itemdragstart', (e: any) => {
+      const { indexes, callback, ctrlKey, shiftKey } = e.detail;
+      console.log('drag valid', indexes);
+      const item = this.#getItem(indexes);
+      const unproxyItem = getProxyValue(item);
+      if (!ctrlKey && this.#selectedIndexes.size) {
+        this.#selectedIndexes.forEach((x: any) => this.#getItem(x).selected = false);
+        this.#selectedIndexes.clear();
+      }
+      item.selected = true;
+      this.#selectedIndexes.set(unproxyItem, indexes);
+      let count = 0;
+      this.#selectedIndexes.forEach((indexes) => {
+        const item = this.#getItem(indexes);
+        count = this.#getDragCount(item, count);
+      });
+      callback(count);
+      this.$items.classList.toggle('dragging', true);
+    });
+    this.$items.addEventListener('itemdragend', (e: any) => {
+      this.$items.classList.toggle('dragging', false);
+    });
+    this.$items.addEventListener('itemdropenter', this.#handleDropEnter.bind(this));
+  }
+
+  #getDragCount(item, count) {
+    count += 1
+    if (item.items && item.items.length > 0) {
+      item.items.forEach((itm) => {
+        count = this.#getDragCount(itm, count);
+      });
+    }
+    return count;
+  }
+
+  #handleDropEnter(e: any) {
+    const { indexes, callback } = e.detail;
+    const excludes = this.#calculateDragExcludes();
+    console.log('valid???', indexes, excludes);
+    const joined = indexes.join(',') as string;
+    const isInvalid = excludes.some(exclude => joined.startsWith(exclude));
+    callback(!isInvalid, (dropEffect) => {
+      e.dataTransfer.effectAllowed = dropEffect;
+    });
+  }
+
+  #removeItem(indexes: number[]) {
+    const deleteIndex = indexes[indexes.length - 1];
+    const tempIndexes = indexes.slice(0, indexes.length - 1);
+    const item = tempIndexes.reduce((item: any, index) => {
+      return item.items[index];
+    }, this);
+    item.items.splice(deleteIndex, 1);
+  }
+
+  #getItem(indexes: number[]) {
+    return indexes.reduce((item: any, index) => {
+      return item.items[index];
+    }, this);
+  }
+
+  /**
+   * Appends helper methods for selected
+   *
+   * @param indexes indexes
+   */
+  #wrap(indexes: number[]) {
+    return {
+      indexes,
+      remove: () => {
+        this.#removeItem(indexes);
+        this.#selectedIndexes.clear();
+      },
+      getData: () => {
+        return this.#getItem(indexes);
+      },
+      getParentData: () => {
+        const parent = indexes.slice(0, indexes.length - 1);
+        if (parent.length === 0) {
+          return this;
+        }
+        return this.#getItem(parent);
+      },
+      move: (item, position) => {
+        console.log(item, position);
+        const index = item.indexes[item.indexes.length - 1];
+        const parent = item.indexes.slice(0, item.indexes.length - 1);
+        const cache = this.#getItem(indexes);
+        this.#removeItem(indexes);
+        if (position === 'on') {
+          this.#getItem(item.indexes).items.push(cache);
+          this.#getItem(item.indexes).expanded = true;
+        } else if (parent.length === 0) {
+          this.items.splice(position === 'after' ? index + 1 : index, 0, cache);
+        } else {
+          this.#getItem(parent).items.splice(position === 'after' ? index + 1 : index, 0, cache);
+        }
+        this.#selectedIndexes.clear();
+        this.$items.classList.toggle('dragging', false);
+      }
+    }
+  }
+
+  render(changes) {
+    if (changes.items) {
+      console.log('yay', this.items.map(x => x));
+    }
+  }
+
+  unselect(indexes: number[]) {
+
+  }
+
+  #calculateDragExcludes() {
+    const exclude: string[] = [];
+    this.#selectedIndexes.forEach((indexes) => {
+      exclude.push(indexes.join(','));
+    });
+    return exclude;
+  }
+}

package/pg/treeButtonIcon/README.md

@@ -0,0 +1,39 @@
+# Tree Button Icon
+
+Tree button icons are used in the `pg-tree` component for actions. See `pg-tree` for documentation.
+
+## Usage
+
+```typescript
+this.$tree.items = [{
+  icon: {
+    path: IconFile
+  },
+  label,
+  actions: [{
+    type: PgTreeButtonIcon,
+    label: 'Select in View',
+    icon:  IconSelect,
+    enabled: true
+  },
+  {
+    type: PgTreeButtonIcon,
+    label: 'Delete',
+    icon: IconTrash,
+    enabled: true
+  }]
+}];
+
+this.$tree.addEventListener('action', (e: any) => {
+  const { item, actionIndex } = e.detail;
+  // item is a wrapper with all utility functions
+  switch(actionIndex) {
+    case 0:
+      // select in view
+      break;
+    case 1:
+      item.remove();
+      break;
+  }
+});
+```

package/pg/treeButtonIcon/index.ts

@@ -0,0 +1,3 @@
+import PgTreeButtonIcon from './treeButtonIcon';
+
+export default PgTreeButtonIcon;

package/pg/treeButtonIcon/treeButtonIcon.css

@@ -0,0 +1,18 @@
+:host {
+  display: contents;
+}
+
+[part="button"] {
+  display: flex;
+  background: transparent;
+  border: 0;
+  padding: 0.125rem;
+  margin: -0.125rem;
+  border-radius: 0.125rem;
+}
+
+[part="button"]:hover {
+  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.25);
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 0.125rem;
+}

package/pg/treeButtonIcon/treeButtonIcon.html

@@ -0,0 +1,3 @@
+<button part="button">
+  <pg-icon part="icon"></pg-icon>
+</button>

package/pg/treeButtonIcon/treeButtonIcon.ts

@@ -0,0 +1,42 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './treeButtonIcon.html';
+import style from './treeButtonIcon.css';
+import PgIcon from '../icon/icon';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-tree-button-icon',
+  style,
+  template
+})
+export default class PgTreeButtonIcon extends HTMLElement {
+
+  @Prop() index: number;
+  @Prop() icon: string = noIcon;
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $icon: PgIcon;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this))
+  }
+
+  #handleClick(e) {
+    this.dispatchEvent(new CustomEvent('action', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        index: this.index
+      }
+    }));
+  }
+
+  render(changes) {
+    if (changes.icon) {
+      this.$icon.path = this.icon;
+    }
+  }
+
+}

package/pg/treeItem/README.md

@@ -0,0 +1,3 @@
+# Tree Item
+
+Tree items are used in the `pg-tree` component. See `pg-tree` for documentation.

package/pg/treeItem/index.ts

@@ -0,0 +1,3 @@
+import PgTreeItem from './treeItem';
+
+export default PgTreeItem;