@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -4,67 +4,50 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, onBeforeUnmount } from '#imports'
-import { intersects, toShaderColor } from '#blokkli/helpers'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import vs from './vertex.glsl?raw'
-import fs from './fragment.glsl?raw'
+<script setup>
+import { useBlokkli, onBeforeUnmount } from "#imports";
+import { intersects, toShaderColor } from "#blokkli/helpers";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
 import {
-  type BufferInfo,
   setBuffersAndAttributes,
   drawBufferInfo,
-  setUniforms,
-} from 'twgl.js'
-import type { Coord, Rectangle } from '#blokkli/types'
-import { RectangleBufferCollector } from '#blokkli/helpers/webgl'
-import useDebugLogger from '#blokkli/helpers/composables/useDebugLogger'
-
-const { eventBus, dom, theme, animation, ui } = useBlokkli()
-const logger = useDebugLogger()
-
-const props = defineProps<{
-  startX: number
-  startY: number
-  isPressingControl: boolean
-  gl: WebGLRenderingContext
-}>()
-
-defineEmits<{
-  (e: 'select', uuids: string[]): void
-}>()
-
-type MultiSelectRectangle = Rectangle & {
-  id: string
-  index: number
-  isNested: boolean
-  radius: [number, number, number, number]
-}
-
-class MultiSelectRectangleBufferCollector extends RectangleBufferCollector<MultiSelectRectangle> {
-  getBufferInfo(
-    offset: Coord,
-    scale: number,
-  ): { info: BufferInfo | null; hasChanged: boolean } {
-    const visibleBlocks = dom.getVisibleBlocks()
-
-    const lengthBefore = this.positions.length
-
+  setUniforms
+} from "twgl.js";
+import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import useDebugLogger from "#blokkli/helpers/composables/useDebugLogger";
+const { eventBus, dom, theme, animation, ui } = useBlokkli();
+const logger = useDebugLogger();
+const props = defineProps({
+  startX: { type: Number, required: true },
+  startY: { type: Number, required: true },
+  isPressingControl: { type: Boolean, required: true },
+  gl: { type: null, required: true }
+});
+defineEmits(["select"]);
+class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
+  getBufferInfo(offset, scale) {
+    const visibleBlocks = dom.getVisibleBlocks();
+    const lengthBefore = this.positions.length;
     for (let i = 0; i < visibleBlocks.length; i++) {
-      const uuid = visibleBlocks[i]
+      const uuid = visibleBlocks[i];
+      if (!uuid) {
+        continue;
+      }
       if (this.added.has(uuid)) {
-        continue
+        continue;
       }
-      const block = dom.findBlock(uuid)
+      const block = dom.findBlock(uuid);
       if (!block) {
-        continue
+        continue;
       }
-      const el = dom.getDragElement(block)
+      const el = dom.getDragElement(block);
       if (!el) {
-        continue
+        continue;
       }
-      const rect = el.getBoundingClientRect()
-      const style = theme.getDraggableStyle(el)
+      const rect = el.getBoundingClientRect();
+      const style = theme.getDraggableStyle(el);
       this.addRectangle(
         {
           id: uuid,
@@ -73,217 +56,174 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector<Multi
           width: rect.width / scale,
           height: rect.height / scale,
           isNested: block.isNested,
-          radius: style.radius,
+          radius: style.radius
         },
-        block.isNested ? 6 : 5,
-      )
+        block.isNested ? 6 : 5
+      );
     }
-
-    const hasChanged = lengthBefore !== this.positions.length
-
-    // Only update the buffer info if it has changed.
+    const hasChanged = lengthBefore !== this.positions.length;
     if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo()
+      this.bufferInfo = this.createBufferInfo();
     }
-
-    return { info: this.bufferInfo, hasChanged }
+    return { info: this.bufferInfo, hasChanged };
   }
-
-  getSelectedUuids(box: Rectangle): { nested: string[]; notNested: string[] } {
-    const nested: string[] = []
-    const notNested: string[] = []
-    const rects = Object.values(this.rects)
-
+  getSelectedUuids(box) {
+    const nested = [];
+    const notNested = [];
+    const rects = Object.values(this.rects);
     for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i]
+      const rect = rects[i];
       if (intersects(box, rect)) {
         if (rect.isNested) {
-          nested.push(rect.id)
+          nested.push(rect.id);
         } else {
-          notNested.push(rect.id)
+          notNested.push(rect.id);
         }
       }
     }
-
-    return { nested, notNested }
+    return { nested, notNested };
   }
-
-  isSelectingNested(box: Rectangle): boolean {
-    const rects = Object.values(this.rects)
+  isSelectingNested(box) {
+    const rects = Object.values(this.rects);
     for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i]
+      const rect = rects[i];
       if (intersects(box, rect) && rect.isNested) {
-        return true
+        return true;
       }
     }
-    return false
+    return false;
   }
 }
-
-const collector = new MultiSelectRectangleBufferCollector(props.gl)
-const thick = 100
+const collector = new MultiSelectRectangleBufferCollector(props.gl);
+const thick = 100;
 collector.addRectangle(
   {
-    width: 1000,
+    width: 1e3,
     height: thick,
     x: 100,
     y: 100,
-    id: 'select-rect-top',
+    id: "select-rect-top",
     isNested: false,
-    radius: [0, 0, 0, 0],
+    radius: [0, 0, 0, 0]
   },
-  0,
-)
+  0
+);
 collector.addRectangle(
   {
     width: thick,
-    height: 1000,
-    x: 1000 + thick,
+    height: 1e3,
+    x: 1e3 + thick,
     y: thick,
-    id: 'select-rect-right',
+    id: "select-rect-right",
     isNested: false,
-    radius: [0, 0, 0, 0],
+    radius: [0, 0, 0, 0]
   },
-  0,
-)
+  0
+);
 collector.addRectangle(
   {
-    width: 1000,
+    width: 1e3,
     height: thick,
     x: 100 + thick,
-    y: 1000 + thick,
-    id: 'select-rect-bottom',
+    y: 1e3 + thick,
+    id: "select-rect-bottom",
     isNested: false,
-    radius: [0, 0, 0, 0],
+    radius: [0, 0, 0, 0]
   },
-  0,
-)
+  0
+);
 collector.addRectangle(
   {
     width: thick,
-    height: 1000,
+    height: 1e3,
     x: 100,
     y: 100 + thick,
-    id: 'select-rect-left',
+    id: "select-rect-left",
     isNested: false,
-    radius: [0, 0, 0, 0],
+    radius: [0, 0, 0, 0]
   },
-  0,
-)
-
-const artboardOffsetStart = { ...ui.artboardOffset.value }
-const artboardScaleStart = ui.artboardScale.value
-
+  0
+);
+const artboardOffsetStart = { ...ui.artboardOffset.value };
+const artboardScaleStart = ui.artboardScale.value;
 const programInfo = animation.registerProgram(
-  'multi_select_overlay',
+  "multi_select_overlay",
   props.gl,
-  [vs, fs],
-)
+  [vs, fs]
+);
 const uniforms = {
   u_color_field_active: toShaderColor(theme.accent.value[700]),
   u_color_field_default: toShaderColor(theme.mono.value[400]),
   u_color_area_active: toShaderColor(theme.teal.value.normal),
-  u_color_area_default: toShaderColor(theme.teal.value.normal),
-}
-
-let mouseX = 0
-let mouseY = 0
-
-function getSelectRect(
-  offset: Coord,
-  scale: number,
-): { shader: Rectangle; check: Rectangle } {
-  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
+  u_color_area_default: toShaderColor(theme.teal.value.normal)
+};
+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,
-  }
+    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 }
+    height: shader.height / scale
+  };
+  return { shader, check };
 }
-
-const now = Date.now()
-
-onBlokkliEvent('canvas:draw', (e) => {
-  mouseX = e.mouseX
-  mouseY = e.mouseY
-
-  const { shader, check } = getSelectRect(e.artboardOffset, e.artboardScale)
-
-  const { nested } = collector.getSelectedUuids(check)
-  const shouldSelectAll = props.isPressingControl || !nested.length
-
-  props.gl.useProgram(programInfo.program)
-
-  const time = (Date.now() - now) / 1000
-
-  setUniforms(programInfo, uniforms)
+const now = Date.now();
+onBlokkliEvent("canvas:draw", (e) => {
+  mouseX = e.mouseX;
+  mouseY = e.mouseY;
+  const { shader, check } = getSelectRect(e.artboardOffset, e.artboardScale);
+  const { nested } = collector.getSelectedUuids(check);
+  const shouldSelectAll = props.isPressingControl || !nested.length;
+  props.gl.useProgram(programInfo.program);
+  const time = (Date.now() - now) / 1e3;
+  setUniforms(programInfo, uniforms);
   setUniforms(programInfo, {
     u_select_all: shouldSelectAll ? 1 : 0,
     u_select_rect: [shader.x, shader.y, shader.width, shader.height],
-    u_time: time,
-  })
-
-  animation.setSharedUniforms(props.gl, programInfo)
+    u_time: time
+  });
+  animation.setSharedUniforms(props.gl, programInfo);
   const { info, hasChanged } = collector.getBufferInfo(
     e.artboardOffset,
-    e.artboardScale,
-  )
-
-  // Nothing to draw.
+    e.artboardScale
+  );
   if (!info) {
-    return
+    return;
   }
-
-  // Only update buffer and attributes when they have changed.
   if (hasChanged) {
-    setBuffersAndAttributes(props.gl, programInfo, info)
+    setBuffersAndAttributes(props.gl, programInfo, info);
   }
-
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES)
-})
-
-function getUuidsToSelect(): string[] {
+  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
+});
+function getUuidsToSelect() {
   const { check } = getSelectRect(
     ui.artboardOffset.value,
-    ui.artboardScale.value,
-  )
-
-  const { nested, notNested } = collector.getSelectedUuids(check)
+    ui.artboardScale.value
+  );
+  const { nested, notNested } = collector.getSelectedUuids(check);
   if (props.isPressingControl) {
-    return [...nested, ...notNested]
+    return [...nested, ...notNested];
   } else if (!nested.length) {
-    return notNested
+    return notNested;
   }
-  return nested
+  return nested;
 }
-
 onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT)
-
-  eventBus.emit('select:end', getUuidsToSelect())
-
-  logger.log('MultiSelectOverlay unmounted')
-})
+  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
+  eventBus.emit("select:end", getUuidsToSelect());
+  logger.log("MultiSelectOverlay unmounted");
+});
 </script>

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

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    startX: number;
+    startY: number;
+    isPressingControl: boolean;
+    gl: WebGLRenderingContext;
+};
+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

@@ -9,71 +9,56 @@
   />
 </template>
 
-<script lang="ts" setup>
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import { ref, useBlokkli, defineBlokkliFeature, computed } from '#imports'
-import Overlay from './Overlay/index.vue'
-
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import Overlay from "./Overlay/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, state, animation } = useBlokkli()
-
-const gl = animation.gl()
-
+  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, state, animation } = useBlokkli();
+const gl = animation.gl();
 const enabled = computed(
-  () =>
-    !selection.editableActive.value &&
-    (state.editMode.value === 'editing' ||
-      state.editMode.value === 'translating') &&
-    gl,
-)
-
-const shouldRender = ref(false)
-const downX = ref(0)
-const downY = ref(0)
-
-const onSelect = (uuids: string[]) => {
-  shouldRender.value = false
-  eventBus.emit('select:end', uuids)
-}
-
-let startTimeout: any = null
-
-onBlokkliEvent('mouse:down', (e) => {
-  if (!enabled.value || e.type !== 'mouse' || selection.isDragging.value) {
-    return
+  () => !selection.editableActive.value && (state.editMode.value === "editing" || state.editMode.value === "translating") && gl
+);
+const shouldRender = ref(false);
+const downX = ref(0);
+const downY = ref(0);
+const onSelect = (uuids) => {
+  shouldRender.value = false;
+  eventBus.emit("select:end", uuids);
+};
+let startTimeout = null;
+onBlokkliEvent("mouse:down", (e) => {
+  if (!enabled.value || e.type !== "mouse" || selection.isDragging.value) {
+    return;
   }
   if (keyboard.isPressingSpace.value || keyboard.isPressingControl.value) {
-    return
+    return;
   }
-  clearTimeout(startTimeout)
-  downX.value = e.x
-  downY.value = e.y
-
+  clearTimeout(startTimeout);
+  downX.value = e.x;
+  downY.value = e.y;
   startTimeout = setTimeout(() => {
-    eventBus.emit('select:start', {
+    eventBus.emit("select:start", {
       uuids: [],
-      mode: 'mouse',
-    })
-    shouldRender.value = true
-  }, 70)
-})
-
-onBlokkliEvent('mouse:up', () => {
-  shouldRender.value = false
-  clearTimeout(startTimeout)
-})
+      mode: "mouse"
+    });
+    shouldRender.value = true;
+  }, 70);
+});
+onBlokkliEvent("mouse:up", () => {
+  shouldRender.value = false;
+  clearTimeout(startTimeout);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'MultiSelect',
-}
+  name: "MultiSelect"
+};
 </script>

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

@@ -0,0 +1,2 @@
+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

@@ -6,47 +6,40 @@
   </label>
 </template>
 
-<script lang="ts" setup>
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import { computed, useBlokkli } from '#imports'
-
-const { $t, state } = useBlokkli()
-
-const props = defineProps<{
-  label: string
-  property: string
-  modelValue?: string
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-
+<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 }
+});
+const emit = defineEmits(["update:modelValue"]);
 const checked = computed({
   get() {
-    return props.modelValue === '1'
+    return props.modelValue === "1";
   },
-  set(v: any) {
-    emit('update:modelValue', v ? '1' : '0')
-  },
-})
-
+  set(v) {
+    emit("update:modelValue", v ? "1" : "0");
+  }
+});
 defineCommands(() => {
-  if (state.editMode.value !== 'editing') {
-    return
+  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),
-  }
-})
+    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 lang="ts">
+<script>
 export default {
-  name: 'OptionsFormCheckbox',
-}
+  name: "OptionsFormCheckbox"
+};
 </script>

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

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