@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

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

@@ -4,7 +4,8 @@
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, onBeforeUnmount, computed } from "#imports";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -18,7 +19,7 @@ const props = defineProps({
   results: { type: Array, required: true },
   gl: { type: null, required: true }
 });
-const { animation, ui, theme, selection, eventBus } = useBlokkli();
+const { animation, ui, theme, selection, eventBus, element } = useBlokkli();
 const programInfo = animation.registerProgram("analyze", props.gl, [vs, fs]);
 const statusPriority = {
   violation: 3,
@@ -26,7 +27,6 @@ const statusPriority = {
   pass: 1,
   inapplicable: 0
 };
-const providerElement = ui.providerElement();
 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];
@@ -34,14 +34,18 @@ const nodes = computed(() => {
       const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
       return targets.map((v) => {
         if (typeof v === "string") {
-          return providerElement.querySelector(v);
+          return element.query(
+            ui.providerElement,
+            v,
+            "Find analyze node target element."
+          );
         }
         return v;
-      }).filter((v) => v instanceof HTMLElement).filter((v) => providerElement.contains(v));
-    }).map((element) => {
+      }).filter((v) => v instanceof HTMLElement).filter((v) => ui.providerElement.contains(v));
+    }).map((element2) => {
       return {
         id: result.id,
-        element,
+        element: element2,
         title: result.title,
         status: result.status
       };
@@ -112,23 +116,24 @@ class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new AnalyzeRectangleBufferCollector(props.gl);
-onBlokkliEvent("canvas:draw", () => {
-  if (selection.isMultiSelecting.value || selection.isDragging.value) {
-    return;
-  }
-  props.gl.useProgram(programInfo.program);
-  const { info } = collector.getBufferInfo();
-  if (!info) {
-    return;
+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);
   }
-  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(props.gl, programInfo);
-  setBuffersAndAttributes(props.gl, programInfo, info);
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 onBlokkliEvent("ui:resized", function() {
   collector.clearCache();
@@ -156,9 +161,6 @@ onBlokkliEvent("mouse:up", (e) => {
     }
   }
 });
-onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
-});
 </script>
 
 <script>

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

@@ -75,7 +75,7 @@ const lastRun = useState(() => 0);
 const lastRunKey = useState(() => "");
 const selectedCategory = useState(() => ALL);
 const hasInitialized = useState(() => false);
-const providerRootElement = ui.providerElement();
+const providerRootElement = ui.providerElement;
 const resultsFiltered = computed(() => {
   if (selectedCategory.value === ALL) {
     return results.value;

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

@@ -23,20 +23,24 @@ const props = defineProps({
   resultId: { type: String, required: true },
   target: { type: null, required: true }
 });
-const { eventBus, dom } = useBlokkli();
+const { eventBus, dom, blocks, element } = useBlokkli();
 const elButton = useTemplateRef("elButton");
 const isFocused = ref(false);
 let focusTimeout = null;
 function getElement() {
   if (props.target) {
     if (typeof props.target === "string") {
-      return document.querySelector(props.target);
+      return element.query(
+        document.documentElement,
+        props.target,
+        "Find analyze result item node target."
+      );
     } else if (props.target instanceof HTMLElement) {
       return props.target;
     } else if (typeof props.target === "object" && "uuid" in props.target) {
-      const block = dom.findBlock(props.target.uuid);
-      if (block) {
-        return block.element();
+      const item = blocks.getBlock(props.target.uuid);
+      if (item) {
+        return dom.getDragElement(item) ?? null;
       }
     }
   }
@@ -53,8 +57,8 @@ function getLabel() {
     }
   }
 }
-function findClosestUuid(element) {
-  const closestBlock = element.closest("[data-uuid]");
+function findClosestUuid(element2) {
+  const closestBlock = element2.closest("[data-uuid]");
   if (closestBlock instanceof HTMLElement) {
     const uuid = closestBlock.dataset.uuid;
     if (uuid) {
@@ -63,11 +67,11 @@ function findClosestUuid(element) {
   }
 }
 async function onClick() {
-  const element = getElement();
-  if (!element) {
+  const element2 = getElement();
+  if (!element2) {
     return;
   }
-  const closestUuid = findClosestUuid(element);
+  const closestUuid = findClosestUuid(element2);
   if (closestUuid) {
     eventBus.emit("select", closestUuid);
   } else {
@@ -75,7 +79,7 @@ async function onClick() {
   }
   await renderCycle();
   eventBus.emit("scrollIntoView", {
-    element
+    element: element2
   });
 }
 onBlokkliEvent("analyze:click-node", (e) => {

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

@@ -11,12 +11,28 @@
 </template>
 
 <script setup>
-import { useBlokkli, ref, onMounted, onBeforeUnmount, useRoute } from "#imports";
+import { useBlokkli, useRoute, computed } from "#imports";
 import { PluginBlockIndicator } from "#blokkli/plugins";
 import { emitMessage } from "#blokkli/helpers/eventBus";
 const route = useRoute();
-const { ui, $t, adapter } = useBlokkli();
-const rootElement = ui.providerElement();
+const { $t, adapter, dom } = useBlokkli();
+const items = computed(() => {
+  const anchorItems = [];
+  for (const entry of Object.entries(dom.registeredBlocks.value)) {
+    const uuid = entry[0];
+    const element = entry[1];
+    if (!element || !uuid) {
+      continue;
+    }
+    if (element.id) {
+      anchorItems.push({
+        id: element.id,
+        uuid
+      });
+    }
+  }
+  return anchorItems;
+});
 function getLinkForClipboard(item) {
   if (adapter.buildAnchorLink) {
     return adapter.buildAnchorLink(item.id, item.uuid);
@@ -34,103 +50,4 @@ function onClick(item) {
     emitMessage(message, "success", void 0, true);
   }
 }
-const items = ref([]);
-const trackedElements = /* @__PURE__ */ new Map();
-let observer = null;
-const getAnchorData = (el) => {
-  const uuid = el.getAttribute("data-uuid");
-  const id = el.getAttribute("id");
-  return uuid && id ? { uuid, id } : null;
-};
-const syncItems = () => {
-  const newItems = Array.from(trackedElements.values());
-  items.value = newItems;
-};
-const checkElement = (el) => {
-  const data = getAnchorData(el);
-  const isTracked = trackedElements.has(el);
-  if (data && !isTracked) {
-    trackedElements.set(el, data);
-    return true;
-  } else if (!data && isTracked) {
-    trackedElements.delete(el);
-    return true;
-  } else if (data && isTracked) {
-    const existing = trackedElements.get(el);
-    if (existing.uuid !== data.uuid || existing.id !== data.id) {
-      trackedElements.set(el, data);
-      return true;
-    }
-  }
-  return false;
-};
-const processAddedNode = (node) => {
-  if (node.nodeType !== Node.ELEMENT_NODE) return false;
-  let changed = false;
-  const el = node;
-  if (el.hasAttribute("data-uuid") && el.hasAttribute("id")) {
-    changed = checkElement(el) || changed;
-  }
-  return changed;
-};
-const processRemovedNode = (node) => {
-  if (node.nodeType !== Node.ELEMENT_NODE) return false;
-  let changed = false;
-  const el = node;
-  if (!el.id) {
-    return false;
-  }
-  if (trackedElements.delete(el)) {
-    changed = true;
-  }
-  const toRemove = [];
-  for (const [trackedEl] of trackedElements) {
-    if (node.contains(trackedEl)) {
-      toRemove.push(trackedEl);
-    }
-  }
-  for (const el2 of toRemove) {
-    trackedElements.delete(el2);
-    changed = true;
-  }
-  return changed;
-};
-onMounted(() => {
-  const elements = rootElement.querySelectorAll("[data-uuid][id]");
-  for (const el of elements) {
-    const data = getAnchorData(el);
-    if (data) {
-      trackedElements.set(el, data);
-    }
-  }
-  syncItems();
-  observer = new MutationObserver((mutations) => {
-    let changed = false;
-    for (const mutation of mutations) {
-      if (mutation.type === "childList") {
-        for (const node of mutation.addedNodes) {
-          changed = processAddedNode(node) || changed;
-        }
-        for (const node of mutation.removedNodes) {
-          changed = processRemovedNode(node) || changed;
-        }
-      } else if (mutation.type === "attributes") {
-        const target = mutation.target;
-        changed = checkElement(target) || changed;
-      }
-    }
-    if (changed) {
-      syncItems();
-    }
-  });
-  observer.observe(rootElement, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-    attributeFilter: ["data-uuid", "id"]
-  });
-});
-onBeforeUnmount(() => {
-  observer?.disconnect();
-});
 </script>

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

@@ -232,6 +232,9 @@ const resetZoom = () => {
   animation.requestDraw();
 };
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Home") {
     e.originalEvent.preventDefault();
     artboard.scrollToTop();

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

@@ -36,7 +36,7 @@
     :key="renderKey"
     to="#blokkli-add-list-sidebar-before"
   >
-    <div class="bk-list-sidebar-form">
+    <div class="bk bk-list-sidebar-form">
       <input
         id="add_block_search"
         v-model="searchText"
@@ -91,53 +91,36 @@ const {
   $t,
   state,
   dom,
-  definitions
+  definitions,
+  blocks
 } = useBlokkli();
 const shouldRender = computed(() => state.editMode.value === "editing");
 const searchText = ref("");
 const itemEntityType = runtimeConfig.itemEntityType;
 const favorites = storage.use("blockFavorites", []);
-const activeField = computed(() => {
-  if (selection.activeFieldKey.value) {
-    const el = document.querySelector(
-      `[data-field-key="${selection.activeFieldKey.value}"]`
-    );
-    if (el && el instanceof HTMLElement) {
-      const label = el.dataset.fieldLabel;
-      const name = el.dataset.fieldName;
-      const isNested = el.dataset.fieldIsNested === "true";
-      const hostEntityType = el.dataset.hostEntityType;
-      const hostEntityUuid = el.dataset.hostEntityUuid;
-      if (label && name && hostEntityType && hostEntityUuid) {
-        return { label, name, hostEntityType, hostEntityUuid, isNested };
-      }
-    }
-  }
-  return void 0;
-});
 const getAllowedTypesForSelected = (p) => {
-  if (types.itemBundlesWithNested.includes(p.itemBundle)) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.itemBundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  if (types.itemBundlesWithNested.includes(p.bundle)) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   }
-  if (p.hostType === itemEntityType) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.hostBundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  if (p.host.type === itemEntityType) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.host.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   } else {
     return types.getFieldConfig(
       context.value.entityType,
       context.value.entityBundle,
-      p.hostFieldName
+      p.host.fieldName
     )?.allowedBundles || [];
   }
 };
-const bundlesForRenderedFields = computed(
-  () => dom.registeredFieldTypes.value.flatMap((field) => {
+const bundlesForRenderedFields = computed(() => {
+  return dom.registeredFieldTypes.value.flatMap((field) => {
     return types.getFieldConfig(
       field.entityType,
       field.entityBundle,
       field.fieldName
     )?.allowedBundles || [];
-  }).filter(onlyUnique)
-);
+  }).filter(onlyUnique);
+});
 const generallyAvailableBundles = computed(
   () => types.generallyAvailableBundles.filter(
     (v) => (
@@ -147,15 +130,8 @@ const generallyAvailableBundles = computed(
   )
 );
 const selectableBundles = computed(() => {
-  if (selection.blocks.value.length) {
-    return selection.blocks.value.flatMap((v) => getAllowedTypesForSelected(v));
-  }
-  if (activeField.value && activeField.value.hostEntityType === context.value.entityType) {
-    return types.getFieldConfig(
-      context.value.entityType,
-      context.value.entityBundle,
-      activeField.value.name
-    )?.allowedBundles || [];
+  if (selection.items.value.length) {
+    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
   }
   return generallyAvailableBundles.value.map((v) => v.id || "");
 });
@@ -191,18 +167,18 @@ const sortedList = computed(() => {
 });
 const renderKey = ref("");
 const getBundlesForAppendCommands = () => {
-  if (selection.blocks.value.length !== 1) {
+  const item = selection.item.value;
+  if (!item) {
     return [];
   }
-  const block = selection.blocks.value[0];
   const field = types.getFieldConfig(
-    block.hostType,
-    block.hostBundle,
-    block.hostFieldName
+    item.host.type,
+    item.host.bundle,
+    item.host.fieldName
   );
   if (field) {
     if (field.cardinality !== -1) {
-      const key = getFieldKey(block.hostUuid, block.hostFieldName);
+      const key = getFieldKey(item.host.uuid, item.host.fieldName);
       const count = state.getFieldBlockCount(key);
       if (count >= field.cardinality) {
         return [];
@@ -213,7 +189,7 @@ const getBundlesForAppendCommands = () => {
   return [];
 };
 const getAppendEndCommands = () => {
-  if (selection.blocks.value.length !== 0) {
+  if (selection.items.value.length !== 0) {
     return [];
   }
   return types.fieldConfig.forEntityTypeAndBundle(
@@ -279,7 +255,7 @@ const getInsertCommands = (block) => {
   if (!block) {
     return [];
   }
-  const nestedFields = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.itemBundle).map((field) => {
+  const nestedFields = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.bundle).map((field) => {
     return {
       ...field,
       uuid: block.uuid
@@ -307,8 +283,8 @@ const getInsertCommands = (block) => {
       });
     }
   );
-  if (block.hostType === runtimeConfig.itemEntityType) {
-    const parentBlock = dom.findBlock(block.hostUuid);
+  if (block.host.type === runtimeConfig.itemEntityType) {
+    const parentBlock = blocks.getBlock(block.host.uuid);
     if (parentBlock) {
       getInsertCommands(parentBlock).forEach((parentCommand) => {
         commands.push(parentCommand);
@@ -318,7 +294,7 @@ const getInsertCommands = (block) => {
   return commands;
 };
 const commandCallbackAppend = (bundle) => {
-  const block = selection.blocks.value[0];
+  const block = selection.items.value[0];
   if (!block) {
     return;
   }
@@ -326,9 +302,9 @@ const commandCallbackAppend = (bundle) => {
     bundle,
     afterUuid: selection.uuids.value[0],
     host: {
-      type: block.hostType,
-      uuid: block.hostUuid,
-      fieldName: block.hostFieldName
+      type: block.host.type,
+      uuid: block.host.uuid,
+      fieldName: block.host.fieldName
     }
   });
 };
@@ -353,7 +329,7 @@ defineCommands(() => {
   }
   return [
     ...getAppendCommands(),
-    ...getInsertCommands(selection.blocks.value[0]),
+    ...getInsertCommands(selection.items.value[0]),
     ...getAppendEndCommands()
   ];
 });

package/dist/runtime/components/Edit/Features/BlockScheduler/Dialog/ScheduleSection.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="bk-schedule-section">
+    <FormToggle v-model="isEnabled" :disabled="disabled">
+      <div class="bk-schedule-section-toggle-title">
+        <Icon :name="icon" />
+        <div class="bk-schedule-section-toggle-title-label">{{ label }}</div>
+      </div>
+    </FormToggle>
+
+    <TransitionHeight opacity>
+      <div v-if="isEnabled" class="bk-schedule-section-content">
+        <div
+          v-if="hasMixedDates && !overrideMode"
+          class="bk-schedule-section-mixed"
+        >
+          <InfoBox :text="mixedDatesMessage" />
+          <button type="button" class="bk-button" @click="enableOverride">
+            {{ $t("blockSchedulerOverride", "Set date for all") }}
+          </button>
+        </div>
+
+        <div v-if="!hasMixedDates || overrideMode">
+          <ScheduleDate v-model="selectedDate" />
+        </div>
+      </div>
+    </TransitionHeight>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useBlokkli } from "#imports";
+import {
+  FormToggle,
+  ScheduleDate,
+  InfoBox,
+  Icon,
+  TransitionHeight
+} from "#blokkli/components";
+const props = defineProps({
+  label: { type: String, required: true },
+  icon: { type: null, required: true },
+  items: { type: Array, required: true },
+  supportedBundles: { type: Array, required: true },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const { $t, ui } = useBlokkli();
+const modelValue = defineModel({ type: null });
+const isEnabled = ref(false);
+const selectedDate = ref(void 0);
+const overrideMode = ref(false);
+const hasMixedDates = computed(() => {
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  if (supportedItems2.length === 0) {
+    return false;
+  }
+  const dates = supportedItems2.map((item) => item.date);
+  if (dates.every((date) => date == null)) {
+    return false;
+  }
+  const firstDate = dates[0];
+  const allSame = dates.every((date) => date === firstDate);
+  return !allSame;
+});
+const commonDate = computed(() => {
+  if (hasMixedDates.value) {
+    return void 0;
+  }
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  const dates = supportedItems2.map((item) => item.date).filter((date) => date != null);
+  if (dates.length === 0) {
+    return void 0;
+  }
+  return dates[0] || void 0;
+});
+const mixedDatesMessage = computed(() => {
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  const dates = supportedItems2.map((item) => item.date).filter((date) => date != null);
+  const uniqueDates = [...new Set(dates)];
+  const formattedDates = uniqueDates.map((date) => ui.formatDate(date)).join(", ");
+  const message = $t(
+    "blockSchedulerMixedDates",
+    "Selected blocks have different dates: @dates"
+  );
+  return message.replace("@dates", formattedDates);
+});
+function getTomorrowDate() {
+  const tomorrow = /* @__PURE__ */ new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  tomorrow.setHours(12, 0, 0, 0);
+  return tomorrow.toISOString();
+}
+function getMostCommonDate() {
+  const supportedItems2 = props.items.filter(
+    (item) => props.supportedBundles.includes(item.bundle)
+  );
+  const dates = supportedItems2.map((item) => item.date).filter((date) => date != null);
+  if (dates.length === 0) {
+    return void 0;
+  }
+  const dateCount = /* @__PURE__ */ new Map();
+  for (const date of dates) {
+    dateCount.set(date, (dateCount.get(date) || 0) + 1);
+  }
+  let mostCommonDate;
+  let maxCount = 0;
+  for (const [date, count] of dateCount.entries()) {
+    if (count > maxCount) {
+      maxCount = count;
+      mostCommonDate = date;
+    }
+  }
+  return mostCommonDate;
+}
+const supportedItems = props.items.filter(
+  (item) => props.supportedBundles.includes(item.bundle)
+);
+const hasAnyDate = supportedItems.some((item) => item.date != null);
+if (hasAnyDate && !props.disabled) {
+  isEnabled.value = true;
+  if (commonDate.value) {
+    selectedDate.value = commonDate.value;
+  }
+}
+watch(isEnabled, (enabled) => {
+  if (!enabled) {
+    selectedDate.value = void 0;
+    overrideMode.value = false;
+    modelValue.value = null;
+  } else if (commonDate.value && !hasMixedDates.value) {
+    selectedDate.value = commonDate.value;
+  } else if (!selectedDate.value) {
+    selectedDate.value = getTomorrowDate();
+  }
+});
+watch(selectedDate, (date) => {
+  if (isEnabled.value) {
+    modelValue.value = date || null;
+  }
+});
+function enableOverride() {
+  overrideMode.value = true;
+  selectedDate.value = getMostCommonDate() || getTomorrowDate();
+}
+defineExpose({
+  isEnabled,
+  selectedDate
+});
+</script>

package/dist/runtime/components/Edit/Features/BlockScheduler/Dialog/ScheduleSection.vue.d.ts

@@ -0,0 +1,27 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+export type ScheduleItemData = {
+    uuid: string;
+    bundle: string;
+    date: string | null | undefined;
+};
+type __VLS_Props = {
+    label: string;
+    icon: BlokkliIcon;
+    items: ScheduleItemData[];
+    supportedBundles: string[];
+    disabled?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string | null | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    isEnabled: import("vue").Ref<boolean, boolean>;
+    selectedDate: import("vue").Ref<string | undefined, string | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;