@blokkli/editor 2.0.0-alpha.27 → 2.0.0-alpha.29

package/dist/runtime/components/Edit/Features/MultiSelect/Renderer/index.vue

@@ -1,297 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-import { useBlokkli, onBeforeUnmount } from "#imports";
-import { intersects, toShaderColor } from "#blokkli/helpers";
-import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
-import vs from "./vertex.glsl?raw";
-import fs from "./fragment.glsl?raw";
-import {
-  setBuffersAndAttributes,
-  drawBufferInfo,
-  setUniforms
-} from "twgl.js";
-import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
-import useDebugLogger from "#blokkli/helpers/composables/useDebugLogger";
-const { eventBus, dom, theme, animation, ui, blocks } = useBlokkli();
-const logger = useDebugLogger();
-const props = defineProps({
-  startX: { type: Number, required: true },
-  startY: { type: Number, required: true },
-  isPressingControl: { type: Boolean, required: true }
-});
-const startTimestamp = Date.now();
-defineEmits(["select"]);
-class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo(gl, offset, scale) {
-    if (!offset || !scale) {
-      return { info: this.bufferInfo, hasChanged: false };
-    }
-    const visibleBlocks = dom.getVisibleBlocks();
-    const lengthBefore = this.positions.length;
-    for (let i = 0; i < visibleBlocks.length; i++) {
-      const uuid = visibleBlocks[i];
-      if (!uuid) {
-        continue;
-      }
-      if (this.added.has(uuid)) {
-        continue;
-      }
-      const block = blocks.getBlock(uuid);
-      if (!block) {
-        continue;
-      }
-      const el = dom.getDragElement(block);
-      if (!el) {
-        continue;
-      }
-      const rect = el.getBoundingClientRect();
-      const style = theme.getDraggableStyle(el);
-      this.addRectangle(
-        {
-          id: uuid,
-          x: rect.x / scale - offset.x / scale,
-          y: rect.y / scale - offset.y / scale,
-          width: rect.width / scale,
-          height: rect.height / scale,
-          isNested: block.isNested,
-          radius: style.radius
-        },
-        block.isNested ? 6 : 5
-      );
-    }
-    const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
-    }
-    return { info: this.bufferInfo, hasChanged };
-  }
-  getSelectedUuids(box) {
-    const nested = [];
-    const notNested = [];
-    const rects = Object.values(this.rects);
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      if (intersects(box, rect)) {
-        if (rect.isNested) {
-          nested.push(rect.id);
-        } else {
-          notNested.push(rect.id);
-        }
-      }
-    }
-    return { nested, notNested };
-  }
-  isSelectingNested(box) {
-    const rects = Object.values(this.rects);
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      if (intersects(box, rect) && rect.isNested) {
-        return true;
-      }
-    }
-    return false;
-  }
-}
-const artboardOffsetStart = { ...ui.artboardOffset.value };
-const artboardScaleStart = ui.artboardScale.value;
-const uniforms = {
-  u_color_field_active: theme.accent.value[700],
-  u_color_field_default: theme.mono.value[400]
-};
-let mouseX = 0;
-let mouseY = 0;
-function getSelectRect(offset, scale) {
-  const startX = (props.startX / artboardScaleStart + (offset.x / scale - artboardOffsetStart.x / artboardScaleStart)) * scale;
-  const startY = (props.startY / artboardScaleStart + (offset.y / scale - artboardOffsetStart.y / artboardScaleStart)) * scale;
-  const ax = startX > mouseX ? mouseX : startX;
-  const ay = startY > mouseY ? mouseY : startY;
-  const bx = startX > mouseX ? startX : mouseX;
-  const by = startY > mouseY ? startY : mouseY;
-  const shader = {
-    x: ax,
-    y: ay,
-    width: bx - ax,
-    height: by - ay
-  };
-  const check = {
-    x: shader.x / scale - offset.x / scale,
-    y: shader.y / scale - offset.y / scale,
-    width: shader.width / scale,
-    height: shader.height / scale
-  };
-  return { shader, check };
-}
-const { collector } = defineRenderer("multiselect-overlay", {
-  zIndex: 450,
-  only: true,
-  collector: () => {
-    const c = new MultiSelectRectangleBufferCollector();
-    const thick = 300;
-    c.addRectangle(
-      {
-        width: 1e3,
-        height: thick,
-        x: 100,
-        y: 100,
-        id: "select-rect-top",
-        isNested: false,
-        radius: [0, 0, 0, 0]
-      },
-      0
-    );
-    c.addRectangle(
-      {
-        width: thick,
-        height: 1e3,
-        x: 1e3 + thick,
-        y: thick,
-        id: "select-rect-right",
-        isNested: false,
-        radius: [0, 0, 0, 0]
-      },
-      0
-    );
-    c.addRectangle(
-      {
-        width: 1e3,
-        height: thick,
-        x: 100 + thick,
-        y: 1e3 + thick,
-        id: "select-rect-bottom",
-        isNested: false,
-        radius: [0, 0, 0, 0]
-      },
-      0
-    );
-    c.addRectangle(
-      {
-        width: thick,
-        height: 1e3,
-        x: 100,
-        y: 100 + thick,
-        id: "select-rect-left",
-        isNested: false,
-        radius: [0, 0, 0, 0]
-      },
-      0
-    );
-    return c;
-  },
-  program: () => ({ shaders: [vs, fs] }),
-  cursor: () => "crosshair",
-  render: (ctx, gl, program) => {
-    mouseX = ctx.mouseX;
-    mouseY = ctx.mouseY;
-    const { shader, check } = getSelectRect(
-      ctx.artboardOffset,
-      ctx.artboardScale
-    );
-    const { nested } = collector.getSelectedUuids(check);
-    const shouldSelectAll = props.isPressingControl || !nested.length;
-    gl.useProgram(program.program);
-    const time = (Date.now() - startTimestamp) / 1e3;
-    setUniforms(program, {
-      u_color_field_active: toShaderColor(uniforms.u_color_field_active),
-      u_color_field_default: toShaderColor(uniforms.u_color_field_default)
-    });
-    setUniforms(program, {
-      u_select_all: shouldSelectAll ? 1 : 0,
-      u_select_rect: [shader.x, shader.y, shader.width, shader.height],
-      u_time: time
-    });
-    animation.setSharedUniforms(gl, program);
-    const { info, hasChanged } = collector.getBufferInfo(
-      gl,
-      ctx.artboardOffset,
-      ctx.artboardScale
-    );
-    if (!info) {
-      return;
-    }
-    if (hasChanged) {
-      setBuffersAndAttributes(gl, program, info);
-    }
-    drawBufferInfo(gl, info, gl.TRIANGLES);
-  },
-  renderFallback: (ctx, ctx2d) => {
-    mouseX = ctx.mouseX;
-    mouseY = ctx.mouseY;
-    const { shader, check } = getSelectRect(
-      ctx.artboardOffset,
-      ctx.artboardScale
-    );
-    const { nested } = collector.getSelectedUuids(check);
-    const shouldSelectAll = props.isPressingControl || !nested.length;
-    collector.getBufferInfo(void 0, ctx.artboardOffset, ctx.artboardScale);
-    const rects = Object.values(collector.rects);
-    const colorFieldActive = `rgba(${uniforms.u_color_field_active[0]}, ${uniforms.u_color_field_active[1]}, ${uniforms.u_color_field_active[2]}, 0.3)`;
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      if (rect.id.startsWith("select-rect-")) {
-        continue;
-      }
-      if (!intersects(rect, check)) {
-        continue;
-      }
-      if (!rect.isNested && !shouldSelectAll) {
-        continue;
-      }
-      ctx2d.fillStyle = colorFieldActive;
-      ctx2d.fillRect(
-        (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi,
-        (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi,
-        rect.width * ctx.artboardScale * ctx.dpi,
-        rect.height * ctx.artboardScale * ctx.dpi
-      );
-    }
-    const time = (Date.now() - startTimestamp) / 1e3;
-    const speed = 100 * ctx.dpi;
-    const dashLength = 8 * ctx.dpi;
-    const phase = time * speed * -1;
-    ctx2d.lineWidth = 2 * ctx.dpi;
-    ctx2d.setLineDash([dashLength, dashLength]);
-    ctx2d.strokeStyle = "rgba(255, 255, 255, 0.8)";
-    ctx2d.lineDashOffset = phase % (dashLength * 2);
-    ctx2d.strokeRect(
-      shader.x * ctx.dpi,
-      shader.y * ctx.dpi,
-      shader.width * ctx.dpi,
-      shader.height * ctx.dpi
-    );
-    ctx2d.strokeStyle = "rgba(0, 0, 0, 0.8)";
-    ctx2d.lineDashOffset = (phase + dashLength) % (dashLength * 2);
-    ctx2d.strokeRect(
-      shader.x * ctx.dpi,
-      shader.y * ctx.dpi,
-      shader.width * ctx.dpi,
-      shader.height * ctx.dpi
-    );
-    ctx2d.setLineDash([]);
-  }
-});
-function getUuidsToSelect() {
-  const { check } = getSelectRect(
-    ui.artboardOffset.value,
-    ui.artboardScale.value
-  );
-  const { nested, notNested } = collector.getSelectedUuids(check);
-  if (props.isPressingControl) {
-    return [...nested, ...notNested];
-  } else if (!nested.length) {
-    return notNested;
-  }
-  return nested;
-}
-onBeforeUnmount(() => {
-  const diff = Date.now() - startTimestamp;
-  if (diff > 175) {
-    eventBus.emit("select:end", getUuidsToSelect());
-  } else {
-    eventBus.emit("select:end");
-  }
-  logger.log("MultiSelectOverlay unmounted");
-});
-</script>

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

@@ -1,11 +0,0 @@
-type __VLS_Props = {
-    startX: number;
-    startY: number;
-    isPressingControl: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    select: (uuids: string[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((uuids: string[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,69 +0,0 @@
-<template>
-  <ErrorBoundary
-    v-model="isLocked"
-    :label="$t('feature_multi-select_label', 'Multiselect')"
-    @error="onError"
-  >
-    <Renderer
-      v-if="shouldRender"
-      :key="animation.renderKey.value"
-      :start-x="downX"
-      :start-y="downY"
-      :is-pressing-control="keyboard.isPressingControl.value"
-      @select="onSelect"
-    />
-  </ErrorBoundary>
-</template>
-
-<script setup>
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import { ErrorBoundary } from "#blokkli/components";
-import Renderer from "./Renderer/index.vue";
-defineBlokkliFeature({
-  id: "multi-select",
-  label: "Multiselect",
-  icon: "multi-select",
-  description: "Implements support for selecting multiple blocks using a select rectangle.",
-  viewports: ["desktop"]
-});
-const { keyboard, eventBus, selection, animation, $t } = useBlokkli();
-const isLocked = ref(false);
-const enabled = computed(
-  () => !selection.editableActive.value && !isLocked.value
-);
-const shouldRender = ref(false);
-const downX = ref(0);
-const downY = ref(0);
-function onError() {
-  eventBus.emit("select:end");
-  shouldRender.value = false;
-}
-const onSelect = (uuids) => {
-  shouldRender.value = false;
-  eventBus.emit("select:end", uuids);
-};
-const startTimeout = null;
-onBlokkliEvent("multi-select:start", (e) => {
-  if (!enabled.value) {
-    return;
-  }
-  downX.value = e.x;
-  downY.value = e.y;
-  eventBus.emit("select:start", {
-    uuids: [],
-    mode: "mouse"
-  });
-  shouldRender.value = true;
-});
-onBlokkliEvent("mouse:up", () => {
-  shouldRender.value = false;
-  clearTimeout(startTimeout);
-});
-</script>
-
-<script>
-export default {
-  name: "MultiSelect"
-};
-</script>

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

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Options/Form/Checkbox/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <label class="bk-blokkli-item-options-checkbox">
-    <input v-model="checked" type="checkbox" class="peer" :required />
-    <div />
-    <span>{{ label }}</span>
-  </label>
-</template>
-
-<script setup>
-import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import { computed, useBlokkli } from "#imports";
-const { $t, state } = useBlokkli();
-const props = defineProps({
-  label: { type: String, required: true },
-  property: { type: String, required: true },
-  modelValue: { type: String, required: false },
-  required: { type: Boolean, required: false }
-});
-const emit = defineEmits(["update:modelValue"]);
-const checked = computed({
-  get() {
-    return props.modelValue === "1";
-  },
-  set(v) {
-    emit("update:modelValue", v ? "1" : "0");
-  }
-});
-defineCommands(() => {
-  if (state.editMode.value !== "editing") {
-    return;
-  }
-  return {
-    id: "options:" + props.property + ":toggle",
-    label: $t("optionsCommand.setOption", 'Set option "@option" to "@value"').replace("@option", props.label).replace("@value", checked.value ? "false" : "true"),
-    group: "selection",
-    icon: "form",
-    callback: () => checked.value = !checked.value
-  };
-});
-</script>
-
-<script>
-export default {
-  name: "OptionsFormCheckbox"
-};
-</script>

package/dist/runtime/components/Edit/Features/Options/Form/Checkbox/index.vue.d.ts

@@ -1,16 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    label: string;
-    property: string;
-    modelValue?: string;
-    required?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{
-    label: string;
-    property: string;
-    modelValue?: string;
-    required?: boolean;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Options/Form/Checkboxes/index.vue

@@ -1,112 +0,0 @@
-<template>
-  <div
-    class="bk-blokkli-item-options-checkboxes"
-    :class="{ 'bk-is-active': isOpen, 'bk-is-grouped': isGrouped }"
-  >
-    <button v-if="!isGrouped" @click="isOpen = !isOpen">
-      <span>{{ visibleLabel }}</span>
-      <div>
-        <template v-if="checked.length < 4">
-          <span v-for="item in checked" :key="item" class="bk-pill">{{
-            item
-          }}</span>
-        </template>
-        <span v-else class="bk-pill">{{ checked.length }}</span>
-      </div>
-      <Icon name="caret" />
-    </button>
-    <div v-if="isOpen || isGrouped">
-      <label
-        v-for="option in options"
-        :key="option.value"
-        class="bk-blokkli-item-options-checkbox"
-      >
-        <input
-          v-model="checked"
-          type="checkbox"
-          class="peer"
-          :value="option.value"
-        />
-        <div />
-        <span>{{ option.label }}</span>
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
-import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import { BK_VISIBLE_LANGUAGES } from "#blokkli/helpers/symbols";
-const { $t, state } = useBlokkli();
-const props = defineProps({
-  label: { type: String, required: true },
-  property: { type: String, required: true },
-  modelValue: { type: String, required: false },
-  options: { type: Array, required: true },
-  isGrouped: { type: Boolean, required: false }
-});
-const emit = defineEmits(["update:modelValue"]);
-const isOpen = ref(false);
-const optionOrder = computed(() => props.options.map((v) => v.value));
-const checked = computed({
-  get() {
-    return (props.modelValue || "").split(",").filter(Boolean);
-  },
-  set(newValue) {
-    const storedValue = newValue.filter(Boolean).sort((a, b) => {
-      return optionOrder.value.indexOf(a) - optionOrder.value.indexOf(b);
-    }).join(",");
-    emit("update:modelValue", storedValue);
-  }
-});
-const visibleLabel = computed(() => {
-  if (props.property === BK_VISIBLE_LANGUAGES && !checked.value.length) {
-    return $t("optionBkVisibleLanguagesAll", "All languages");
-  }
-  return props.label;
-});
-const toggle = (key) => {
-  if (!checked.value.includes(key)) {
-    checked.value = [...checked.value, key];
-  } else {
-    checked.value = checked.value.filter((v) => v !== key);
-  }
-};
-defineCommands(() => {
-  if (state.editMode.value !== "editing") {
-    return;
-  }
-  return props.options.map((option) => {
-    if (checked.value.includes(option.value)) {
-      return {
-        id: "options:" + props.property + ":select:" + option.value,
-        label: $t(
-          "optionsCommand.unselectCheckboxValue",
-          'Unselect "@value" in "@option"'
-        ).replace("@option", props.label).replace("@value", option.label),
-        group: "selection",
-        icon: "form",
-        callback: () => toggle(option.value)
-      };
-    }
-    return {
-      id: "options:" + props.property + ":unselect:" + option.value,
-      label: $t(
-        "optionsCommand.selectCheckboxValue",
-        'Select "@value" in "@option"'
-      ).replace("@option", props.label).replace("@value", option.label),
-      group: "selection",
-      icon: "form",
-      callback: () => toggle(option.value)
-    };
-  });
-});
-</script>
-
-<script>
-export default {
-  name: "OptionsFormCheckboxes"
-};
-</script>

package/dist/runtime/components/Edit/Features/Options/Form/Checkboxes/index.vue.d.ts

@@ -1,24 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    label: string;
-    property: string;
-    modelValue?: string;
-    options: {
-        value: string;
-        label: string;
-    }[];
-    isGrouped?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{
-    label: string;
-    property: string;
-    modelValue?: string;
-    options: {
-        value: string;
-        label: string;
-    }[];
-    isGrouped?: boolean;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Options/Form/Color/index.vue.d.ts

@@ -1,12 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    label: string;
-    modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{
-    label: string;
-    modelValue?: string;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Options/Form/DateTimeLocal/index.vue.d.ts

@@ -1,20 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    label: string;
-    min?: string;
-    max?: string;
-    modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{
-    label: string;
-    min?: string;
-    max?: string;
-    modelValue?: string;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    min: string;
-    max: string;
-    modelValue: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Options/Form/Group.vue

@@ -1,23 +0,0 @@
-<template>
-  <div
-    class="bk-blokkli-item-options-group"
-    :class="{ 'bk-is-active': isActive }"
-  >
-    <button @click.stop.prevent="$emit('toggle')">
-      <div>{{ label }}</div>
-      <Icon name="caret" />
-    </button>
-    <div v-if="isActive" class="bk-blokkli-item-options-group-content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Icon } from "#blokkli/components";
-defineProps({
-  label: { type: String, required: true },
-  isActive: { type: Boolean, required: true }
-});
-defineEmits(["toggle"]);
-</script>

package/dist/runtime/components/Edit/Features/Options/Form/Group.vue.d.ts

@@ -1,20 +0,0 @@
-type __VLS_Props = {
-    label: string;
-    isActive: boolean;
-};
-declare var __VLS_5: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_5) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};