@gorilla-engine-sdk/create-gorilla-engine-plugin 1.0.0

package/generator-gorilla-engine-plugin/app/templates/effect/instrument/Reverb Example.inst

@@ -0,0 +1,73 @@
+{
+  "Module": "Instrument",
+  "Name": "gorilla-reverb",
+  "Blob Number": "None",
+  "Blob Path": "../assets/Reverb Example.blob",
+  "Pitch Bend Range": 2,
+  "Script Defines": null,
+  "Version": "2.0.4",
+  "Editor Data": null,
+  "Groups": [
+    {
+      "Module": "Group",
+      "Name": "default",
+      "Volume": 0.6299895322,
+      "Output": -1,
+      "ModSources": [
+        {
+          "Module": "ModSourceADSR",
+          "Name": "Amp Env",
+          "Sustain": 1.0
+        }
+      ],
+      "ModRoutings": [
+        {
+          "Module": "ModRouting",
+          "Depth": 1.0
+        },
+        {
+          "Module": "ModRouting",
+          "Source": "Velocity",
+          "Depth": 1.0
+        },
+        {
+          "Module": "ModRouting",
+          "Source": "Pitch Bend",
+          "Depth": 1.0,
+          "Smooth": 0.25906554,
+          "Dest": "Tune"
+        }
+      ]
+    }
+  ],
+  "Voice Groups": [
+    {
+      "Module": "VoiceGroup",
+      "Name": null
+    }
+  ],
+  "FX Busses": [
+    {
+      "Module": "EffectBus",
+      "Name": "",
+      "Effects": [
+        {
+          "Module": "EffectReverb",
+          "Pre Delay": 0.25,
+          "Low Cut": 0.25,
+          "Damping": 0.352,
+          "Dry": 0.0,
+          "Wet": 1.0,
+          "Low Damping": 0.25
+        }
+      ]
+    }
+  ],
+  "Scripts": [
+    {
+      "Module": "Script",
+      "Script Path": "Reverb Example.txt",
+      "Script": "on init\n  prop_squared Reverb_PreDelay(0, 1000000, 0, 200) = 250000; set_prop_param(Reverb_PreDelay, PROP_UNITS, \"ms\"); set_prop_param(Reverb_PreDelay, PROP_NAME, \"PreDelay\")\n  prop_exp Reverb_Time(1000000, 100, 60000) = 500000; set_prop_param(Reverb_Time, PROP_UNITS, \"s\"); set_prop_param(Reverb_Time, PROP_NAME, \"Time\")\n  prop_linear Reverb_Dry_Wet(0, 100, 1) = 100; set_prop_param(Reverb_Dry_Wet, PROP_UNITS, \"%\"); set_prop_param(Reverb_Dry_Wet, PROP_NAME, \"Dry/Wet\")\n\n  var temp\nend on\n\non Reverb_PreDelay\n  set_module_param(M_BUS+1, M_EFFECT+1, 0, 3, Reverb_PreDelay) 'EffectReverb Pre Delay\nend on\n\non Reverb_Time\n  set_module_param(M_BUS+1, M_EFFECT+1, 0, 2, Reverb_Time) 'EffectReverb Time\nend on\n\non Reverb_Dry_Wet\n  temp = 100 - Reverb_Dry_Wet\n  set_module_param(M_BUS+1, M_EFFECT+1, 0, 7, temp * 10000) 'EffectReverb Dry\n  set_module_param(M_BUS+1, M_EFFECT+1, 0, 8, Reverb_Dry_Wet * 10000) 'EffectReverb Wet\nend on"
+    }
+  ]
+}

package/generator-gorilla-engine-plugin/app/templates/effect/instrument/Reverb Example.txt

@@ -0,0 +1,21 @@
+on init
+  prop_squared Reverb_PreDelay(0, 1000000, 0, 200) = 250000; set_prop_param(Reverb_PreDelay, PROP_UNITS, "ms"); set_prop_param(Reverb_PreDelay, PROP_NAME, "PreDelay")
+  prop_exp Reverb_Time(1000000, 100, 60000) = 500000; set_prop_param(Reverb_Time, PROP_UNITS, "s"); set_prop_param(Reverb_Time, PROP_NAME, "Time")
+  prop_linear Reverb_Dry_Wet(0, 100, 1) = 100; set_prop_param(Reverb_Dry_Wet, PROP_UNITS, "%"); set_prop_param(Reverb_Dry_Wet, PROP_NAME, "Dry/Wet")
+
+  var temp
+end on
+
+on Reverb_PreDelay
+  set_module_param(M_BUS+1, M_EFFECT+1, 0, 3, Reverb_PreDelay) 'EffectReverb Pre Delay
+end on
+
+on Reverb_Time
+  set_module_param(M_BUS+1, M_EFFECT+1, 0, 2, Reverb_Time) 'EffectReverb Time
+end on
+
+on Reverb_Dry_Wet
+  temp = 100 - Reverb_Dry_Wet
+  set_module_param(M_BUS+1, M_EFFECT+1, 0, 7, temp * 10000) 'EffectReverb Dry
+  set_module_param(M_BUS+1, M_EFFECT+1, 0, 8, Reverb_Dry_Wet * 10000) 'EffectReverb Wet
+end on

package/generator-gorilla-engine-plugin/app/templates/effect/src/app/Root.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { UserInterface } from './components/UserInterface';
+import { useNotification } from '@gorilla-engine-sdk/ge-dialogs-lib';
+import {
+  IPresetManager,
+  useSessionAndPresetsManager,
+} from '@gorilla-engine-sdk/ge-session-presets-lib';
+
+export function Root(props) {
+  const presetManager: IPresetManager = useSessionAndPresetsManager();
+  const [showNotification] = useNotification();
+
+  React.useEffect(() => {
+    if (presetManager) {
+      // it is possible to add additional logic when saving or loading sessions or presets
+      // typically you would add custom logic here to handle additional tasks when saving or loading presets
+      presetManager.setAdditionalSavePreset(
+        async (
+          instrument: GorillaEngine.Instrument,
+          presetObj: any,
+          fileObj: { filePath: string },
+        ) => {
+          showNotification({ message: 'Preset saved successfully' });
+          return true;
+        },
+      );
+    }
+  }, [presetManager]);
+
+  return (
+    <geLabel x={0} y={0} width={700} height={250} backgroundColor={'2F323D'}>
+      <UserInterface instrument={props.instrument} />
+    </geLabel>
+  );
+}

package/generator-gorilla-engine-plugin/app/templates/effect/src/app/components/ErrorBoundary.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+
+const FONT_MEDIUM = 'fonts/Roboto-Medium.otf';
+const FONT_BOLD = 'fonts/Roboto-Bold.otf';
+const FONT_REGULAR = 'fonts/Roboto-Regular.otf';
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  message: string;
+  stack: string;
+};
+
+export class ErrorBoundary extends React.Component<React.PropsWithChildren, ErrorBoundaryState> {
+  declare state: ErrorBoundaryState;
+
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, message: '', stack: '' };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, message: error.message || String(error) };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({
+      message: error.message || String(error),
+      stack: errorInfo.componentStack || error.stack || '',
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <geLabel x={0} y={0} width={700} height={250} backgroundColor="17191F">
+          <geLabel x={0} y={0} width={7} height={250} backgroundColor="E85D5D" />
+          <geLabel x={7} y={0} width={693} height={64} backgroundColor="20232B">
+            <geLabel
+              x={24}
+              y={15}
+              width={34}
+              height={34}
+              backgroundColor="E85D5D"
+              text="!"
+              textColor="FFFFFF"
+              font={FONT_BOLD}
+              fontSize={21}
+              textAlign="center"
+            />
+            <geLabel
+              x={72}
+              y={21}
+              width={330}
+              height={22}
+              text="PLUGIN UI INTERRUPTED"
+              textColor="F4F6FA"
+              font={FONT_BOLD}
+              fontSize={18}
+            />
+            <geLabel
+              x={538}
+              y={22}
+              width={126}
+              height={20}
+              text="RENDER ERROR"
+              textColor="E85D5D"
+              font={FONT_MEDIUM}
+              fontSize={10}
+              textAlign="center"
+              backgroundColor="33262A"
+            />
+          </geLabel>
+
+          <geLabel
+            x={28}
+            y={82}
+            width={644}
+            height={16}
+            text="WHAT HAPPENED"
+            textColor="7E8797"
+            font={FONT_MEDIUM}
+            fontSize={10}
+          />
+          <geLabel
+            x={28}
+            y={104}
+            width={644}
+            height={70}
+            text={this.state.message || 'An unexpected rendering error occurred.'}
+            textColor="F4F6FA"
+            font={FONT_MEDIUM}
+            fontSize={14}
+            backgroundColor="242730"
+          />
+
+          <geLabel x={28} y={196} width={644} height={1} backgroundColor="353945" />
+          <geLabel
+            x={538}
+            y={214}
+            width={134}
+            height={16}
+            text="GORILLA ENGINE"
+            textColor="596171"
+            font={FONT_MEDIUM}
+            fontSize={9}
+            textAlign="right"
+          />
+        </geLabel>
+      );
+    }
+
+    return (this.props as any).children;
+  }
+}

package/generator-gorilla-engine-plugin/app/templates/effect/src/app/components/UserInterface.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { LabeledKnob } from '@gorilla-engine-sdk/ge-labeled-components';
+
+type Props = {
+  instrument: GorillaEngine.Runtime.Instrument;
+};
+
+const KNOB_PROPS = {
+  y: 145,
+  width: 85,
+  height: 85,
+  backgroundColor: '00FFFFFF',
+  hideValueLabel: true,
+  hideTextValue: true,
+  toggleVisibilityOnHover: true,
+  valueLabel: {
+    y: 71,
+    height: 14,
+    font: 'fonts/Roboto-Medium.otf',
+    fontSize: 14,
+    textAlign: 'center' as const,
+  },
+  knob: {
+    filmstrip: { path: 'images/Rotary.png', count: 128, direction: 'vertical' as const },
+  },
+};
+
+const knobLabel = (text: string) => ({
+  ...KNOB_PROPS.valueLabel,
+  text,
+});
+
+export function UserInterface(props: Props) {
+  const { instrument } = props;
+
+  return (
+    <>
+      {/* ── Header: centred in the space to the right of the preset browser ── */}
+      <geLabel
+        x={397}
+        y={25}
+        width={263}
+        height={14}
+        text={GorillaEngine.getManufacturerName()}
+        textColor={'5177E0'}
+        font={'fonts/Roboto-Medium.otf'}
+        fontSize={12}
+        textAlign={'center'}
+      />
+      <geLabel
+        x={397}
+        y={40}
+        width={263}
+        height={28}
+        text={GorillaEngine.getPluginName()}
+        textColor={'E1E6F5'}
+        font={'fonts/Roboto-Bold.otf'}
+        fontSize={24}
+        textAlign={'center'}
+      />
+      {/* ── Knobs: centred in full 700px width (margin=111, gap=111) ──── */}
+      <LabeledKnob
+        {...KNOB_PROPS}
+        x={111}
+        instrument={instrument}
+        instrumentProp={instrument.reverb_predelay}
+        textLabel={knobLabel('PRE DELAY')}
+      />
+      <LabeledKnob
+        {...KNOB_PROPS}
+        x={307}
+        instrument={instrument}
+        instrumentProp={instrument.reverb_time}
+        textLabel={knobLabel('TIME')}
+      />
+      <LabeledKnob
+        {...KNOB_PROPS}
+        x={503}
+        instrument={instrument}
+        instrumentProp={instrument.reverb_dry_wet}
+        textLabel={knobLabel('DRY / WET')}
+      />
+    </>
+  );
+}

package/generator-gorilla-engine-plugin/app/templates/effect/src/app/pluginConfig.ts

@@ -0,0 +1,4 @@
+export const pluginConfig = {
+  name: "React FX Reverb",
+  manufacturer: "Gorilla Engine",
+};

package/generator-gorilla-engine-plugin/app/templates/effect/src/dialogsCustomStyle.ts

@@ -0,0 +1,101 @@
+import {
+  DialogHorizontalAlign,
+  DialogVerticalAlign,
+  DialogsStyleState,
+} from '@gorilla-engine-sdk/ge-dialogs-lib/dist/DialogsStyleState'
+
+export const dialogsCustomStyle: DialogsStyleState = {
+  pluginWidth: 566,
+  pluginHeight: 370,
+
+  modal: {
+    horizontalAlign: DialogHorizontalAlign.CENTER,
+    horizontalOffset: 0,
+    verticalAlign: DialogVerticalAlign.CENTER,
+    verticalOffset: 0,
+
+    blockingBackgroundColor: '33000000',
+
+    modalWidth: 400,
+    modalHeight: 220,
+    headerHeight: 50,
+    horizontalContentMargin: 16,
+
+    modal: {
+      cornerRadius: 4,
+      border: {
+        width: 1,
+        color: '3F4354',
+      },
+      backgroundColor: '2F333F',
+    },
+
+    title: {
+      fontSize: 20,
+      textColor: 'ffffff',
+      textAlign: 'center',
+    },
+
+    dividerLine: {
+      height: 1,
+      backgroundColor: '3F4354',
+    },
+
+    message: {
+      fontSize: 14,
+      textColor: 'ffffff',
+      textAlign: 'top left',
+      multiLine: true,
+    },
+
+    cancelButton: {
+      backgroundColor: '21242E',
+      textColor: 'E1E6F5',
+      font: 'fonts/Roboto-Medium.otf',
+      cornerRadius: 4,
+    },
+    approveButton: {
+      backgroundColor: '5177E0',
+      textColor: 'E1E6F5',
+      font: 'fonts/Roboto-Medium.otf',
+      cornerRadius: 4,
+    },
+
+    closeButton: {
+      width: 20,
+      height: 20,
+      backgroundColor: '333333',
+      cornerRadius: 10,
+      text: 'X',
+    },
+    closeButtonPosition: {
+      position: 'right',
+      space: 15,
+    },
+  },
+
+  notification: {
+    horizontalAlign: DialogHorizontalAlign.RIGHT,
+    horizontalOffset: -30,
+    verticalAlign: DialogVerticalAlign.BOTTOM,
+    verticalOffset: -30,
+    container: {
+      width: 300,
+      height: 40,
+      cornerRadius: 5,
+      backgroundColor: '333333',
+    },
+    label: {
+      //font: defaultFontMedium,
+    },
+  },
+
+  toolTip: {
+    container: { backgroundColor: '000000', cornerRadius: 5, height: 35 },
+    label: {
+      //font: defaultFontMedium,
+      fontSize: 13,
+      textAlign: 'center',
+    },
+  },
+}

package/generator-gorilla-engine-plugin/app/templates/effect/src/index.tsx

@@ -0,0 +1,214 @@
+import path = require('path');
+import os = require('os');
+
+import * as React from 'react';
+import * as GEReact from '@gorilla-engine-sdk/gorilla-engine-react';
+import { Root } from './app/Root';
+import { ErrorBoundary } from './app/components/ErrorBoundary';
+import {
+  SessionAndPresetsConfig,
+  SessionAndPresetsDispatchTypes,
+  SessionAndPresetsState,
+  SessionAndPresetsStateProvider,
+  SessionAndPresetsWrapper,
+  defaultSessionAndPresetsConfig,
+  defaultSessionAndPresetsState,
+  useSessionAndPresetsStateDispatch,
+} from '@gorilla-engine-sdk/ge-session-presets-lib';
+import {
+  Dialogs,
+  DialogsStylesState,
+  dialogsDefaultStyle,
+} from '@gorilla-engine-sdk/ge-dialogs-lib';
+import {
+  PresetBrowser,
+  PresetBrowserConfig,
+  PresetBrowserStyle,
+  defaultPresetBrowserConfig,
+  defaultPresetBrowserStyle,
+} from '@gorilla-engine-sdk/ge-preset-browser';
+
+import { DefaultModalProps, DefaultModal, useModal } from '@gorilla-engine-sdk/ge-dialogs-lib';
+
+import { BlobManager, loadBlob } from '@gorilla-engine-sdk/ge-blob-manager';
+import { presetBrowserCustomStyle, presetBrowserSaveModalStyle } from './presetBrowserCustomStyle';
+import { dialogsCustomStyle } from './dialogsCustomStyle';
+
+const PLUGIN_WIDTH: number = 700;
+const PLUGIN_HEIGHT: number = 250;
+
+const MANUFACTURER: string = GorillaEngine.getManufacturerName();
+const PLUGINNAME = GorillaEngine.getPluginName();
+
+/**
+ * Factory Preset location
+ */
+const FACTORY_PRESET_LOCATION: string = path.resolve(
+  GorillaEngine.getResourcePath(),
+  'presets',
+  'Factory',
+);
+
+const USER_CONTENT_PATH: string = path.resolve(os.homedir(), 'Documents', MANUFACTURER, PLUGINNAME);
+const USER_PRESET_LOCATION: string = path.resolve(USER_CONTENT_PATH, 'Presets');
+
+const dialogsStyle: DialogsStylesState = {
+  ...dialogsCustomStyle,
+  pluginWidth: PLUGIN_WIDTH,
+  pluginHeight: PLUGIN_HEIGHT,
+};
+
+/**
+ *
+ * Session Save/Restore & Presets config & content-state
+ *
+ */
+const sessionAndPresetsConfiguration: SessionAndPresetsConfig = {
+  ...defaultSessionAndPresetsConfig,
+
+  presetFileSuffix: '.preset',
+  // Location of factory presets
+  factoryPresetPath: FACTORY_PRESET_LOCATION,
+  // Location of user presets
+  userPresetPath: USER_PRESET_LOCATION,
+
+  // Factory library display name
+  factoryPresetType: 'Factory',
+  // User library display name
+  userPresetType: 'User',
+
+  handleErrors: true,
+};
+
+const initialSessionAndPresetsState: SessionAndPresetsState = {
+  ...defaultSessionAndPresetsState,
+  instrument: undefined,
+  initialPresetPath: path.join(FACTORY_PRESET_LOCATION, 'Category 1', '02 - About Half.preset'),
+};
+
+/**
+ * Preset Browser Config
+ */
+const presetBrowserConfig: PresetBrowserConfig = {
+  ...defaultPresetBrowserConfig,
+  enforceCategories: true,
+};
+
+function Main() {
+  const sessionAndPresetStateDispath = useSessionAndPresetsStateDispatch();
+
+  const [instrument, setInstrument] = React.useState<GorillaEngine.Runtime.Instrument | undefined>(
+    undefined,
+  );
+  const [instrumentLoaded, setInstrumentLoaded] = React.useState(false);
+  const [instrumentName, setInstrumentName] = React.useState('');
+  let showRelocateTrigger = false;
+  // Logic has a different flow since it does not allow a popup if the UI is not visible
+  if (GorillaEngine.getHostDescription() == 'Apple Logic') {
+    showRelocateTrigger = true;
+  }
+
+  // setup Modal
+  const defaultModalProps = {
+    width: 400,
+    height: 200,
+
+    title: 'An Error Occured!',
+    message: 'Error message',
+
+    cancelTrigger: showRelocateTrigger,
+    cancelTriggerLabel: 'Locate',
+    onCancelTrigger: onLocate,
+    approveTrigger: false,
+    closeTrigger: false,
+  };
+  const [modalProps, setModalProps] = React.useState<DefaultModalProps>({
+    ...defaultModalProps,
+  });
+
+  const modalPropsRef = React.useRef(modalProps);
+  modalPropsRef.current = modalProps;
+
+  const [showModal, hideModal] = useModal(
+    () => <DefaultModal {...modalPropsRef.current} />,
+    [true, false],
+  );
+
+  async function onLocate() {
+    hideModal();
+    loadBlob({
+      pluginName: GorillaEngine.getPluginName(),
+      blobName: PLUGINNAME,
+      defaultBlobPath: path.join(GorillaEngine.getResourcePath(), 'assets', 'instruments'),
+      manufacturerName: GorillaEngine.getManufacturerName(),
+      onErrorLoadingInstrument: onErrorLoadingInstrument,
+      onInstrumentLoaded: onInstrumentLoaded,
+    });
+  }
+
+  // Callback when the BlobManager finds the blob and loads the instrument successfully
+  const onInstrumentLoaded = (instrument: GorillaEngine.Instrument, instrumentName: string) => {
+    const runtimeInstrument = instrument as GorillaEngine.Runtime.Instrument;
+    setInstrument(runtimeInstrument);
+    setInstrumentName(instrumentName);
+    setInstrumentLoaded(true);
+
+    // Enable audio processing
+    GorillaEngine.getPluginAE(true);
+
+    sessionAndPresetStateDispath({
+      type: SessionAndPresetsDispatchTypes.setInstrument,
+      payload: {
+        instrument: instrument,
+      },
+    });
+  };
+
+  // Callback when the BlobManager cannot locate the blob
+  const onErrorLoadingInstrument = (errorMessage: string) => {
+    setModalProps({
+      ...defaultModalProps,
+      title: 'Error Loading Blob',
+      message: errorMessage,
+    });
+    showModal();
+  };
+
+  return (
+    <>
+      <BlobManager
+        pluginName={GorillaEngine.getPluginName()}
+        blobName={PLUGINNAME}
+        defaultBlobPath={path.join(GorillaEngine.getResourcePath(), 'assets', 'instruments')}
+        manufacturerName={GorillaEngine.getManufacturerName()}
+        onErrorLoadingInstrument={onErrorLoadingInstrument}
+        onInstrumentLoaded={onInstrumentLoaded}
+      />
+      {instrumentLoaded && <Root instrument={instrument} instrumentName={instrumentName} />}
+    </>
+  );
+}
+
+GEReact.createUI(
+  <React.StrictMode>
+    <ErrorBoundary>
+      <SessionAndPresetsStateProvider
+        config={sessionAndPresetsConfiguration}
+        state={initialSessionAndPresetsState}
+      >
+        <Dialogs styleState={dialogsStyle}>
+          <SessionAndPresetsWrapper>
+            <Main />
+            <PresetBrowser
+              config={presetBrowserConfig}
+              browserStyle={presetBrowserCustomStyle}
+              saveModalStyle={presetBrowserSaveModalStyle}
+            />
+          </SessionAndPresetsWrapper>
+        </Dialogs>
+      </SessionAndPresetsStateProvider>
+    </ErrorBoundary>
+  </React.StrictMode>,
+  PLUGIN_WIDTH,
+  PLUGIN_HEIGHT,
+);