pict-section-moodboard 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Steven Velozo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,87 @@
+# pict-section-moodboard
+
+[pict-section-moodboard on npm](https://www.npmjs.com/package/pict-section-moodboard) | [MIT License](LICENSE)
+
+A free-form moodboard canvas for the Pict application framework: a board of draggable, resizable
+image tiles, sticky notes, and big-type text statements. It is a thin, heavily customized layer over
+[pict-section-flow](https://www.npmjs.com/package/pict-section-flow) (no ports, no connections, a
+zero-height title bar so cards fill edge to edge), so you get drag, resize, pan, zoom, multi-select,
+marquee, alignment guides, and save/restore for free.
+
+Each card is edited through its on-graph properties panel (double-click a card): a textarea plus the
+card's parameters (image URL and fit, note color, text font size, rotation). The card body itself is
+a read-only display, so the whole card drags from anywhere.
+
+## Install
+
+```bash
+npm install pict-section-moodboard
+```
+
+It expects `pict-section-flow` (^1.3.0) and `pict-view` (^1.0.68) alongside it.
+
+## Use
+
+Register the view on a Pict instance and render it:
+
+```javascript
+const libMoodboard = require('pict-section-moodboard');
+
+pict.addView('Moodboard', libMoodboard.default_configuration, libMoodboard);
+pict.views['Moodboard'].render();
+```
+
+The board reads and writes its whole state through two methods:
+
+```javascript
+let tmpBoard = pict.views['Moodboard'].getBoard();   // { Nodes, Connections, ViewState }
+pict.views['Moodboard'].setBoard(tmpBoard);          // restore a saved board
+```
+
+## Images
+
+A board is self-contained by default: dropped, pasted, or file-picked images are kept as base64 data
+URLs right in the board JSON, and the built-in gallery remembers them.
+
+An embedding application can take over image storage by passing its own `ImageSource`:
+
+```javascript
+pict.addView('Moodboard', Object.assign({}, libMoodboard.default_configuration,
+    {
+        ImageSource: myImageSource,          // see the interface below
+        onBoardChanged: (pBoard) => save(pBoard)
+    }), libMoodboard);
+```
+
+An `ImageSource` declares its own fields, so the gallery builds its filter, sort, and search controls
+from whatever metadata the host has:
+
+- `getFields()` returns field descriptors (`{ Key, Label, Type, Searchable, Filterable, Sortable }`).
+- `getFilterOptions(key)` returns the distinct values for a filterable field.
+- `list({ Search, Filters, Sort })` returns the matching images (an array, or a Promise of one for a
+  remote store) as `{ Id, Name, Url, Thumbnail, Metadata }`.
+- `upload(file, dataUrl, callback)` stores a dropped or pasted file and calls back with `{ Url }`.
+- `add(record)` registers an image added by URL (optional).
+
+The bundled `ImageSource` (exported as `require('pict-section-moodboard').ImageSource`) implements all
+of this over an in-memory base64 collection, so the gallery works stand-alone with no backend.
+
+## Autosave
+
+Pass `onBoardChanged` to be called with the current board after any change (debounce it on your side;
+it can fire rapidly during a drag). Loading a board with `setBoard` does not trigger it.
+
+## Underlying flow options
+
+The moodboard turns on these `pict-section-flow` options, all available to any flow consumer:
+`EnableNodeResizing`, `EnableGridSnap` / `GridSnapSize`, `EnableMultiSelect` (shift-click, marquee,
+multi-drag, multi-delete), `EnableAlignmentGuides`, per-node `Rotation`, and `NodeTitleBarHeight: 0`.
+
+## Demo
+
+`example_applications/moodboard_demo` is a stand-alone Pict application that seeds a board and wires a
+sample gallery with custom metadata. Build it with `npm run build` and serve its `dist` directory.
+
+## License
+
+MIT. See [LICENSE](LICENSE).

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "pict-section-moodboard",
+    "version": "0.1.0",
+    "description": "Free-form moodboard canvas (draggable, resizable image tiles and notes) built on pict-section-flow",
+    "main": "source/Pict-Section-Moodboard.js",
+    "files": [
+        "source"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/fable-retold/pict-section-moodboard.git"
+    },
+    "scripts": {
+        "test": "npx mocha -u tdd -R spec --exit test/*_tests.js",
+        "start": "node source/Pict-Section-Moodboard.js",
+        "build": "npx quack build && cd example_applications/moodboard_demo && npx quack build && npx quack copy"
+    },
+    "author": "steven velozo <steven@velozo.com>",
+    "license": "MIT",
+    "dependencies": {
+        "pict-section-flow": "^1.3.0",
+        "pict-view": "^1.0.68"
+    },
+    "devDependencies": {
+        "chai": "^6.2.2",
+        "mocha": "^11.7.5",
+        "pict": "^1.0.372",
+        "quackage": "^1.3.0"
+    }
+}

package/source/Pict-Section-Moodboard.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * pict-section-moodboard entry point.
+ *
+ * Exports the Moodboard view (with its default_configuration) plus the two card classes and the
+ * note palette, so a host can register the view and, if it wants, reuse or subclass the cards.
+ *
+ * @author Steven Velozo <steven@velozo.com>
+ * @license MIT
+ */
+
+const libMoodboardView = require('./views/PictView-Moodboard.js');
+
+module.exports = libMoodboardView;
+module.exports.default_configuration = libMoodboardView.default_configuration;
+module.exports.MoodImageCard = require('./cards/MoodImage-Card.js');
+module.exports.MoodNoteCard = require('./cards/MoodNote-Card.js');
+module.exports.MoodTextCard = require('./cards/MoodText-Card.js');
+module.exports.ImageSource = require('./sources/ImageSource-Base.js');
+module.exports.NOTE_COLORS = libMoodboardView.NOTE_COLORS;

package/source/cards/MoodImage-Card.js

@@ -0,0 +1,85 @@
+'use strict';
+
+/**
+ * MoodImage: a moodboard image tile.
+ *
+ * A pict-section-flow card with no ports. Its body is an <img> filling the card edge to edge (the
+ * moodboard sets NodeTitleBarHeight 0). The image source lives in Data.ImageUrl (a direct URL or a
+ * base64 data URL); object-fit comes from Data.Fit ('cover' default, or 'contain'). You move the
+ * tile on the canvas and change its source and fit through the on-graph properties panel.
+ *
+ * @author Steven Velozo <steven@velozo.com>
+ * @license MIT
+ */
+
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class MoodImageCard extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Image',
+				Name: 'Image',
+				Code: 'MoodImage',
+				Description: 'An image tile. Move it on the canvas, drag a corner to resize.',
+				Category: 'Moodboard',
+				Width: 240,
+				Height: 200,
+				CornerRadius: 8,
+				ColorRole: 'none',
+				BodyStyle: { fill: 'var(--theme-color-background-tertiary, #eef1f4)' },
+				Inputs: [],
+				Outputs: [],
+				ShowTypeLabel: false,
+				BodyContent:
+				{
+					ContentType: 'html',
+					Padding: 0,
+					TemplateHash: 'Moodboard-Image-Body',
+					Templates:
+					[
+						{
+							Hash: 'Moodboard-Image-Body',
+							Template: /*html*/`<img class="mb-image mb-image-{~D:Record.Data.Fit~}" src="{~D:Record.Data.ImageUrl~}" alt="" draggable="false">`
+						}
+					]
+				},
+				PropertiesPanel:
+				{
+					PanelType: 'Template',
+					DefaultWidth: 280,
+					DefaultHeight: 190,
+					Title: 'Image',
+					Configuration:
+					{
+						TemplateHash: 'Moodboard-Image-Panel',
+						Templates:
+						[
+							{
+								Hash: 'Moodboard-Image-Panel',
+								Template: /*html*/`
+<div class="mbp">
+	<label class="mbp-label">Image URL</label>
+	<input class="mbp-input" value="{~D:Record.Data.ImageUrl~}" oninput="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setImageUrl('{~D:Record.Hash~}', this.value)">
+	<label class="mbp-label">Fit</label>
+	<select class="mbp-input" onchange="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setFit('{~D:Record.Hash~}', this.value)">
+		<option value="cover">Cover (fill the tile)</option>
+		<option value="contain">Contain (show all)</option>
+	</select>
+	<label class="mbp-label">Rotation</label>
+	<input class="mbp-range" type="range" min="-180" max="180" step="1" value="{~D:Record.Rotation~}" oninput="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setRotation('{~D:Record.Hash~}', this.value)">
+</div>`
+							}
+						]
+					}
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = MoodImageCard;

package/source/cards/MoodNote-Card.js

@@ -0,0 +1,91 @@
+'use strict';
+
+/**
+ * MoodNote: a moodboard sticky note.
+ *
+ * A pict-section-flow card with no ports. Its color comes from the per-node Style (BodyFill +
+ * TitleBarColor set to the same swatch so the whole card reads as one). The body is a read-only
+ * display; you move the note on the canvas and edit it (text + color) through its on-graph
+ * properties panel (double-click), which calls back into the moodboard view by node hash.
+ *
+ * @author Steven Velozo <steven@velozo.com>
+ * @license MIT
+ */
+
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class MoodNoteCard extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Note',
+				Name: 'Note',
+				Code: 'MoodNote',
+				Description: 'A sticky note. Move it on the canvas; double-click to edit text and color.',
+				Category: 'Moodboard',
+				Width: 200,
+				Height: 160,
+				CornerRadius: 8,
+				ColorRole: 'none',
+				TitleBarColor: '#ffe08a',
+				BodyStyle: { fill: '#ffe08a' },
+				Inputs: [],
+				Outputs: [],
+				ShowTypeLabel: false,
+				BodyContent:
+				{
+					ContentType: 'html',
+					Padding: 0,
+					TemplateHash: 'Moodboard-Note-Body',
+					Templates:
+					[
+						{
+							Hash: 'Moodboard-Note-Body',
+							Template: /*html*/`<div class="mb-note" data-ph="Write a note">{~D:Record.Data.Text~}</div>`
+						}
+					]
+				},
+				PropertiesPanel:
+				{
+					PanelType: 'Template',
+					DefaultWidth: 260,
+					DefaultHeight: 230,
+					Title: 'Note',
+					Configuration:
+					{
+						TemplateHash: 'Moodboard-Note-Panel',
+						Templates:
+						[
+							{
+								Hash: 'Moodboard-Note-Panel',
+								Template: /*html*/`
+<div class="mbp">
+	<label class="mbp-label">Text</label>
+	<textarea class="mbp-input mbp-textarea" placeholder="Write a note" oninput="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].editText('{~D:Record.Hash~}', this.value)">{~D:Record.Data.Text~}</textarea>
+	<label class="mbp-label">Color</label>
+	<div class="mbp-swatches">
+		<button class="mbp-swatch" style="background:#ffe08a" onclick="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setNoteColor('{~D:Record.Hash~}','#ffe08a')"></button>
+		<button class="mbp-swatch" style="background:#ffb3c1" onclick="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setNoteColor('{~D:Record.Hash~}','#ffb3c1')"></button>
+		<button class="mbp-swatch" style="background:#a8d8ff" onclick="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setNoteColor('{~D:Record.Hash~}','#a8d8ff')"></button>
+		<button class="mbp-swatch" style="background:#b7e4c7" onclick="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setNoteColor('{~D:Record.Hash~}','#b7e4c7')"></button>
+		<button class="mbp-swatch" style="background:#d8c2ff" onclick="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setNoteColor('{~D:Record.Hash~}','#d8c2ff')"></button>
+		<button class="mbp-swatch" style="background:#ffd6a5" onclick="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setNoteColor('{~D:Record.Hash~}','#ffd6a5')"></button>
+		<button class="mbp-swatch" style="background:#e6e6e6" onclick="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setNoteColor('{~D:Record.Hash~}','#e6e6e6')"></button>
+	</div>
+	<label class="mbp-label">Rotation</label>
+	<input class="mbp-range" type="range" min="-180" max="180" step="1" value="{~D:Record.Rotation~}" oninput="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setRotation('{~D:Record.Hash~}', this.value)">
+</div>`
+							}
+						]
+					}
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = MoodNoteCard;

package/source/cards/MoodText-Card.js

@@ -0,0 +1,90 @@
+'use strict';
+
+/**
+ * MoodText: a big-type text statement, the kind that dominates a moodboard ("live deliberately"
+ * set giant between the photos). Unlike a MoodNote it has no card background, bold centered type,
+ * and a font that scales with the card box (CSS container units) unless a fixed size is set.
+ *
+ * The card body is a read-only display; you move it on the canvas and edit it through its on-graph
+ * properties panel (double-click), which carries the text plus parameters (font size). The panel
+ * calls back into the moodboard view by node hash through AppData.Moodboard.ViewID.
+ *
+ * @author Steven Velozo <steven@velozo.com>
+ * @license MIT
+ */
+
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class MoodTextCard extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Text',
+				Name: 'Text',
+				Code: 'MoodText',
+				Description: 'A big-type statement. Resize the card to scale the words, or set a fixed size.',
+				Category: 'Moodboard',
+				Width: 360,
+				Height: 120,
+				CornerRadius: 8,
+				ColorRole: 'none',
+				TitleBarColor: 'transparent',
+				BodyStyle: { fill: 'transparent' },
+				Inputs: [],
+				Outputs: [],
+				ShowTypeLabel: false,
+				BodyContent:
+				{
+					ContentType: 'html',
+					Padding: 0,
+					TemplateHash: 'Moodboard-Text-Body',
+					Templates:
+					[
+						{
+							Hash: 'Moodboard-Text-Body',
+							Template: /*html*/`<div class="mb-text" data-ph="Big text" style="font-size:{~D:Record.Data.FontSizeCss~}">{~D:Record.Data.Text~}</div>`
+						}
+					]
+				},
+				PropertiesPanel:
+				{
+					PanelType: 'Template',
+					DefaultWidth: 280,
+					DefaultHeight: 250,
+					Title: 'Text',
+					Configuration:
+					{
+						TemplateHash: 'Moodboard-Text-Panel',
+						Templates:
+						[
+							{
+								Hash: 'Moodboard-Text-Panel',
+								Template: /*html*/`
+<div class="mbp">
+	<label class="mbp-label">Text</label>
+	<textarea class="mbp-input mbp-textarea" placeholder="Big text" oninput="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].editText('{~D:Record.Hash~}', this.value)">{~D:Record.Data.Text~}</textarea>
+	<label class="mbp-label">Font size</label>
+	<select class="mbp-input" onchange="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setFontSize('{~D:Record.Hash~}', this.value)">
+		<option value="">Auto (fit the card)</option>
+		<option value="28">Small</option>
+		<option value="44">Medium</option>
+		<option value="68">Large</option>
+		<option value="104">Display</option>
+	</select>
+	<label class="mbp-label">Rotation</label>
+	<input class="mbp-range" type="range" min="-180" max="180" step="1" value="{~D:Record.Rotation~}" oninput="_Pict.views['{~D:AppData.Moodboard.ViewID~}'].setRotation('{~D:Record.Hash~}', this.value)">
+</div>`
+							}
+						]
+					}
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = MoodTextCard;

package/source/sources/ImageSource-Base.js

@@ -0,0 +1,173 @@
+'use strict';
+
+/**
+ * MoodboardImageSource: the gallery's pluggable image backend.
+ *
+ * The moodboard gallery does not know where images come from. It asks a source for its fields
+ * (so it can build filter / sort / search controls) and for a list of images matching a query.
+ * This base class is the built-in, stand-alone source: an in-memory collection of image records,
+ * each carrying a Url (a direct URL or a base64 data URL) and a metadata bag. It is what a board
+ * uses when no host source is supplied, so everything works on built-ins.
+ *
+ * An embedding application replaces it (options.ImageSource) with one that serves its own library
+ * (for plansheet, the Media blobs) and declares its own metadata fields; the gallery then filters,
+ * sorts, and searches over whatever that source exposes. A host source only has to implement
+ * getFields(), list(query, callback), and (optionally) add() and upload().
+ *
+ * Field shape: { Key, Label, Type: 'string'|'enum'|'number'|'date', Searchable?, Filterable?, Sortable? }.
+ * 'Name' is a top-level field on each record; every other field reads from record.Metadata[Key].
+ *
+ * Query shape: { Search: string, Filters: { <Key>: value }, Sort: { Field, Direction: 'asc'|'desc' } }.
+ *
+ * @author Steven Velozo <steven@velozo.com>
+ * @license MIT
+ */
+
+const _DEFAULT_FIELDS =
+[
+	{ Key: 'Name',    Label: 'Name',  Type: 'string', Searchable: true,  Sortable: true },
+	{ Key: 'Type',    Label: 'Type',  Type: 'enum',   Filterable: true,  Sortable: true, Searchable: true },
+	{ Key: 'AddedAt', Label: 'Added', Type: 'date',   Sortable: true }
+];
+
+let _IdCounter = 0;
+
+class MoodboardImageSource
+{
+	constructor(pOptions)
+	{
+		let tmpOptions = pOptions || {};
+		this._Items = [];
+		this._Fields = Array.isArray(tmpOptions.Fields) ? tmpOptions.Fields : _DEFAULT_FIELDS;
+		if (Array.isArray(tmpOptions.Items))
+		{
+			tmpOptions.Items.forEach((pItem) => this.add(pItem));
+		}
+	}
+
+	/**
+	 * The metadata fields this source exposes. The gallery builds its controls from this list.
+	 */
+	getFields() { return this._Fields; }
+
+	/**
+	 * Distinct values for an enum field, for building a filter dropdown.
+	 */
+	getFilterOptions(pKey)
+	{
+		let tmpSeen = {};
+		let tmpValues = [];
+		for (let i = 0; i < this._Items.length; i++)
+		{
+			let tmpValue = this._fieldValue(this._Items[i], pKey);
+			if (tmpValue !== '' && tmpValue != null && !tmpSeen[tmpValue])
+			{
+				tmpSeen[tmpValue] = true;
+				tmpValues.push(tmpValue);
+			}
+		}
+		tmpValues.sort();
+		return tmpValues;
+	}
+
+	/**
+	 * Add an image record. Deduplicates by Url. Returns the stored record (with an Id).
+	 * @param {Object} pRecord - { Url, Name?, Thumbnail?, Metadata? }
+	 */
+	add(pRecord)
+	{
+		if (!pRecord || !pRecord.Url) { return null; }
+		let tmpExisting = this._Items.find((pItem) => pItem.Url === pRecord.Url);
+		if (tmpExisting) { return tmpExisting; }
+
+		let tmpRecord =
+		{
+			Id: pRecord.Id || ('img-' + (++_IdCounter)),
+			Url: pRecord.Url,
+			Name: pRecord.Name || 'image',
+			Thumbnail: pRecord.Thumbnail || pRecord.Url,
+			Metadata: Object.assign({}, pRecord.Metadata)
+		};
+		this._Items.push(tmpRecord);
+		return tmpRecord;
+	}
+
+	/**
+	 * Store an uploaded file. The base source keeps the data URL in memory; a host overrides this to
+	 * push the bytes to its own store and hand back a record whose Url points there.
+	 * @param {File} pFile
+	 * @param {string} pDataUrl - the file read as a base64 data URL
+	 * @param {Function} fCallback - function(error, record)
+	 */
+	upload(pFile, pDataUrl, fCallback)
+	{
+		let tmpRecord = this.add(
+			{
+				Url: pDataUrl,
+				Name: (pFile && pFile.name) || 'image',
+				Metadata: { Type: (pFile && pFile.type) || 'image', SizeBytes: (pFile && pFile.size) || 0, AddedAt: Date.now() }
+			});
+		if (typeof fCallback === 'function') { fCallback(null, tmpRecord); }
+		return tmpRecord;
+	}
+
+	/**
+	 * Return the images matching a query (search, filters, sort). Node-style callback plus a direct
+	 * return so callers can use whichever is convenient.
+	 */
+	list(pQuery, fCallback)
+	{
+		let tmpQuery = pQuery || {};
+		let tmpItems = this._Items.slice();
+
+		let tmpSearch = (tmpQuery.Search || '').trim().toLowerCase();
+		if (tmpSearch)
+		{
+			tmpItems = tmpItems.filter((pItem) => this._searchableText(pItem).indexOf(tmpSearch) >= 0);
+		}
+
+		let tmpFilters = tmpQuery.Filters || {};
+		Object.keys(tmpFilters).forEach((pKey) =>
+		{
+			let tmpValue = tmpFilters[pKey];
+			if (tmpValue === '' || tmpValue == null) { return; }
+			tmpItems = tmpItems.filter((pItem) => String(this._fieldValue(pItem, pKey)) === String(tmpValue));
+		});
+
+		if (tmpQuery.Sort && tmpQuery.Sort.Field)
+		{
+			let tmpField = tmpQuery.Sort.Field;
+			let tmpDir = (tmpQuery.Sort.Direction === 'desc') ? -1 : 1;
+			tmpItems.sort((pA, pB) =>
+			{
+				let tmpAV = this._fieldValue(pA, tmpField);
+				let tmpBV = this._fieldValue(pB, tmpField);
+				if (tmpAV < tmpBV) { return -1 * tmpDir; }
+				if (tmpAV > tmpBV) { return 1 * tmpDir; }
+				return 0;
+			});
+		}
+
+		if (typeof fCallback === 'function') { fCallback(null, tmpItems); }
+		return tmpItems;
+	}
+
+	_fieldValue(pItem, pKey)
+	{
+		if (pKey === 'Name') { return pItem.Name || ''; }
+		return (pItem.Metadata && pItem.Metadata[pKey] != null) ? pItem.Metadata[pKey] : '';
+	}
+
+	_searchableText(pItem)
+	{
+		let tmpParts = [pItem.Name || ''];
+		this._Fields.filter((pField) => pField.Searchable).forEach((pField) =>
+		{
+			tmpParts.push(String(this._fieldValue(pItem, pField.Key)));
+		});
+		return tmpParts.join(' ').toLowerCase();
+	}
+}
+
+module.exports = MoodboardImageSource;
+module.exports.DEFAULT_FIELDS = _DEFAULT_FIELDS;