add panel sample

Author: yoshikinoko

03-01-panel-sample/images/icon-24px.png

@@ -0,0 +1,76 @@
+const { selection, Text } = require('scenegraph');
+const clipboard = require('clipboard');
+
+let panel;
+
+function create() {
+  panel = document.createElement('div');
+  panel.setAttribute('id', 'textContainers');
+
+  return panel;
+}
+
+function show(event) {
+  if (!panel) event.node.appendChild(create());
+}
+
+function hide(event) {}
+
+function extractAndAddText(sceneNode) {
+  const textContainers = document.querySelector('#textContainers');
+  sceneNode.forEach(item => {
+    if (item instanceof Text) {
+      const textBoxContainer = document.createElement('div');
+      const textLabel = document.createElement('div');
+      textLabel.innerHTML = `${item.name}`;
+      const textForm = document.createElement('form');
+      const textInput = document.createElement('textarea');
+      const copyButton = document.createElement('button');
+      textInput.setAttribute('readonly', 'true');
+      textInput.textContent = `${item.text}`;
+      copyButton.innerHTML = 'copy';
+      textBoxContainer.appendChild(textLabel);
+      textForm.appendChild(textInput);
+      textForm.appendChild(copyButton);
+      textBoxContainer.appendChild(textLabel);
+      textBoxContainer.appendChild(textForm);
+
+      copyButton.addEventListener('click', function(e) {
+        (function(ev, ti) {
+          clipboard.copyText(ti.textContent);
+        })(e, textInput);
+      });
+
+      textContainers.appendChild(textBoxContainer);
+    } else if (item.children) {
+      extractAndAddText(item.children);
+    }
+  });
+}
+
+async function update() {
+  const textContainers = document.querySelector('#textContainers');
+
+  while (textContainers.firstChild) {
+    textContainers.removeChild(textContainers.firstChild);
+  }
+
+  if (selection.items.length) {
+    extractAndAddText(selection.items);
+  }else{
+    console.log('no item');
+    const message = document.createElement('div');
+    message.innerHTML = `Select Objects with text`;
+    textContainers.appendChild(message);
+  }
+}
+
+module.exports = {
+  panels: {
+    example: {
+      show,
+      hide,
+      update,
+    },
+  },
+};

03-01-panel-sample/images/icon-48px.png

@@ -0,0 +1,28 @@
+{
+  "id": "xdjp0301",
+  "version": "0.0.1",
+  "name": "Copy text to Clipboard",
+  "icons": [
+    {
+      "width": 24,
+      "height": 24,
+      "path": "images/icon-24px.png"
+    },
+    {
+      "width": 48,
+      "height": 48,
+      "path": "images/icon-48px.png"
+    }
+  ],
+  "host": {
+    "app": "XD",
+    "minVersion": "21.0"
+  },
+  "uiEntryPoints": [
+    {
+      "type": "panel",
+      "label": "Copy text to Clipboard",
+      "panelId": "example"
+    }
+  ]
+}

03-01-panel-sample/main.js

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+# editorconfig-tools is unable to ignore longs strings or urls
+max_line_length = null

03-01-panel-sample/manifest.json

@@ -0,0 +1,5 @@
+.git/
+node_modules/
+docs/
+build/
+package-lock.json

03-02-panel-sample-webpack/.editorconfig

@@ -0,0 +1,33 @@
+{
+  "extends": ["airbnb", "plugin:prettier/recommended"],
+  "plugins": [],
+  "parserOptions": {},
+  "env": {
+    "browser": true
+  },
+  "globals": {},
+  "rules": {
+    "no-unused-vars": "warn",
+    "no-console": "warn",
+    "import/no-unresolved": [
+      "warn",
+      {
+        "ignore": ["application", "clipboard", "commands", "secenegraph", "uxp"]
+      }
+    ],
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsFor": ["selection"]
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "trailingComma": "es5"
+      }
+    ]
+  }
+}

03-02-panel-sample-webpack/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+build
+build.xdx

03-02-panel-sample-webpack/.eslintrc

@@ -0,0 +1,28 @@
+# Red square of arbitrary size
+
+## Setup
+
+```bash
+npm install
+```
+
+## Live-loading plugin for `Develop` folder 
+
+Deploy the plugin and monitor updates of files.
+
+```bash
+npm start
+```
+
+## Deploy plugin to the `Develop` Folder
+
+```bash
+npm deploy
+```
+
+## Usage 
+
+#### 1. Reload plugins: 
+`Plugins` > `Development` > `Reload Plugins` or press `shift + command(ctrl) + R` keys.
+#### 2. Run the plugin: 
+`Plugins` > `Insert a red square of arbitrary size`

03-02-panel-sample-webpack/.gitignore

@@ -0,0 +1,28 @@
+{
+  "id": "XDJP0302",
+  "version": "0.0.1",
+  "name": "Copy text to Clipboard",
+  "icons": [
+    {
+      "width": 24,
+      "height": 24,
+      "path": "images/icon-24px.png"
+    },
+    {
+      "width": 48,
+      "height": 48,
+      "path": "images/icon-48px.png"
+    }
+  ],
+  "host": {
+    "app": "XD",
+    "minVersion": "21.0"
+  },
+  "uiEntryPoints": [
+    {
+      "type": "panel",
+      "label": "Copy text to Clipboard",
+      "panelId": "example"
+    }
+  ]
+}