@blokkli/editor 2.0.0-alpha.24 → 2.0.0-alpha.25

package/dist/runtime/components/Edit/Features/Analyze/Main.vue

@@ -3,8 +3,8 @@
     <div class="bk-analyze-button">
       <button
         class="bk-button bk-is-primary"
-        :disabled="!isStale"
-        @click="onClick"
+        :disabled="buttonDisabled"
+        @click.prevent="onClick"
       >
         {{ $t("analyzeButtonLabel", "Analyze Page") }}
       </button>
@@ -16,17 +16,29 @@
           }}
         </RelativeTime>
       </p>
-      <p v-if="isStale && hasRunOnce" class="bk-message-info">
-        {{
-          $t(
-  "analyzeStaleMessage",
-  "The contents of the page have changed since last analyzing the page. Please run the analyzers again to get updated results."
-)
-        }}
+
+      <div v-if="analyzerStatuses.length > 1" class="bk-analyze-statuses">
+        <div
+          v-for="analyzer in analyzerStatuses"
+          :key="analyzer.id"
+          class="bk-analyze-status-item"
+        >
+          <span class="bk-analyze-status-title">{{ analyzer.title }}</span>
+          <span
+            class="bk-analyze-status-label"
+            :class="{ 'bk-is-stale': analyzer.isStale }"
+          >
+            {{ analyzer.status }}
+          </span>
+        </div>
+      </div>
+
+      <p v-if="staleMessage" class="bk-message-info">
+        {{ staleMessage }}
       </p>
     </div>
 
-    <div v-if="resultsFiltered.length" class="bk-analyze-wrapper">
+    <div v-if="results.length" class="bk-analyze-wrapper">
       <div class="bk-analyze-form">
         <FormSelect
           id="category"
@@ -35,18 +47,29 @@
           :options="categoryOptions"
         />
       </div>
-      <AnalyzeSummary :results="resultsFiltered" />
-      <Results :results="resultsFiltered" />
+      <AnalyzeSummary :results="results" />
+      <Results v-model="activeId" :results="results" />
     </div>
   </div>
   <Renderer
-    v-if="resultsFiltered.length && !isStale"
-    :results="resultsFiltered"
+    v-if="results.length"
+    v-model="activeId"
+    :results
+    :is-stale
+    :manual-analyzer-ids
+    :is-running
   />
 </template>
 
 <script setup>
-import { computed, useBlokkli, useState, ref } from "#imports";
+import {
+  computed,
+  useBlokkli,
+  useState,
+  onMounted,
+  onUnmounted,
+  watch
+} from "#imports";
 import Results from "./Results/Results.vue";
 import AnalyzeSummary from "./Summary/index.vue";
 import Renderer from "./Renderer/index.vue";
@@ -54,87 +77,288 @@ import { useAnalyzeHelper } from "./helper";
 import { FormSelect, RelativeTime } from "#blokkli/components";
 import { AnalyzerContext } from "./analyzers/helpers/Context";
 import { normalizeToArray } from "./analyzers/helpers/normalizeArray";
-import { falsy } from "#blokkli/helpers";
 import { renderCycle } from "#blokkli/helpers/renderCycle";
 const props = defineProps({
   langcode: { type: String, required: true },
   analyzers: { type: Array, required: true }
 });
 const ALL = "ALL";
-const { $t, ui, state } = useBlokkli();
+const { $t, ui, state, directive, dom } = useBlokkli();
 const { getCategoryLabel } = useAnalyzeHelper();
-const currentPlugin = ref("readability");
+const refreshKey = computed(() => {
+  return `dom:${dom.settleKey.value}_directive:${directive.settleKey.value}_state:${state.refreshKey.value}`;
+});
+const isRunning = defineModel({ type: Boolean, ...{ default: false } });
+let currentAbortController = null;
 const hasRunOnce = useState(() => false);
-const results = useState("blokkli:analyze", () => []);
-const isLoading = useState(() => false);
+const continuousResults = useState(
+  "blokkli:analyze:continuous",
+  () => []
+);
+const manualResults = useState(
+  "blokkli:analyze:manual",
+  () => []
+);
+const activeId = useState(() => "");
 const lastRun = useState(() => 0);
 const lastRunKey = useState(() => "");
 const selectedCategory = useState(() => ALL);
 const hasInitialized = useState(() => false);
 const providerRootElement = ui.providerElement;
-const resultsFiltered = computed(() => {
+const continuousAnalyzers = computed(
+  () => props.analyzers.filter((a) => a.continuous)
+);
+const manualAnalyzers = computed(
+  () => props.analyzers.filter((a) => !a.continuous)
+);
+const hasContinuousAnalyzers = computed(
+  () => continuousAnalyzers.value.length > 0
+);
+const hasManualAnalyzers = computed(() => manualAnalyzers.value.length > 0);
+const allResults = computed(() => {
+  const merged = [...continuousResults.value, ...manualResults.value];
+  const mappedResults = [];
+  let currentIndex = 0;
+  for (let i = 0; i < merged.length; i++) {
+    const result = merged[i];
+    if (!result) {
+      continue;
+    }
+    const nodes = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
+    const mappedNodes = [];
+    for (let j = 0; j < nodes.length; j++) {
+      const node = nodes[j];
+      if (!node) {
+        continue;
+      }
+      const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
+      const mappedTargets = [];
+      for (let k = 0; k < targets.length; k++) {
+        const target = targets[k];
+        if (!target) {
+          continue;
+        }
+        mappedTargets.push({ target, globalIndex: currentIndex });
+        currentIndex++;
+      }
+      mappedNodes.push({
+        ...node,
+        targets: mappedTargets
+      });
+    }
+    mappedResults.push({
+      ...result,
+      plugin: result.pluginId,
+      nodes: mappedNodes
+    });
+  }
+  return mappedResults;
+});
+const results = computed(() => {
   if (selectedCategory.value === ALL) {
-    return results.value;
+    return allResults.value;
   }
-  return results.value.filter((v) => v.category === selectedCategory.value);
+  return allResults.value.filter((v) => v.category === selectedCategory.value);
 });
 const isStale = computed(() => lastRunKey.value !== state.refreshKey.value);
-function getContext() {
+const buttonDisabled = computed(() => {
+  if (isRunning.value) {
+    return true;
+  }
+  if (!isStale.value) {
+    return false;
+  }
+  return false;
+});
+const staleMessage = computed(() => {
+  if (hasManualAnalyzers.value && manualResults.value.length === 0) {
+    return $t(
+      "analyzeClickButton",
+      "Click the button above to run the analysis."
+    );
+  }
+  if (hasManualAnalyzers.value && isStale.value) {
+    return $t(
+      "analyzeResultsOutdated",
+      "Results are outdated. Click the button to update."
+    );
+  }
+  return "";
+});
+const analyzerStatuses = computed(() => {
+  if (!hasRunOnce.value) {
+    return [];
+  }
+  return props.analyzers.map((analyzer) => {
+    const status = analyzer.continuous ? $t("analyzeStatusUpToDate", "Up-to-date") : isStale.value ? $t("analyzeStatusStale", "Stale") : $t("analyzeStatusUpToDate", "Up-to-date");
+    const title = typeof analyzer.label === "function" ? analyzer.label(ui.interfaceLanguage.value) : analyzer.label;
+    return {
+      id: analyzer.id,
+      title: title ?? analyzer.id,
+      status,
+      isStale: !analyzer.continuous && isStale.value
+    };
+  });
+});
+const manualAnalyzerIds = computed(
+  () => new Set(manualAnalyzers.value.map((a) => a.id))
+);
+let refreshTimeout = null;
+watch(refreshKey, () => {
+  if (!hasContinuousAnalyzers.value) {
+    return;
+  }
+  if (currentAbortController) {
+    currentAbortController.abort("refreshKey updated");
+  }
+  if (refreshTimeout) {
+    window.clearTimeout(refreshTimeout);
+  }
+  isRunning.value = true;
+  refreshTimeout = window.setTimeout(() => {
+    runContinuous();
+  }, 100);
+});
+onUnmounted(() => {
+  if (currentAbortController) {
+    currentAbortController.abort("refreshKey updated");
+    currentAbortController = null;
+  }
+});
+function getContext(signal) {
   return new AnalyzerContext(
     props.langcode,
     ui.interfaceLanguage.value,
     providerRootElement,
     state,
-    $t
+    $t,
+    signal
   );
 }
+async function runContinuous() {
+  if (!continuousAnalyzers.value.length) {
+    return;
+  }
+  if (currentAbortController) {
+    currentAbortController.abort("refreshKey updated");
+  }
+  const abortController = new AbortController();
+  currentAbortController = abortController;
+  isRunning.value = true;
+  let wasAborted = false;
+  try {
+    const context = getContext(abortController.signal);
+    if (!hasInitialized.value) {
+      await Promise.all(
+        props.analyzers.map(async (analyzer) => {
+          if (analyzer.init) {
+            await analyzer.init(context);
+          }
+        })
+      );
+      hasInitialized.value = true;
+    }
+    if (abortController.signal.aborted) {
+      wasAborted = true;
+      return;
+    }
+    const newResults = [];
+    for (let i = 0; i < continuousAnalyzers.value.length; i++) {
+      if (abortController.signal.aborted) {
+        wasAborted = true;
+        return;
+      }
+      const analyzer = continuousAnalyzers.value[i];
+      const result = (await normalizeToArray(analyzer.run(context))).map(
+        (v) => {
+          return {
+            ...v,
+            pluginId: analyzer.id
+          };
+        }
+      );
+      newResults.push(...result);
+    }
+    if (abortController.signal.aborted) {
+      wasAborted = true;
+      return;
+    }
+    continuousResults.value = newResults;
+    hasRunOnce.value = true;
+    lastRun.value = Date.now() / 1e3;
+  } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      wasAborted = true;
+      return;
+    }
+    throw error;
+  } finally {
+    if (currentAbortController === abortController) {
+      currentAbortController = null;
+      if (!wasAborted) {
+        isRunning.value = false;
+      }
+    }
+  }
+}
 async function onClick() {
-  if (isLoading.value) {
+  if (isRunning.value) {
     return;
   }
-  const requiresRawPage = props.analyzers.some(
+  const requiresRawPage = manualAnalyzers.value.some(
     (analyzer) => analyzer.requireRawPage
   );
   if (requiresRawPage) {
     ui.isAnalyzing.value = true;
   }
-  isLoading.value = true;
+  isRunning.value = true;
   await renderCycle();
-  const context = getContext();
-  if (!hasInitialized.value) {
-    await Promise.all(
-      props.analyzers.map(async (analyzer) => {
-        if (analyzer.init) {
-          await analyzer.init(context);
+  const currentRefreshKey = state.refreshKey.value;
+  try {
+    const context = getContext();
+    if (!hasInitialized.value) {
+      await Promise.all(
+        props.analyzers.map(async (analyzer) => {
+          if (analyzer.init) {
+            await analyzer.init(context);
+          }
+        })
+      );
+    }
+    hasInitialized.value = true;
+    const newManualResults = [];
+    for (let i = 0; i < manualAnalyzers.value.length; i++) {
+      const analyzer = manualAnalyzers.value[i];
+      const result = (await normalizeToArray(analyzer.run(context))).map(
+        (v) => {
+          return {
+            ...v,
+            pluginId: analyzer.id
+          };
         }
-      })
-    );
-  }
-  hasInitialized.value = true;
-  const newResults = [];
-  for (let i = 0; i < props.analyzers.length; i++) {
-    const analyzer = props.analyzers[i];
-    currentPlugin.value = analyzer.id;
-    const result = await normalizeToArray(analyzer.run(context));
-    const mapped = result.filter(falsy).map((v) => {
-      return {
-        ...v,
-        plugin: analyzer.id
-      };
-    });
-    newResults.push(...mapped);
-  }
-  results.value = newResults;
-  isLoading.value = false;
-  hasRunOnce.value = true;
-  lastRun.value = Date.now() / 1e3;
-  lastRunKey.value = state.refreshKey.value;
-  if (requiresRawPage) {
-    ui.isAnalyzing.value = false;
+      );
+      newManualResults.push(...result);
+    }
+    manualResults.value = newManualResults;
+    hasRunOnce.value = true;
+    lastRun.value = Date.now() / 1e3;
+    if (state.refreshKey.value === currentRefreshKey) {
+      lastRunKey.value = currentRefreshKey;
+    }
+  } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      return;
+    }
+    throw error;
+  } finally {
+    isRunning.value = false;
+    if (requiresRawPage) {
+      ui.isAnalyzing.value = false;
+    }
   }
 }
 const categoryOptions = computed(() => {
-  const set = results.value.reduce((acc, v) => {
+  const set = allResults.value.reduce((acc, v) => {
     acc.add(v.category);
     return acc;
   }, /* @__PURE__ */ new Set());
@@ -152,4 +376,9 @@ const categoryOptions = computed(() => {
     ...categories
   ];
 });
+onMounted(async () => {
+  if (hasContinuousAnalyzers.value) {
+    await runContinuous();
+  }
+});
 </script>

package/dist/runtime/components/Edit/Features/Analyze/Main.vue.d.ts

@@ -3,5 +3,12 @@ type __VLS_Props = {
     langcode: string;
     analyzers: Analyzer[];
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Renderer/fragment.glsl

@@ -7,6 +7,10 @@ in float v_rect_type;
 in vec3 v_color;
 in vec2 v_rect_size;
 in vec2 v_rect_center;
+in float v_opacity;
+in float v_border_opacity;
+in float v_border_factor;
+in float v_fill_opacity;
 
 out vec4 fragColor;
 
@@ -28,35 +32,43 @@ float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
 }
 
 void main() {
-  float borderThickness = 2.0 * u_dpi;
+  float borderThickness = 2.0 * u_dpi * v_border_factor;
   vec2 size = v_rect_size;
-  vec4 radius = vec4(0.0); // No rounded corners for now
+  vec4 radius = vec4(4.0 * u_dpi * v_border_factor);
 
   vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
 
-  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, radius);
+  // Outer rounded rectangle (includes border)
+  float outerDist = sdRoundBox(posRelativeToQuad, size / 2.0, radius);
 
-  // Calculate fill alpha (inside the rectangle)
-  float fillAlpha = 1.0 - smoothstep(-1.0, 0.0, mainDist);
+  // Inner rounded rectangle (fill area, excluding border)
+  float innerDist = sdRoundBox(
+    posRelativeToQuad,
+    size / 2.0 - borderThickness,
+    radius - borderThickness
+  );
 
-  // Calculate border alpha (edge of the rectangle)
-  float borderAlpha =
-    1.0 - smoothstep(-1.0, 0.0, abs(mainDist) - borderThickness);
+  // Calculate fill alpha (inside the inner rectangle)
+  float fillAlpha = 1.0 - smoothstep(-1.0, 0.0, innerDist);
+
+  // Calculate border alpha (between outer and inner)
+  float outerAlpha = 1.0 - smoothstep(-1.0, 0.0, outerDist);
+  float borderAlpha = outerAlpha * (1.0 - fillAlpha);
 
   // Background (transparent)
   vec4 bg = vec4(0.0, 0.0, 0.0, 0.0);
 
-  // Fill (semi-transparent)
-  vec4 fill = vec4(v_color, 0.3);
+  // Fill (semi-transparent) - use fill opacity from vertex shader
+  vec4 fill = vec4(v_color, v_fill_opacity * v_opacity);
 
-  // Border (fully opaque)
-  vec4 border = vec4(v_color, 1.0);
+  // Border - use opacity calculated in vertex shader
+  vec4 border = vec4(v_color, v_border_opacity);
 
   // Mix background with fill
   vec4 res_with_fill = mix(bg, fill, fillAlpha);
 
   // Mix with border
-  vec4 finalColor = mix(res_with_fill, border, borderAlpha * border.a);
+  vec4 finalColor = mix(res_with_fill, border, borderAlpha);
 
   fragColor = finalColor;
 }