@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Features/AddList/index.vue

@@ -50,13 +50,12 @@ import {
   ref,
   computed,
   useBlokkli,
-  onMounted,
-  onBeforeUnmount,
   nextTick,
   defineBlokkliFeature
 } from "#imports";
 import { Sortli } from "#blokkli/components";
 import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const { settings } = defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
@@ -87,21 +86,17 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-add-list.jpg"
 });
-const { state, $t, eventBus, ui } = useBlokkli();
+const { state, $t, eventBus, ui, element } = useBlokkli();
 const hasContextMenuOpen = computed(
   () => ui.openContextMenu.value.startsWith("add_list_item_")
 );
 const isSidebar = computed(() => ui.addListOrientation.value === "sidebar");
 const shouldRender = computed(() => state.editMode.value === "editing");
 watch(ui.addListOrientation, () => {
-  setRootClasses();
   nextTick(() => {
     eventBus.emit("add-list:change");
   });
 });
-watch(shouldRender, () => {
-  setRootClasses();
-});
 const CLASS_LEFT = "bk-has-add-list-left";
 const CLASS_BOTTOM = "bk-has-add-list-bottom";
 const wrapper = ref(null);
@@ -109,17 +104,15 @@ const isActive = ref(false);
 let mouseTimeout = null;
 const style = computed(() => {
   if (settings.value.orientation === "vertical" && (isActive.value || hasContextMenuOpen.value) && wrapper.value) {
-    const labels = [
-      ...wrapper.value.querySelectorAll(".bk-list-item-label span")
-    ];
-    const width = labels.reduce((acc, el) => {
-      if (el.offsetWidth > acc) {
-        return el.offsetWidth;
-      }
-      return acc;
-    }, 0);
+    const widths = element.queryAll(
+      wrapper.value,
+      ".bk-list-item-label span",
+      "AddList vertical sidebar style",
+      (el) => el.offsetWidth
+    );
+    const largestWidth = Math.max(...widths);
     return {
-      "--bk-add-list-width": width + 90
+      "--bk-add-list-width": largestWidth + 90
     };
   }
   return void 0;
@@ -146,18 +139,6 @@ const onWheel = (e) => {
     e.stopPropagation();
   }
 };
-function setRootClasses() {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-  if (!shouldRender.value) {
-    return;
-  }
-  if (ui.addListOrientation.value === "horizontal") {
-    document.documentElement.classList.add(CLASS_BOTTOM);
-  } else if (ui.addListOrientation.value === "vertical") {
-    document.documentElement.classList.add(CLASS_LEFT);
-  }
-}
 const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
 const tourText = computed(
   () => $t(
@@ -165,13 +146,20 @@ const tourText = computed(
     "<p>This shows the list of available blocks that can be placed. Add a block by dragging the icon into the page.</p><p>When an existing block is selected, some blocks may be greyed out. This indicates which blocks can be placed inside or after the selected block.</p>"
   )
 );
-onMounted(() => {
-  setRootClasses();
-});
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-});
+addElementClasses(
+  document.documentElement,
+  CLASS_BOTTOM,
+  computed(
+    () => ui.addListOrientation.value === "horizontal" && shouldRender.value
+  )
+);
+addElementClasses(
+  document.documentElement,
+  CLASS_LEFT,
+  computed(
+    () => ui.addListOrientation.value === "vertical" && shouldRender.value
+  )
+);
 </script>
 
 <script>

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

@@ -0,0 +1,58 @@
+precision highp float;
+
+varying vec4 v_quad;
+varying float v_rect_type;
+varying vec3 v_color;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+
+uniform float u_dpi;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+  if (idx == 0) cr = radii[0];
+  else if (idx == 1) cr = radii[1];
+  else if (idx == 2) cr = radii[3];
+  else cr = radii[2];
+  vec2 q = abs(p) - b + cr;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
+}
+
+void main() {
+  float borderThickness = 2.0 * u_dpi;
+  vec2 size = v_rect_size;
+  vec4 radius = vec4(0.0); // No rounded corners for now
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, radius);
+
+  // Calculate fill alpha (inside the rectangle)
+  float fillAlpha = 1.0 - smoothstep(-1.0, 0.0, mainDist);
+
+  // Calculate border alpha (edge of the rectangle)
+  float borderAlpha =
+    1.0 - smoothstep(-1.0, 0.0, abs(mainDist) - borderThickness);
+
+  // Background (transparent)
+  vec4 bg = vec4(0.0, 0.0, 0.0, 0.0);
+
+  // Fill (semi-transparent)
+  vec4 fill = vec4(v_color, 0.3);
+
+  // Border (fully opaque)
+  vec4 border = vec4(v_color, 1.0);
+
+  // 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);
+
+  gl_FragColor = finalColor;
+}

package/dist/runtime/components/Edit/Features/Analyze/Overlay/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed } from "#imports";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms
+} from "twgl.js";
+import vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
+import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import { toShaderColor } from "#blokkli/helpers";
+const props = defineProps({
+  results: { type: Array, required: true },
+  gl: { type: null, required: true }
+});
+const { animation, ui, theme, selection, eventBus, element } = useBlokkli();
+const programInfo = animation.registerProgram("analyze", props.gl, [vs, fs]);
+const statusPriority = {
+  violation: 3,
+  incomplete: 2,
+  pass: 1,
+  inapplicable: 0
+};
+const nodes = computed(() => {
+  const allNodes = props.results.filter((v) => v.status === "incomplete" || v.status === "violation").flatMap((result) => {
+    const nodes2 = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
+    return nodes2.flatMap((node) => {
+      const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
+      return targets.map((v) => {
+        if (typeof v === "string") {
+          return element.query(
+            ui.providerElement,
+            v,
+            "Find analyze node target element."
+          );
+        }
+        return v;
+      }).filter((v) => v instanceof HTMLElement).filter((v) => ui.providerElement.contains(v));
+    }).map((element2) => {
+      return {
+        id: result.id,
+        element: element2,
+        title: result.title,
+        status: result.status
+      };
+    });
+  });
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const node of allNodes) {
+    const existing = nodeMap.get(node.element);
+    if (!existing || statusPriority[node.status] > statusPriority[existing.status]) {
+      nodeMap.set(node.element, node);
+    }
+  }
+  return Array.from(nodeMap.values());
+});
+class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
+  prevKey = "";
+  rectCache = /* @__PURE__ */ new Map();
+  clearCache() {
+    this.rectCache.clear();
+  }
+  getBufferInfo(force) {
+    const key = nodes.value.map((node, index) => {
+      if (!this.rectCache.has(node.element)) {
+        this.rectCache.set(
+          node.element,
+          ui.getAbsoluteElementRect(node.element)
+        );
+      }
+      const rect = this.rectCache.get(node.element);
+      if (!rect) {
+        return `${index}_no_rect`;
+      }
+      return `${index}_${rect.x}_${rect.y}_${rect.width}_${rect.height}_${node.status}`;
+    }).join("_");
+    const hasChanged = force || this.prevKey !== key;
+    if (hasChanged) {
+      this.reset();
+      for (let i = 0; i < nodes.value.length; i++) {
+        const node = nodes.value[i];
+        const id = `analyze_${i}`;
+        if (this.added.has(id)) {
+          continue;
+        }
+        const rect = this.rectCache.get(node.element);
+        if (!rect) {
+          continue;
+        }
+        this.added.add(id);
+        const statusType = node.status === "violation" ? 3 : node.status === "incomplete" ? 1 : node.status === "inapplicable" ? 2 : 0;
+        this.addRectangle(
+          {
+            id,
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            status: node.status
+          },
+          statusType
+        );
+      }
+      this.prevKey = key;
+    }
+    if (hasChanged) {
+      this.bufferInfo = this.createBufferInfo();
+    }
+    return { info: this.bufferInfo, hasChanged };
+  }
+}
+const collector = new AnalyzeRectangleBufferCollector(props.gl);
+defineRenderer("analyze-overlay", {
+  zIndex: 500,
+  enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value,
+  render: (ctx) => {
+    ctx.gl.useProgram(programInfo.program);
+    const { info } = collector.getBufferInfo();
+    if (!info) {
+      return;
+    }
+    setUniforms(programInfo, {
+      u_color_violation: toShaderColor(theme.red.value.normal),
+      u_color_incomplete: toShaderColor(theme.yellow.value.normal),
+      u_color_pass: toShaderColor(theme.lime.value.normal)
+    });
+    animation.setSharedUniforms(ctx.gl, programInfo);
+    setBuffersAndAttributes(ctx.gl, programInfo, info);
+    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
+  }
+});
+onBlokkliEvent("ui:resized", function() {
+  collector.clearCache();
+  collector.reset();
+});
+onBlokkliEvent("state:reloaded", function() {
+  collector.clearCache();
+  collector.reset();
+});
+onBlokkliEvent("mouse:up", (e) => {
+  const artboardX = (e.x - ui.artboardOffset.value.x) / ui.artboardScale.value;
+  const artboardY = (e.y - ui.artboardOffset.value.y) / ui.artboardScale.value;
+  for (let i = 0; i < nodes.value.length; i++) {
+    const node = nodes.value[i];
+    const rect = collector.rectCache.get(node.element);
+    if (!rect) {
+      continue;
+    }
+    if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
+      eventBus.emit("analyze:click-node", {
+        id: node.id,
+        target: node.element
+      });
+      return;
+    }
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "AnalyzeOverlay"
+};
+</script>

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

@@ -0,0 +1,9 @@
+import type { AnalyzeResultMapped } from '#blokkli/analyzer/types';
+declare const _default: import("vue").DefineComponent<{
+    results: AnalyzeResultMapped[];
+    gl: WebGLRenderingContext;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    results: AnalyzeResultMapped[];
+    gl: WebGLRenderingContext;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Overlay/vertex.glsl

@@ -0,0 +1,72 @@
+precision highp float;
+
+// [x, y] position.
+attribute vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+attribute vec4 a_quad;
+attribute float a_rect_id;
+attribute float a_rect_type;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+uniform vec3 u_color_violation;
+uniform vec3 u_color_incomplete;
+uniform vec3 u_color_pass;
+
+varying vec4 v_quad;
+varying float v_rect_type;
+varying vec3 v_color;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+
+void main() {
+  // Apply global scale and offsets
+  vec2 offsetPosition = a_position * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  // Pass quad and type to fragment shader
+  vec4 transformed_quad = vec4(
+    (a_quad.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - a_quad.y * u_scale - a_quad.w * u_scale - u_offset_y) *
+      u_dpi,
+    a_quad.z * u_scale * u_dpi,
+    a_quad.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+  v_rect_type = a_rect_type;
+  v_rect_size = vec2(v_quad.z, v_quad.w);
+  v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+
+  // Set color based on status type
+  // 0 = pass, 1 = incomplete, 2 = inapplicable, 3 = violation
+  if (a_rect_type > 2.5) {
+    // violation
+    v_color = u_color_violation;
+  } else if (a_rect_type > 0.5 && a_rect_type < 1.5) {
+    // incomplete
+    v_color = u_color_incomplete;
+  } else if (a_rect_type < 0.5) {
+    // pass
+    v_color = u_color_pass;
+  } else {
+    // inapplicable - use a neutral gray
+    v_color = vec3(0.5, 0.5, 0.5);
+  }
+}

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

@@ -0,0 +1,159 @@
+<template>
+  <div class="bk bk-analyze">
+    <div class="bk-analyze-button">
+      <button
+        class="bk-button bk-is-primary"
+        :disabled="!isStale"
+        @click="onClick"
+      >
+        {{ $t("analyzeButtonLabel", "Analyze Page") }}
+      </button>
+
+      <p v-if="lastRun" class="bk-analyze-last-run">
+        <RelativeTime v-slot="{ formatted }" :timestamp="lastRun">
+          {{
+            $t("analyzeLastRun", "Last run: @time").replace("@time", formatted)
+          }}
+        </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."
+)
+        }}
+      </p>
+    </div>
+
+    <div v-if="resultsFiltered.length" class="bk-analyze-wrapper">
+      <div class="bk-analyze-form">
+        <FormSelect
+          id="category"
+          v-model="selectedCategory"
+          :label="$t('analyzeCategory', 'Category')"
+          :options="categoryOptions"
+        />
+      </div>
+      <AnalyzeSummary :results="resultsFiltered" />
+      <Results :results="resultsFiltered" />
+    </div>
+  </div>
+  <Overlay
+    v-if="
+  resultsFiltered.length && gl && animation.webglEnabled.value && !isStale
+"
+    :results="resultsFiltered"
+    :gl="gl"
+  />
+</template>
+
+<script setup>
+import { computed, useBlokkli, useState, ref } from "#imports";
+import Results from "./Results/Results.vue";
+import AnalyzeSummary from "./Summary/index.vue";
+import Overlay from "./Overlay/index.vue";
+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, animation } = useBlokkli();
+const { getCategoryLabel } = useAnalyzeHelper();
+const gl = animation.gl();
+const currentPlugin = ref("readability");
+const hasRunOnce = useState(() => false);
+const results = useState("blokkli:analyze", () => []);
+const isLoading = useState(() => false);
+const lastRun = useState(() => 0);
+const lastRunKey = useState(() => "");
+const selectedCategory = useState(() => ALL);
+const hasInitialized = useState(() => false);
+const providerRootElement = ui.providerElement;
+const resultsFiltered = computed(() => {
+  if (selectedCategory.value === ALL) {
+    return results.value;
+  }
+  return results.value.filter((v) => v.category === selectedCategory.value);
+});
+const isStale = computed(() => lastRunKey.value !== state.refreshKey.value);
+function getContext() {
+  return new AnalyzerContext(
+    props.langcode,
+    ui.interfaceLanguage.value,
+    providerRootElement,
+    state,
+    $t
+  );
+}
+async function onClick() {
+  if (isLoading.value) {
+    return;
+  }
+  const requiresRawPage = props.analyzers.some(
+    (analyzer) => analyzer.requireRawPage
+  );
+  if (requiresRawPage) {
+    ui.isAnalyzing.value = true;
+  }
+  isLoading.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);
+        }
+      })
+    );
+  }
+  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;
+  }
+}
+const categoryOptions = computed(() => {
+  const set = results.value.reduce((acc, v) => {
+    acc.add(v.category);
+    return acc;
+  }, /* @__PURE__ */ new Set());
+  const categories = [...set.values()].map((value) => {
+    return {
+      value,
+      label: getCategoryLabel(value)
+    };
+  });
+  return [
+    {
+      value: ALL,
+      label: $t("all", "All")
+    },
+    ...categories
+  ];
+});
+</script>

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

@@ -0,0 +1,7 @@
+import type { Analyzer } from './analyzers/types.js';
+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>;
+export default _default;

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

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <details
+      v-for="group in grouped"
+      :key="group.group"
+      :open="group.open"
+      class="bk-analyze-results"
+    >
+      <summary v-show="!group.open">
+        <div>
+          <span>{{ group.label }}</span>
+          <div>
+            <span class="bk-pill">{{ group.results.length }}</span>
+          </div>
+        </div>
+        <Icon name="caret" />
+      </summary>
+      <ul
+        :class="{
+  'bk-is-always-open': group.open
+}"
+      >
+        <li>
+          <ResultsItem
+            v-for="result in group.results"
+            v-bind="result"
+            :key="group.group + result.id"
+          />
+        </li>
+      </ul>
+    </details>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import ResultsItem from "./ResultsItem.vue";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  results: { type: Array, required: true }
+});
+const { $t } = useBlokkli();
+const groupOrder = {
+  problems: 1,
+  success: 2,
+  inapplicable: 3
+};
+const statusOrder = {
+  violation: 1,
+  incomplete: 2,
+  pass: 3,
+  inapplicable: 4
+};
+function getGroup(status) {
+  if (status === "violation" || status === "incomplete") {
+    return "problems";
+  } else if (status === "pass") {
+    return "success";
+  }
+  return "inapplicable";
+}
+function getGroupLabel(group) {
+  if (group === "problems") {
+    return "Problems";
+  } else if (group === "success") {
+    return $t("analyzeStatusPass", "Pass");
+  }
+  return $t("analyzeStatusInapplicable", "Inapplicable");
+}
+const grouped = computed(() => {
+  const map = props.results.reduce(
+    (acc, result) => {
+      const group = getGroup(result.status);
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(result);
+      return acc;
+    },
+    {}
+  );
+  return Object.entries(map).map(([key, results]) => {
+    const group = key;
+    return {
+      group,
+      label: getGroupLabel(group),
+      open: group === "problems",
+      results: results.sort((a, b) => {
+        const statusDiff = statusOrder[a.status] - statusOrder[b.status];
+        if (statusDiff !== 0) {
+          return statusDiff;
+        }
+        return a.title.localeCompare(b.title);
+      })
+    };
+  }).sort((a, b) => {
+    return groupOrder[a.group] - groupOrder[b.group];
+  });
+});
+</script>

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

@@ -0,0 +1,6 @@
+import type { AnalyzeResultMapped } from '../analyzers/types.js';
+type __VLS_Props = {
+    results: AnalyzeResultMapped[];
+};
+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>;
+export default _default;