@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.50

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

@@ -1,209 +0,0 @@
-<template>
-  <Overlay
-    v-if="isVisible && gl"
-    :blocks="selection.blocks.value"
-    :uuids="selection.uuids.value"
-    :gl="gl"
-  />
-  <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
-</template>
-
-<script setup>
-import Overlay from "./Overlay/index.vue";
-import OverlayFallback from "./OverlayFallback/index.vue";
-import {
-  calculateIntersection,
-  getBounds,
-  intersects,
-  originatesFromTextInput
-} from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import {
-  computed,
-  useBlokkli,
-  defineBlokkliFeature,
-  ref,
-  watch
-} from "#imports";
-defineBlokkliFeature({
-  id: "selection",
-  icon: "selection",
-  label: "Selection",
-  description: "Renders an overlay that highlights the selected blocks."
-});
-const { selection, ui, eventBus, animation, dom, tour } = useBlokkli();
-const gl = animation.gl();
-const hasSelectedOnce = ref(false);
-const stop = watch(selection.uuids, function() {
-  hasSelectedOnce.value = true;
-  stop();
-});
-const isVisible = computed(
-  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isChangingOptions.value && !selection.isDragging.value && !ui.isAnimating.value && hasSelectedOnce.value
-);
-const findMostVisibleBlock = () => {
-  const viewport = ui.visibleViewportPadded.value;
-  const uuids = dom.getVisibleBlocks();
-  let maxIntersection = 0;
-  let maxY = 9999;
-  let mostVisibleUuid = null;
-  for (let i = 0; i < uuids.length; i++) {
-    const uuid = uuids[i];
-    const absoluteRect = dom.getBlockRect(uuid);
-    if (!absoluteRect) {
-      continue;
-    }
-    const rect = ui.getViewportRelativeRect(absoluteRect);
-    const intersection = calculateIntersection(rect, viewport);
-    if (intersection && intersection > maxIntersection && rect.y < maxY && rect.y > 0) {
-      mostVisibleUuid = uuid;
-      maxIntersection = intersection;
-      maxY = rect.y;
-    }
-  }
-  return mostVisibleUuid;
-};
-const getSelectAllUuids = (allBlocks, currentlySelected) => {
-  if (currentlySelected.length >= 1) {
-    const selectedHostUuids = currentlySelected.map((block) => block.hostUuid);
-    const selectedHostTypes = currentlySelected.map((block) => block.hostType);
-    const selectedHostFieldNames = currentlySelected.map(
-      (block) => block.hostFieldName
-    );
-    const selectedUuids = currentlySelected.map((v) => v.uuid);
-    const commonHostUuids = selectedHostUuids.filter(
-      (uuid, index, self) => self.indexOf(uuid) === index
-    );
-    const commonHostTypes = selectedHostTypes.filter(
-      (type, index, self) => self.indexOf(type) === index
-    );
-    const commonHostFieldNames = selectedHostFieldNames.filter(
-      (fieldName, index, self) => self.indexOf(fieldName) === index
-    );
-    const newUuids = allBlocks.filter(
-      (block) => commonHostUuids.includes(block.hostUuid) && commonHostTypes.includes(block.hostType) && commonHostFieldNames.includes(block.hostFieldName)
-    ).map((block) => block.uuid);
-    const isSame = newUuids.every((uuid) => selectedUuids.includes(uuid));
-    if (!isSame) {
-      return newUuids;
-    }
-  }
-  return allBlocks.filter((block) => block.hostType !== "block").map((block) => block.uuid);
-};
-const visuallySelectBlocks = (toggleUuid) => {
-  const rects = dom.getBlockRects();
-  const allUuids = Object.keys(rects);
-  const selected = selection.uuids.value;
-  if (selected.length === 0) {
-    return [toggleUuid];
-  }
-  const singleSelectedBlock = selected.length === 1 ? dom.findBlock(selected[0]) : null;
-  const toggleRect = rects[toggleUuid];
-  if (!toggleRect) {
-    return;
-  }
-  const toggleBlock = dom.findBlock(toggleUuid);
-  if (!toggleBlock) {
-    return;
-  }
-  const filter = (encompassingRect2) => {
-    const candidates = [];
-    for (let i = 0; i < allUuids.length; i++) {
-      const uuid = allUuids[i];
-      const rect = rects[uuid];
-      if (!rect) {
-        continue;
-      }
-      if (!intersects(rect, encompassingRect2)) {
-        continue;
-      }
-      const block = dom.findBlock(uuid);
-      if (!block) {
-        continue;
-      }
-      if (block.isNested === toggleBlock.isNested || singleSelectedBlock?.isNested === block.isNested) {
-        candidates.push(uuid);
-      }
-    }
-    return candidates;
-  };
-  const isToggleSelected = selected.includes(toggleUuid);
-  if (selected.length === 1) {
-    if (isToggleSelected) {
-      return [];
-    }
-    const selectedUuid = selected[0];
-    const selectedRect = rects[selectedUuid];
-    if (!selectedRect) {
-      return;
-    }
-    const encompassingRect2 = getBounds([selectedRect, toggleRect]);
-    if (!encompassingRect2) {
-      return;
-    }
-    return filter(encompassingRect2);
-  }
-  const upperLeftUuid = selected.filter((uuid) => isToggleSelected ? uuid !== toggleUuid : true).reduce((prev, current) => {
-    const prevRect = rects[prev];
-    const currentRect = rects[current];
-    return currentRect && prevRect && prevRect.x <= currentRect.x && prevRect.y <= currentRect.y ? prev : current;
-  });
-  const upperLeftRect = rects[upperLeftUuid];
-  if (!upperLeftRect) {
-    return;
-  }
-  const encompassingRect = getBounds([upperLeftRect, toggleRect]);
-  if (!encompassingRect) {
-    return;
-  }
-  return filter(encompassingRect);
-};
-onBlokkliEvent("select:shiftToggle", (uuid) => {
-  const uuids = visuallySelectBlocks(uuid);
-  if (uuids) {
-    eventBus.emit("select", uuids);
-  }
-});
-onBlokkliEvent("keyPressed", (e) => {
-  if (selection.isDragging.value || selection.isMultiSelecting.value) {
-    return;
-  }
-  if (e.code === "Escape") {
-    eventBus.emit("select:end", []);
-  } else if (e.code === "Tab") {
-    if (tour.isTouring.value) {
-      return;
-    }
-    e.originalEvent.preventDefault();
-    if (selection.blocks.value.length !== 1) {
-      const uuid = findMostVisibleBlock();
-      if (uuid) {
-        eventBus.emit("select", uuid);
-        eventBus.emit("scrollIntoView", { uuid });
-      }
-      return;
-    }
-    if (e.shift) {
-      eventBus.emit("select:previous");
-    } else {
-      eventBus.emit("select:next");
-    }
-    animation.requestDraw();
-  } else if (e.code === "a" && e.meta) {
-    if (originatesFromTextInput(e.originalEvent)) {
-      return;
-    }
-    e.originalEvent.preventDefault();
-    eventBus.emit(
-      "select:end",
-      getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value)
-    );
-  }
-});
-</script>
-
-<script>
-export default {
-  name: "Selection"
-};
-</script>

package/dist/runtime/components/Edit/Features/Selection/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/Settings/Dialog/FeatureSetting/index.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="bk-form-item" :class="'bk-is-' + setting.type">
-    <label v-if="setting.type === 'checkbox'" class="bk-checkbox-toggle">
-      <input
-        :checked="settingsStorage[settingsKey]"
-        type="checkbox"
-        class="peer"
-        @change="toggleCheckbox"
-      />
-      <div class="bk-checkbox-toggle-toggle" />
-      <div class="bk-checkbox-toggle-label">
-        <div>{{ settingLabel }}</div>
-        <div v-if="settingDescription">
-          {{ settingDescription }}
-        </div>
-      </div>
-    </label>
-    <div v-else-if="setting.type === 'radios'">
-      <h3 class="bk-form-label">
-        {{ settingLabel }}
-      </h3>
-      <ul class="bk-settings-ui">
-        <li
-          v-for="[value, config] in Object.entries(setting.options)"
-          :key="value"
-        >
-          <label>
-            <input
-              :checked="settingsStorage[settingsKey] === value"
-              type="radio"
-              :value="true"
-              :name="settingsKey"
-              @change="setRadioValue(value)"
-            />
-            <Icon v-if="config.icon" :name="config.icon" />
-            <span>{{ getOptionLabel(value, config.label) }}</span>
-          </label>
-        </li>
-      </ul>
-    </div>
-    <div v-else-if="setting.type === 'method'">
-      <button class="bk-button" @click="setting.method(blokkliApp)">
-        {{ settingLabel }}
-      </button>
-    </div>
-    <div v-else-if="setting.type === 'slider'">
-      <label class="bk-input-range">
-        <span>{{ settingLabel }}: {{ settingsStorage[settingsKey] }}</span>
-        <input
-          :value="settingsStorage[settingsKey]"
-          type="range"
-          :min="setting.min"
-          :max="setting.max"
-          :step="setting.step"
-          list="tickmarks"
-          @input="setSliderValue($event)"
-        />
-        <datalist id="tickmarks">
-          <option v-for="tick in tickmarks" :key="tick" :value="tick" />
-        </datalist>
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Icon } from "#blokkli/components";
-import { useBlokkli, computed } from "#imports";
-const props = defineProps({
-  featureId: { type: null, required: true },
-  settingsKey: { type: String, required: true },
-  setting: { type: Object, required: true }
-});
-const { storage, $t: textTranslation } = useBlokkli();
-const blokkliApp = useBlokkli();
-const settingLabel = computed(() => {
-  return textTranslation(
-    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_label"
-  ) || props.setting.label;
-});
-const settingDescription = computed(() => {
-  const translated = textTranslation(
-    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_description"
-  );
-  if (!translated && "description" in props.setting) {
-    return props.setting.description;
-  }
-  return translated;
-});
-const getOptionLabel = (key, defaultLabel) => {
-  return textTranslation(
-    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_option_" + key
-  ) || defaultLabel;
-};
-const settingsStorage = storage.use(
-  `feature:${props.featureId}:settings`,
-  {}
-);
-const toggleCheckbox = () => {
-  const current = settingsStorage.value[props.settingsKey];
-  settingsStorage.value = {
-    ...settingsStorage.value,
-    [props.settingsKey]: !current
-  };
-};
-const setRadioValue = (value) => {
-  settingsStorage.value = {
-    ...settingsStorage.value,
-    [props.settingsKey]: value
-  };
-};
-const setSliderValue = (e) => {
-  if (e.target instanceof HTMLInputElement) {
-    settingsStorage.value = {
-      ...settingsStorage.value,
-      [props.settingsKey]: Number.parseFloat(e.target.value)
-    };
-  }
-};
-const tickmarks = computed(() => {
-  if (props.setting.type === "slider") {
-    const values = [];
-    for (let value = props.setting.min; value <= props.setting.max; value += props.setting.step) {
-      values.push(value);
-    }
-    values.push(props.setting.max);
-    return values;
-  }
-  return [];
-});
-</script>

package/dist/runtime/components/Edit/Features/Settings/Dialog/FeatureSetting/index.vue.d.ts

@@ -1,9 +0,0 @@
-import type { FeatureDefinitionSetting } from '#blokkli/types';
-import type { ValidFeatureKey } from '#blokkli-build/features';
-type __VLS_Props = {
-    featureId: ValidFeatureKey;
-    settingsKey: string;
-    setting: FeatureDefinitionSetting;
-};
-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/Settings/Dialog/index.vue

@@ -1,129 +0,0 @@
-<template>
-  <DialogModal
-    :title="$t('settingsDialogTitle', 'Change settings')"
-    :width="900"
-    hide-buttons
-    icon="cog"
-    @cancel="$emit('cancel')"
-  >
-    <div class="bk bk-settings">
-      <div v-for="group in groups" :key="group.key" class="bk-form-section">
-        <h3 class="bk-settings-group-title">
-          <span>{{ group.label }}</span>
-          <span v-if="group.id === 'beta'" class="bk-beta-indicator">BETA</span>
-        </h3>
-        <div>
-          <FeatureSetting
-            v-for="setting in group.settings"
-            :key="group.key + setting.settingsKey"
-            :feature-id="setting.featureId"
-            :settings-key="setting.settingsKey"
-            :setting="setting.setting"
-          />
-        </div>
-      </div>
-    </div>
-  </DialogModal>
-</template>
-
-<script setup>
-import { useBlokkli, computed } from "#imports";
-import { DialogModal } from "#blokkli/components";
-import FeatureSetting from "./FeatureSetting/index.vue";
-import { SETTINGS_GROUP } from "#blokkli/constants";
-import { settingsOverride } from "#blokkli-build/config";
-const { $t, features, ui } = useBlokkli();
-const getTranslation = $t;
-const getGroupLabel = (key) => {
-  if (key === "behavior") {
-    return $t("settingsBehaviour", "Behaviour");
-  } else if (key === "appearance") {
-    return $t("settingsAppearance", "Appearance");
-  } else if (key === "advanced") {
-    return $t("settingsAdvanced", "Advanced");
-  } else if (key === "artboard") {
-    return $t("settingsArtboard", "Artboard");
-  } else if (key === "beta") {
-    return $t("settingsBeta", "New Features");
-  }
-  return key;
-};
-const getGroupIcon = (key) => {
-  if (key === "behavior") {
-    return "tools";
-  } else if (key === "appearance") {
-    return "palette";
-  } else if (key === "advanced") {
-    return "bug";
-  }
-  return "question";
-};
-const shouldRenderSetting = (key, setting) => {
-  if (settingsOverride[key]?.disable) {
-    return false;
-  }
-  if (setting.viewports?.length) {
-    return setting.viewports.includes(ui.appViewport.value);
-  }
-  return true;
-};
-const settingTypeOrder = ["checkbox", "slider", "method"];
-const groups = computed(() => {
-  const settingGroups = features.mountedFeatures.value.reduce((acc, feature) => {
-    Object.entries(feature.settings || {}).forEach(([settingsKey, setting]) => {
-      const key = `feature:${feature.id}:${settingsKey}`;
-      if (shouldRenderSetting(key, setting)) {
-        const group = setting.group || "advanced";
-        if (!acc[group]) {
-          acc[group] = {
-            id: group,
-            key: group,
-            label: getGroupLabel(group),
-            icon: getGroupIcon(group),
-            settings: []
-          };
-        }
-        acc[group].settings.push({
-          featureId: feature.id,
-          settingsKey,
-          setting
-        });
-      }
-    });
-    return acc;
-  }, {});
-  if (features.betaFeatures.value.length) {
-    if (!settingGroups.beta) {
-      settingGroups.beta = {
-        id: "beta",
-        key: "betaFeatures",
-        label: getGroupLabel("beta"),
-        icon: "bug",
-        settings: []
-      };
-    }
-    features.betaFeatures.value.forEach((v) => {
-      const label = getTranslation(`feature_${v.id}_label`) || v.label;
-      const description = getTranslation(`feature_${v.id}_description`) || v.description;
-      settingGroups.beta.settings.push({
-        featureId: "settings",
-        settingsKey: "beta:" + v.id,
-        setting: {
-          type: "checkbox",
-          default: false,
-          label,
-          description,
-          group: "beta"
-        }
-      });
-    });
-  }
-  return Object.values(settingGroups).map((group) => {
-    group.settings.sort((a, b) => b.settingsKey.localeCompare(a.settingsKey)).sort(
-      (a, b) => settingTypeOrder.indexOf(a.setting.type) - settingTypeOrder.indexOf(b.setting.type)
-    );
-    return group;
-  }).sort((a, b) => SETTINGS_GROUP.indexOf(a.id) - SETTINGS_GROUP.indexOf(b.id));
-});
-defineEmits(["cancel"]);
-</script>

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

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

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

@@ -1,84 +0,0 @@
-<template>
-  <PluginMenuButton
-    id="settings"
-    :title="$t('settingsMenuTitle', 'Settings')"
-    :description="
-  $t('settingsMenuDescription', 'Personal settings for the editor')
-"
-    secondary
-    icon="cog"
-    @click="onClick"
-  />
-  <Teleport to="body">
-    <transition appear name="bk-slide-up">
-      <SettingsDialog v-if="showSettings" @cancel="showSettings = false" />
-    </transition>
-  </Teleport>
-</template>
-
-<script setup>
-import {
-  ref,
-  useBlokkli,
-  defineBlokkliFeature,
-  watch,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
-import SettingsDialog from "./Dialog/index.vue";
-const { $t } = useBlokkli();
-const LOW_PERFORMANCE_CLASS = "bk-low-performance-mode";
-const { settings } = defineBlokkliFeature({
-  id: "settings",
-  label: "Settings",
-  icon: "cog",
-  description: "Provides a menu button to display a settings dialog.",
-  settings: {
-    useAnimations: {
-      type: "checkbox",
-      default: true,
-      label: "Use animations",
-      description: "Animates UI elements like dialogs or drawers or interactions like drag and drop or scroll changes.",
-      group: "advanced"
-    },
-    lowPerformanceMode: {
-      type: "checkbox",
-      default: false,
-      label: "Enable low performance mode",
-      description: "Reduces the animations and interactivity to a minimum for devices with low performance.",
-      group: "advanced"
-    },
-    resetAllSettings: {
-      type: "method",
-      label: "Reset all settings",
-      method: (app) => {
-        app.storage.clearAll();
-      },
-      group: "advanced"
-    }
-  }
-});
-const showSettings = ref(false);
-const onClick = () => showSettings.value = true;
-function setRootClass() {
-  if (settings.value.lowPerformanceMode) {
-    document.documentElement.classList.add(LOW_PERFORMANCE_CLASS);
-  } else {
-    document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
-  }
-}
-watch(settings, setRootClass);
-onMounted(() => {
-  setRootClass();
-});
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS);
-});
-</script>
-
-<script>
-export default {
-  name: "Settings"
-};
-</script>

package/dist/runtime/components/Edit/Features/Settings/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;