feat(editor): support modeling image view

Closes #383

Author: Niklas Kiefer

packages/form-js-editor/src/features/palette/components/Palette.js

@@ -37,6 +37,10 @@ const types = [
     label: 'Text',
     type: 'text'
   },
+  {
+    label: 'Image view',
+    type: 'image'
+  },
   {
     label: 'Button',
     type: 'button'

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -10,6 +10,7 @@ const labelsByType = {
   checklist: 'CHECKLIST',
   columns: 'COLUMNS',
   default: 'FORM',
+  image: 'IMAGE',
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
@@ -30,6 +31,10 @@ export const PropertiesPanelHeaderProvider = {
       return textToLabel(field.text);
     }
 
+    if (type === 'image') {
+      return field.alt;
+    }
+
     if (type === 'default') {
       return field.id;
     }

packages/form-js-editor/src/features/properties-panel/entries/AltTextEntry.js

@@ -0,0 +1,63 @@
+import { get } from 'min-dash';
+
+import { useService, useVariables } from '../hooks';
+
+import { FeelEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+
+export default function AltTextEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+
+  const {
+    type
+  } = field;
+
+  const entries = [];
+
+  if (type === 'image') {
+    entries.push({
+      id: 'alt',
+      component: AltText,
+      editField: editField,
+      field: field,
+      isEdited: isFeelEntryEdited
+    });
+  }
+
+  return entries;
+}
+
+function AltText(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map(name => ({ name }));
+
+  const path = [ 'alt' ];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return FeelEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'Alternative text',
+    setValue,
+    variables
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/ConditionEntry.js

@@ -1,10 +1,7 @@
 import { FeelEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
 import { get } from 'min-dash';
 
-import {
-  useService,
-  useVariables
-} from '../hooks';
+import { useService, useVariables } from '../hooks';
 
 
 export function ConditionEntry(props) {

packages/form-js-editor/src/features/properties-panel/entries/ImageSourceEntry.js

@@ -0,0 +1,64 @@
+import { get } from 'min-dash';
+
+import { useService, useVariables } from '../hooks';
+
+import { FeelEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel';
+
+export default function SourceEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+
+  const {
+    type
+  } = field;
+
+  const entries = [];
+
+  if (type === 'image') {
+    entries.push({
+      id: 'source',
+      component: Source,
+      editField: editField,
+      field: field,
+      isEdited: isFeelEntryEdited
+    });
+  }
+
+  return entries;
+}
+
+function Source(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const variables = useVariables().map(name => ({ name }));
+
+  const path = [ 'source' ];
+
+  const getValue = () => {
+    return get(field, path, '');
+  };
+
+  const setValue = (value) => {
+    return editField(field, path, value);
+  };
+
+  return FeelEntry({
+    debounce,
+    description: 'Expression or static value (link/data URI)',
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'Image source',
+    setValue,
+    variables
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -1,11 +1,13 @@
 export { default as ActionEntry } from './ActionEntry';
+export { default as AltTextEntry } from './AltTextEntry';
 export { default as ColumnsEntry } from './ColumnsEntry';
 export { default as DescriptionEntry } from './DescriptionEntry';
 export { default as DefaultValueEntry } from './DefaultValueEntry';
 export { default as DisabledEntry } from './DisabledEntry';
 export { default as IdEntry } from './IdEntry';
 export { default as KeyEntry } from './KeyEntry';
 export { default as LabelEntry } from './LabelEntry';
+export { default as ImageSourceEntry } from './ImageSourceEntry';
 export { default as TextEntry } from './TextEntry';
 export { default as NumberEntries } from './NumberEntries';
 export { default as NumberSerializationEntry } from './NumberSerializationEntry';

packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js

@@ -1,10 +1,12 @@
 import {
   ActionEntry,
+  AltTextEntry,
   ColumnsEntry,
   DescriptionEntry,
   DefaultValueEntry,
   DisabledEntry,
   IdEntry,
+  ImageSourceEntry,
   KeyEntry,
   LabelEntry,
   TextEntry,
@@ -24,6 +26,8 @@ export default function GeneralGroup(field, editField) {
     ...ColumnsEntry({ field, editField }),
     ...TextEntry({ field, editField }),
     ...NumberEntries({ field, editField }),
+    ...ImageSourceEntry({ field, editField }),
+    ...AltTextEntry({ field, editField }),
     ...DisabledEntry({ field, editField })
   ];
 

packages/form-js-editor/src/render/components/icons/Image.svg

@@ -10,12 +10,14 @@ import SelectIcon from './Select.svg';
 import TextIcon from './Text.svg';
 import TextfieldIcon from './Textfield.svg';
 import TextareaIcon from './Textarea.svg';
+import ImageIcon from './Image.svg';
 
 export const iconsByType = {
   button: ButtonIcon,
   checkbox: CheckboxIcon,
   checklist: ChecklistIcon,
   columns: ColumnsIcon,
+  image: ImageIcon,
   number: NumberIcon,
   radio: RadioIcon,
   select: SelectIcon,

packages/form-js-editor/src/render/components/icons/index.js

@@ -4,6 +4,8 @@ import {
   merge
 } from 'min-dash';
 
+import { act } from 'preact/test-utils';
+
 import TestContainer from 'mocha-test-container-support';
 
 import FormEditor from '../../src/FormEditor';
@@ -165,4 +167,13 @@ export function insertCSS(name, css) {
   style.appendChild(document.createTextNode(css));
 
   head.appendChild(style);
+}
+
+export async function setEditorValue(editor, value) {
+  await act(() => {
+    editor.textContent = value;
+  });
+
+  // Requires 2 ticks to propagate the change to bpmn-js
+  await act(() => {});
 }