Updated these (#1034)

* Updated with 2 things

Added create primitive mod

Added seperator mod

* Updated these with lint

* Updated these with lint

actions/canvas_create_primitive_MOD.js

@@ -0,0 +1,102 @@
+module.exports = {
+  name: 'Canvas Create Shape',
+  section: 'Image Editing',
+  meta: {
+    version: '2.1.7',
+    preciseCheck: false,
+    author: 'DBM Mods',
+    authorUrl: 'https://github.com/dbm-network/mods',
+    downloadURL: 'https://github.com/dbm-network/mods/blob/master/actions/canvas_create_primitive_MOD.js',
+  },
+
+  subtitle(data) {
+    const info = parseInt(data.info, 10);
+    if (info === 0) {
+      return data.color ? `Create Circle with Color ${data.color}` : 'No color circle has been created';
+    }
+    if (info === 1) {
+      return data.color ? `Create Rectangle with Color ${data.color}` : 'No color rectangle has been created';
+    }
+    // Add more cases for different shapes as needed
+  },
+
+  variableStorage(data, varType) {
+    if (parseInt(data.storage, 10) !== varType) return;
+    return [data.varName, 'Image'];
+  },
+
+  fields: ['shapeType', 'width', 'height', 'color', 'storage', 'varName'],
+
+  html() {
+    return `
+<div>
+  <div>
+    <span class="dbminputlabel">Shape Type</span>
+    <select id="shapeType" class="round">
+      <option value="0" selected>Circle</option>
+      <option value="1">Rectangle</option>
+      <!-- Add more options for different shapes -->
+    </select>
+  </div>
+</div>
+<br><br>
+
+<div>
+  <div>
+    <span class="dbminputlabel">Width (px)</span>
+    <input id="width" class="round" type="text"><br>
+  </div>
+  <div>
+    <span class="dbminputlabel">Height (px)</span>
+    <input id="height" class="round" type="text"><br>
+  </div>
+</div>
+<br><br>
+
+<div>
+  <div>
+    <span class="dbminputlabel">Color</span>
+    <input id="color" class="round" type="text" placeholder="Insert Color Hex code here"><br>
+  </div>
+</div>
+<br><br>
+
+<store-in-variable dropdownLabel="Store In" selectId="storage" variableContainerId="varNameContainer" variableInputId="varName"></store-in-variable>
+`;
+  },
+
+  async action(cache) {
+    const data = cache.actions[cache.index];
+    const Canvas = require('canvas');
+    const shapeType = parseInt(data.shapeType, 10);
+    const width = parseInt(this.evalMessage(data.width, cache), 10);
+    const height = parseInt(this.evalMessage(data.height, cache), 10);
+    const canvas = Canvas.createCanvas(width, height);
+    const ctx = canvas.getContext('2d');
+    const color = this.evalMessage(data.color, cache);
+
+    switch (shapeType) {
+      case 0: // Circle
+        ctx.beginPath();
+        ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI);
+        ctx.fillStyle = color;
+        ctx.fill();
+        break;
+      case 1: // Rectangle
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, width, height);
+        break;
+      // Add more cases for different shapes
+      default:
+        break;
+    }
+
+    const result = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
+    const varName = this.evalMessage(data.varName, cache);
+    const storage = parseInt(data.storage, 10);
+    this.storeValue(result, storage, varName, cache);
+    this.callNextAction(cache);
+  },
+
+  mod() {},
+};

actions/seperator_MOD.js

@@ -0,0 +1,112 @@
+module.exports = {
+  name: 'Separator',
+  section: 'Other',
+  fields: ['separator', 'color', 'bold', 'underline', 'fontSize'],
+
+  meta: {
+    version: '2.1.7',
+    author: 'DBM Mods',
+    authorUrl: 'https://github.com/dbm-network/mods',
+    downloadURL: 'https://github.com/dbm-network/mods/blob/master/actions/seperator_MOD.js',
+  },
+
+  subtitle(data) {
+    let style = '';
+    if (data.bold === 'true') style += 'font-weight: bold;';
+    if (data.underline === 'true') style += 'text-decoration: underline;';
+    if (data.fontSize) style += `font-size: ${parseInt(data.fontSize, 10)}px;`;
+    const separator = data.separator || 'No separator provided';
+    const color = data.color || '#000000';
+    return `<span style="color: ${color};${style}">${separator}</span>`;
+  },
+
+  html() {
+    return `
+    <div style="padding-bottom: 50px; padding: 5px 15px 5px 5px">
+      <div id="separatorArea" style="float: left; width: 100%;">
+        <span class="dbminputlabel">Separator</span>
+        <textarea id="separator" placeholder="Enter separator text" class="round" type="textarea" rows="3"></textarea><br>
+        Color:<br>
+        <input type="color" id="color"><br><br>
+        Bold:<br>
+        <select id="bold" class="round">
+          <option value="true">Yes</option>
+          <option value="false">No</option>
+        </select><br>
+        Underline:<br>
+        <select id="underline" class="round">
+          <option value="true">Yes</option>
+          <option value="false">No</option>
+        </select><br>
+        Font Size (px):<br>
+        <input type="number" id="fontSize" class="round" style="width: 80px;" min="1" step="1"><br><br>
+      </div>
+    </div>`;
+  },
+
+  init() {
+    const { document } = this;
+    const separatorField = document.getElementById('separator');
+    const colorField = document.getElementById('color');
+    const boldField = document.getElementById('bold');
+    const underlineField = document.getElementById('underline');
+    const fontSizeField = document.getElementById('fontSize');
+
+    function updateSubtitle() {
+      const separatorValue = separatorField.value.trim();
+      const colorValue = colorField.value;
+      const boldValue = boldField.value === 'true';
+      const underlineValue = underlineField.value === 'true';
+      const fontSizeValue = fontSizeField.value;
+      const subtitle = document.querySelector('.subtitle');
+      let style = '';
+      if (boldValue) style += 'font-weight: bold;';
+      if (underlineValue) style += 'text-decoration: underline;';
+      if (fontSizeValue) style += `font-size: ${parseInt(fontSizeValue, 10)}px;`;
+      subtitle.innerHTML = `<span style="color: ${colorValue};${style}">${
+        separatorValue || 'No separator provided'
+      }</span>`;
+    }
+
+    separatorField.addEventListener('input', updateSubtitle);
+    colorField.addEventListener('input', updateSubtitle);
+    boldField.addEventListener('change', updateSubtitle);
+    underlineField.addEventListener('change', updateSubtitle);
+    fontSizeField.addEventListener('input', updateSubtitle);
+
+    // Trigger subtitle update on initialization
+    updateSubtitle();
+  },
+
+  async action(cache) {
+    const data = cache.actions[cache.index];
+    const separator = this.evalMessage(data.separator, cache);
+    const color = this.evalMessage(data.color, cache);
+    const bold = data.bold === 'true';
+    const underline = data.underline === 'true';
+
+    // Store separator value if provided
+    if (separator !== undefined) {
+      cache.separator = separator;
+    }
+
+    // Store color value if provided
+    if (color !== undefined) {
+      cache.color = color;
+    }
+
+    // Store bold value if provided
+    if (bold !== undefined) {
+      cache.bold = bold;
+    }
+
+    // Store underline value if provided
+    if (underline !== undefined) {
+      cache.underline = underline;
+    }
+
+    this.callNextAction(cache);
+  },
+
+  mod() {},
+};