point light type works

ChrisMBarr · Aug 1, 2023 · caf71c1 · caf71c1
1 parent f230af5
commit caf71c1
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 28 deletions.
diff --git a/src/helpers.js b/src/helpers.js
@@ -38,13 +38,27 @@ function createLightingElement() {
   const $svgFilter = $('#noise-filter');
   const result = $svgFilter.find('feTurbulence').attr('result');
   const lightingPrimitiveType = $('#ctrl-lighting-primitive-type').val();
-  const lightType = $('#ctrl-light-type').val();
 
   const lightingPrimitiveEl = document.createElementNS(svgNs, lightingPrimitiveType);
   lightingPrimitiveEl.setAttributeNS(svgNs, 'in', result);
+  lightingPrimitiveEl.appendChild(document.createTextNode('\n'));
+  lightingPrimitiveEl.appendChild(getLightElement());
+  lightingPrimitiveEl.appendChild(document.createTextNode('\n'));
+
+  $svgFilter.append('\n').append(lightingPrimitiveEl).append('\n');
+}
 
-  let lightEl = document.createElementNS(svgNs, lightType);
-  lightingPrimitiveEl.appendChild(lightEl);
+function getLightElement() {
+  const lightType = $('#ctrl-light-type').val();
+  return document.createElementNS(svgNs, lightType);
+}
 
-  $svgFilter.append(lightingPrimitiveEl);
+function replaceLightElement() {
+  const $svgFilter = $('#noise-filter');
+  $svgFilter.find('feDistantLight, fePointLight, feSpotLight').remove();
+  $svgFilter
+    .find('feDiffuseLighting, feSpecularLighting')
+    .append('\n')
+    .append(getLightElement())
+    .append('\n');
 }
diff --git a/src/index.html b/src/index.html
@@ -219,6 +219,7 @@ <h5 class="card-title">Lighting</h5>
                       id="ctrl-lighting-primitive-type"
                       disabled
                       data-toggle-visibility
+                      data-force-reload-svg="true"
                     >
                       <option
                         value="feDiffuseLighting"
@@ -356,13 +357,19 @@ <h5 class="card-title">Lighting</h5>
 
               <div class="form-control-wrapper shared-lighting-controls">
                 <label class="form-label" for="ctrl-light-type"> Light Type </label>
-                <select class="form-select" id="ctrl-light-type" disabled data-toggle-visibility>
+                <select
+                  class="form-select"
+                  id="ctrl-light-type"
+                  disabled
+                  data-toggle-visibility
+                  data-force-reload-svg="true"
+                >
                   <option
                     value="feDistantLight"
-                    data-toggle-visibility-and-enable="#light-type-distance-options"
+                    data-toggle-visibility-and-enable="#light-type-distant-options"
                     selected
                   >
-                    Distance
+                    Distant
                   </option>
                   <option
                     value="fePointLight"
@@ -379,9 +386,9 @@ <h5 class="card-title">Lighting</h5>
                 </select>
               </div>
 
-              <div id="light-type-distance-options">
+              <div id="light-type-distant-options">
                 <div class="form-control-wrapper">
-                  <label class="form-label" for="ctrl-lighting-azimuth">
+                  <label class="form-label" for="ctrl-lighting-distant-azimuth">
                     Direction
                     <i
                       class="bi bi-question-circle-fill tip"
@@ -393,7 +400,7 @@ <h5 class="card-title">Lighting</h5>
                       <input
                         type="range"
                         class="form-range"
-                        id="ctrl-lighting-azimuth"
+                        id="ctrl-lighting-distant-azimuth"
                         min="1"
                         max="360"
                         value="45"
@@ -409,7 +416,7 @@ <h5 class="card-title">Lighting</h5>
                 </div>
 
                 <div class="form-control-wrapper">
-                  <label class="form-label" for="ctrl-lighting-elevation">
+                  <label class="form-label" for="ctrl-lighting-distant-elevation">
                     Elevation
                     <i
                       class="bi bi-question-circle-fill tip"
@@ -421,7 +428,7 @@ <h5 class="card-title">Lighting</h5>
                       <input
                         type="range"
                         class="form-range"
-                        id="ctrl-lighting-elevation"
+                        id="ctrl-lighting-distant-elevation"
                         min="1"
                         max="270"
                         value="60"
@@ -437,7 +444,72 @@ <h5 class="card-title">Lighting</h5>
                 </div>
               </div>
 
-              <div id="light-type-point-options">Point!</div>
+              <div id="light-type-point-options">
+                <div class="form-control-wrapper">
+                  <label class="form-label" for="ctrl-lighting-point-x"> X </label>
+                  <div class="row">
+                    <div class="col-sm-9">
+                      <input
+                        type="range"
+                        class="form-range"
+                        id="ctrl-lighting-point-x"
+                        min="0"
+                        max="1000"
+                        value="100"
+                        step="0.1"
+                        disabled
+                        data-target="#noise-filter fePointLight"
+                        data-target-attr="x"
+                        data-force-reload-svg="true"
+                      />
+                    </div>
+                    <output class="col-sm-3"></output>
+                  </div>
+                </div>
+                <div class="form-control-wrapper">
+                  <label class="form-label" for="ctrl-lighting-point-y"> Y </label>
+                  <div class="row">
+                    <div class="col-sm-9">
+                      <input
+                        type="range"
+                        class="form-range"
+                        id="ctrl-lighting-point-y"
+                        min="0"
+                        max="1000"
+                        value="100"
+                        step="0.1"
+                        disabled
+                        data-target="#noise-filter fePointLight"
+                        data-target-attr="y"
+                        data-force-reload-svg="true"
+                      />
+                    </div>
+                    <output class="col-sm-3"></output>
+                  </div>
+                </div>
+                <div class="form-control-wrapper">
+                  <label class="form-label" for="ctrl-lighting-point-z"> Z </label>
+                  <div class="row">
+                    <div class="col-sm-9">
+                      <input
+                        type="range"
+                        class="form-range"
+                        id="ctrl-lighting-point-z"
+                        min="0"
+                        max="100"
+                        value="50"
+                        step="0.1"
+                        disabled
+                        data-target="#noise-filter fePointLight"
+                        data-target-attr="z"
+                        data-force-reload-svg="true"
+                      />
+                    </div>
+                    <output class="col-sm-3"></output>
+                  </div>
+                </div>
+              </div>
+
               <div id="light-type-spot-options">Spot!</div>
             </div>
           </div>

diff --git a/src/main.js b/src/main.js
@@ -72,20 +72,23 @@ $(() => {
           const $currentTarget = $toggleVisibilityInput.find(`option[value=${selectedVal}]`);
           const $toggleTargets = $($currentTarget.data('toggle-visibility-and-enable'));
 
+          const id = $toggleVisibilityInput.attr('id');
+          if (lightingEffectsEnabled) {
+            if (id === 'ctrl-lighting-primitive-type') {
+              clearLightingEffects();
+              createLightingElement();
+              $('#lighting-controls .shared-lighting-controls')
+                .find('input, select:not(#' + id + ')')
+                .trigger('input');
+            } else if (id === 'ctrl-light-type') {
+              replaceLightElement();
+            }
+          }
+
           $allTargets.hide().find('input, select').attr('disabled', 'disabled');
           const $enabledInputs = $toggleTargets.show().find('input, select').removeAttr('disabled');
-
           $enabledInputs.each((_i, t) => updateTexture($(t), $outputDisplay));
-
-          const id = $toggleVisibilityInput.attr('id');
-          if (lightingEffectsEnabled && id === 'ctrl-lighting-primitive-type') {
-            clearLightingEffects();
-            createLightingElement();
-
-            $('#lighting-controls .shared-lighting-controls')
-              .find('input:not(:disabled), select:not(:disabled):not(#' + id + ')')
-              .trigger('input');
-          }
+          // $enabledInputs.trigger('input');
         });
       }
     }

diff --git a/src/modal.js b/src/modal.js
@@ -59,9 +59,8 @@ $(() => {
       .join('\n');
 
     $ctrlCodeHtml.val(
-      `<svg xmlns="${svgNs}" class="hidden-svg">${prettyIndentHtml(
-        $svgFilter.get(0).outerHTML
-      )}</svg>`
+      `<svg xmlns="${svgNs}" class="hidden-svg">
+${prettyIndentHtml($svgFilter.get(0).outerHTML)}</svg>`
     );
 
     $ctrlCodeCss.val(`.bg-texture {
@@ -83,10 +82,15 @@ ${textureStylesStr}
     const tagLevels = {
       filter: 2,
       feTurbulence: 4,
+      feSpecularLighting: 4,
+      feDiffuseLighting: 4,
+      feDistantLight: 6,
+      fePointLight: 6,
+      feSpotLight: 6,
     };
 
     Object.keys(tagLevels).forEach((k) => {
-      const pattern = new RegExp(`\\s*(<\\/?${k})`, 'ig');
+      const pattern = new RegExp(`\n\\s*(<\\/?${k})`, 'ig');
       htmlStr = htmlStr.replace(pattern, `\n${' '.repeat(tagLevels[k])}$1`);
     });
 

diff --git a/src/styles.css b/src/styles.css
@@ -21,6 +21,10 @@ aside {
   cursor: help;
 }
 
+.modal {
+  --bs-modal-width: 600px !important;
+}
+
 dialog {
   padding: 0;
   border: none;