feat: add text type input

Author: pyphilia

src/api/services.xml

@@ -23,7 +23,7 @@ export const getWorkflowById = async (id, asXml = false) => {
     if (asXml) {
       return await API.getWorkflowByIdJSON(id);
     } else {
-      return await API.getWorkflowById(id);
+      return await API.getWorkflowById(id, webservices);
     }
   } else {
     const xml = `<Workflow>
@@ -33,41 +33,8 @@ export const getWorkflowById = async (id, asXml = false) => {
         <Author/>
     </Information>
     <Steps>
-  <Step>
-    <No>0</No>
-    <Name>OcropusBinarization</Name>
-    <Service>
-      <Key>6</Key>
-    </Service>
-    <Inputs>
-      <Data>
-        <Name>inputImage</Name>
-        <Path>qwertz/2299942_0.jpg</Path>
-      </Data>
-      <Parameter>
-      <Name>skewsteps</Name>
-      <Value>543</Value></Parameter>
-    </Inputs>
-  </Step>
-  <Step>
-    <No>1</No>
-    <Name>OtsuBinarization</Name>
-    <Service>
-      <Key>0</Key>
-    </Service>
-    <Inputs>
-      <Data>
-        <Name>inputImage</Name>
-        <Value>
-          <WorkflowStep>
-            <Ref>0</Ref>
-            <ServiceOutputName>ocropusBinaryImage</ServiceOutputName>
-          </WorkflowStep>
-        </Value>
-      </Data>
-    </Inputs>
-  </Step>
-</Steps>
+    <Step> <No>0</No> <Name>FilePickermimetypes</Name> <Service> <Key>47</Key> </Service> <Inputs> <Parameter> <Name>regex</Name> <Value>12345</Value> </Parameter> </Inputs> </Step> <Step> <No>1</No> <Name>OcropusBinarization</Name> <Service> <Key>6</Key> </Service> <Inputs> <Parameter> <Name>enableSkew</Name> <Value>true</Value> </Parameter> </Inputs> </Step> 
+    </Steps>
 </Workflow>`;
     return asXml ? xml : await Decorators.workflowDecorator(xml, webservices);
   }

src/js/api/requests.js

@@ -148,6 +148,7 @@ export let app;
         "$deleteElements",
         "$setSelectValueInElement",
         "$setInputValueInElement",
+        "$setTextValueInElement",
         "$addLink",
         "deleteLink",
         "$moveSelectedElements",

src/js/app.js

@@ -13,6 +13,7 @@ export const DATA_INPUT_CONTENT_CLASS = "content";
 
 export const PARAMETER_INPUTS = "inputs";
 export const PARAMETER_SELECTS = "selects";
+export const PARAMETER_TEXTS = "texts";
 
 export const AREA_SELECTION_ELEMENT = "areaSelectionHighlight";
 export const TRASH_SELECTOR = "#trash";

src/js/constants/selectors.js

@@ -123,13 +123,17 @@ const createBox = (
  * @param {object} params
  */
 export const buildDefaultParameters = params => {
-  const defaultParams = { select: {}, number: {} };
+  const defaultParams = { select: {}, number: {}, text: {} };
   for (const p of params) {
-    let { type, name, defaultValue, values } = p;
+    let { type, name, defaultValue, definedValue, values } = p;
     if (type === Types.SELECT.type) {
       defaultValue = values[defaultValue];
     }
-    defaultParams[type][name] = { value: defaultValue, defaultValue, values };
+    defaultParams[type][name] = {
+      value: definedValue ? definedValue : defaultValue,
+      defaultValue,
+      values
+    };
   }
   return defaultParams;
 };

src/js/elements/addElement.js

@@ -26,7 +26,8 @@ import {
   NO_PARAMETER_CLASS,
   PARAMETER_SELECTS,
   PARAMETER_INPUTS,
-  INTERFACE_ROOT
+  INTERFACE_ROOT,
+  PARAMETER_TEXTS
 } from "../constants/selectors";
 import { objectToString } from "./utils";
 import { layoutSettingsApp } from "../layoutSettings";
@@ -378,6 +379,97 @@ export const checkInputValue = (input, { boxName, boxId }) => {
   input.toggleClass("is-invalid", !isValid);
 };
 
+/**
+ * create text DOM element, with
+ * - name
+ * - text tag
+ * - reset button
+ * - information
+ *
+ * @param {*} element element to append select
+ * @param {*} param parameter data
+ * @param {*} resetButton reset button html element
+ * @param {*} defaultTooltip default tooltip html element
+ * @param {*} givenDefaultValue default value
+ */
+export const createText = (
+  element,
+  param,
+  resetButton,
+  defaultTooltip,
+  givenDefaultValue
+) => {
+  const {
+    name,
+    values = {},
+    defaultValue: defaultOption,
+    description,
+    $: attributes
+  } = param;
+
+  // wrapper
+  const newText = $("<div/>", { class: "input row" });
+
+  // param name
+  const nameEl = $("<span/>", {
+    class: `${PARAM_NAME_CLASS} ${NAME_COL}`,
+    text: name,
+    title: name
+  });
+
+  // param input
+  let required = false;
+  if (attributes && attributes.Status === "required") {
+    required = true;
+  }
+
+  const inputEl = $(`<${Types.TEXT.tag} />`, {
+    class: `${PARAM_COL} form-control mr-1`,
+    prop: { disabled: false, required }, // userdefined?
+    attr: {
+      type: "text",
+      name,
+      "data-default": defaultOption,
+      value: givenDefaultValue ? givenDefaultValue : defaultOption
+    }
+  });
+
+  // update param
+  inputEl.on({
+    blur: function() {
+      const input = $(this);
+      const value = input.val();
+      const attr = input.attr("name");
+      app.$setTextValueInElement({ element, attr, value });
+    },
+    click: function() {
+      $(this).select();
+    },
+    input: function() {
+      // do not save each time you write, or it would be annoying
+    }
+  });
+
+  // reset
+  const resetButtonNumber = resetButton.clone(true).attr({
+    "data-parent": "input",
+    "data-value": defaultOption
+  });
+
+  // add tooltip
+  let tooltip = $();
+  if (description || values.length) {
+    const tooltipText = `${description}${TOOLTIP_BREAK_LINE}${objectToString({
+      default: defaultOption,
+      ...values
+    })}`;
+    tooltip = defaultTooltip.attr("data-title", tooltipText);
+  }
+
+  newText.append(nameEl, inputEl, resetButtonNumber, tooltip);
+  return newText;
+};
+
 /**
  * create and append parameters in foreign object of element
  *
@@ -399,6 +491,7 @@ export const createParametersInForeignObject = (
 
   const selectsArr = [];
   const inputsArr = [];
+  const textsArr = [];
 
   // create reset button
   const resetButton = $("<button/>", {
@@ -446,6 +539,17 @@ export const createParametersInForeignObject = (
         inputsArr.push(newInput);
         break;
       }
+      case Types.TEXT.type: {
+        const newText = createText(
+          element,
+          param,
+          resetButton,
+          defaultTooltip,
+          defaultValue
+        );
+        textsArr.push(newText);
+        break;
+      }
       default:
         throw "Type " + type + " not handled";
     }
@@ -454,20 +558,28 @@ export const createParametersInForeignObject = (
   // append selects and inputs
   const selects = $("<div/>", { class: PARAMETER_SELECTS });
   const inputs = $("<div/>", { class: PARAMETER_INPUTS });
+  const texts = $("<div/>", { class: PARAMETER_TEXTS });
   selects.append(selectsArr);
   inputs.append(inputsArr);
+  texts.append(textsArr);
+  const parameters = [selects, inputs, texts];
 
   // add params to boxes
   const foreignObject = $(
     `g[model-id=${element.attributes.id}] foreignObject body`
   );
   const container = foreignObject
     .find(`.${BOX_CONTAINER_CLASS}`)
-    .append(inputs, selects);
+    .append(parameters);
 
   // create text if no parameter
   let noParameter = $();
-  if (inputs.children().length + selects.children().length === 0) {
+  if (
+    inputs.children().length +
+      selects.children().length +
+      texts.children().length ===
+    0
+  ) {
     noParameter = $(`<div/>`, {
       class: NO_PARAMETER_CLASS,
       text: NO_PARAMETER_TEXT
@@ -477,8 +589,7 @@ export const createParametersInForeignObject = (
   // hide parameters depending on theme options
   const showParameters = layoutSettingsApp.isShowParametersChecked();
   if (!showParameters) {
-    selects.hide();
-    inputs.hide();
+    parameters.forEach(el => el.hide());
     noParameter.hide();
   }
 

src/js/layout/inputs.js

@@ -69,33 +69,53 @@ export const generateUniqueId = () => {
     .substr(2, 9);
 };
 
+/**
+ * return whether the input is of type parameter
+ * useful to differentiate from inputs and ports parameters
+ *
+ * @param {*} input
+ */
 export const isParamInput = input => {
+  const validParameterTypes = [
+    Types.SELECT.type,
+    Types.NUMBER.type,
+    Types.TEXT.type
+  ];
   if (input.type) {
-    return input.type === Types.SELECT.type || input.type === Types.NUMBER.type;
+    return validParameterTypes.includes(input.type);
   }
 
-  return input[Types.SELECT.type] || input[Types.NUMBER.type];
+  return validParameterTypes.map(type => input[type]).includes(true);
 };
 
-export const isPort = el => {
-  if (el.type) {
-    return el.type === Types.FILE.type || el.type === Types.FOLDER.type;
-  }
-  return el[Types.FILE.type] || el[Types.FOLDER.type];
-};
-
-export const isPortUserdefined = el => {
-  if (el.type) {
-    return (
-      el.type === Types.FILE.type || el.type === Types.FOLDER.type
-      // && el.userdefined
-    );
+// export const isPort = el => {
+//   if (el.type) {
+//     return el.type === Types.FILE.type || el.type === Types.FOLDER.type;
+//   }
+//   return el[Types.FILE.type] || el[Types.FOLDER.type];
+// };
+
+/**
+ * return whether the element is of port
+ * useful to differentiate from inputs and ports parameters
+ *
+ * @param {*} input
+ */
+export const isPortUserdefined = input => {
+  const validPortTypes = [Types.FILE.type, Types.FOLDER.type];
+  if (input.type) {
+    return validPortTypes.includes(input.type);
+    // && input.userdefined
   }
-  return (
-    el[Types.FILE.type] || el[Types.FOLDER.type] //&& el[Object.keys(el)[0]].userdefined
-  );
+  return validPortTypes.map(type => input[type]).includes(true); //&& el[Object.keys(el)[0]].userdefined
 };
 
+/**
+ * transform object to a readable string
+ * use to format values constraints (min, max, default, ...)
+ *
+ * @param {object} obj
+ */
 export const objectToString = obj => {
   let str = "";
   for (let p in obj) {

src/js/layout/utils.js

@@ -33,7 +33,6 @@ import {
   DELETE_LINK,
   ADD_LINK,
   SET_INPUT_VALUE,
-  SET_SELECT_VALUE,
   COPY_SELECTION,
   UNSELECT_ALL_ELEMENTS,
   MOVE_ELEMENTS,
@@ -92,13 +91,9 @@ const Interface = {
     [COPY_SELECTION](state) {
       state.elements.forEach(el => (el.copied = el.selected));
     },
-    [SET_SELECT_VALUE](state, { element, value, attr }) {
+    [SET_INPUT_VALUE](state, { type, element, value, attr }) {
       const el = findElementByBoxId(state.elements, element.attributes.boxId);
-      Vue.set(el.defaultParams[Types.SELECT.type][attr], "value", value);
-    },
-    [SET_INPUT_VALUE](state, { element, value, attr }) {
-      const el = findElementByBoxId(state.elements, element.attributes.boxId);
-      Vue.set(el.defaultParams[Types.NUMBER.type][attr], "value", value);
+      Vue.set(el.defaultParams[type][attr], "value", value);
     },
     [ADD_LINK](state, { link, graph }) {
       addLinktoLinks(state.links, link, graph);
@@ -184,10 +179,13 @@ const Interface = {
       commit(COPY_SELECTION);
     },
     $setSelectValueInElement({ commit }, payload) {
-      commit(SET_SELECT_VALUE, payload);
+      commit(SET_INPUT_VALUE, { type: Types.SELECT.type, ...payload });
     },
     $setInputValueInElement({ commit }, payload) {
-      commit(SET_INPUT_VALUE, payload);
+      commit(SET_INPUT_VALUE, { type: Types.NUMBER.type, ...payload });
+    },
+    $setTextValueInElement({ commit }, payload) {
+      commit(SET_INPUT_VALUE, { type: Types.TEXT.type, ...payload });
     },
     $addLink({ commit }, payload) {
       commit(ADD_LINK, payload);

src/js/store/modules/Interface.js

@@ -2747,7 +2747,7 @@ diffie-hellman@^5.0.0:
 
 "divaservices-utils@https://github.com/pyphilia/divaservices-utils":
   version "1.0.0"
-  resolved "https://github.com/pyphilia/divaservices-utils#3414747eb12fa0befbc24a6545c5d3d3f317c1cb"
+  resolved "https://github.com/pyphilia/divaservices-utils#dc3bf6dd7dd75e0c7d02526d713ff665eddfd8a6"
   dependencies:
     eslint "^6.6.0"
     node-fetch "^2.6.0"