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

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

@@ -2,74 +2,53 @@
   <div />
 </template>
 
-<script lang="ts" setup>
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import type { DraggableExistingBlock, Rectangle } from '#blokkli/types'
-import { useBlokkli, onBeforeUnmount } from '#imports'
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useBlokkli, onBeforeUnmount } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
-  type BufferInfo,
-  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<{
-  blocks: DraggableExistingBlock[]
-  gl: WebGLRenderingContext
-}>()
-
-const { animation, theme, dom, ui } = useBlokkli()
-
-const programInfo = animation.registerProgram('selection', props.gl, [vs, fs])
-
-type SelectionRectangle = Rectangle & {
-  id: string
-  index: number
-  isInverted: boolean
-  radius: [number, number, number, number]
-}
-
-class SelectionRectangleBufferCollector extends RectangleBufferCollector<SelectionRectangle> {
-  uuids: string[] = []
-  lastCount = 0
-  prevKey = ''
-
-  getBufferInfo(force?: boolean): {
-    info: BufferInfo | null
-    hasChanged: boolean
-  } {
-    const key = props.blocks
-      .map((block) => {
-        const uuid = block.uuid
-        const rect = dom.getBlockRect(uuid)
-        if (!rect) {
-          return uuid + 'no_rect'
-        }
-
-        return uuid + rect.time
-      })
-      .join('_')
-
-    const hasChanged = force || this.prevKey !== key
+  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({
+  blocks: { type: Array, required: true },
+  gl: { type: null, required: true }
+});
+const { animation, theme, dom, ui } = useBlokkli();
+const programInfo = animation.registerProgram("selection", props.gl, [vs, fs]);
+class SelectionRectangleBufferCollector extends RectangleBufferCollector {
+  uuids = [];
+  lastCount = 0;
+  prevKey = "";
+  getBufferInfo(force) {
+    const key = props.blocks.map((block) => {
+      const uuid = block.uuid;
+      const rect = dom.getBlockRect(uuid);
+      if (!rect) {
+        return uuid + "no_rect";
+      }
+      return uuid + rect.time;
+    }).join("_");
+    const hasChanged = force || this.prevKey !== key;
     if (hasChanged) {
-      this.reset()
-      this.lastCount = 0
+      this.reset();
+      this.lastCount = 0;
       for (let i = 0; i < props.blocks.length; i++) {
-        const block = props.blocks[i]
+        const block = props.blocks[i];
         if (this.added.has(block.uuid)) {
-          continue
+          continue;
         }
-        this.added.add(block.uuid)
-        const el = dom.getDragElement(block)
-        const rect = dom.getBlockRect(block.uuid)
+        this.added.add(block.uuid);
+        const el = dom.getDragElement(block);
+        const rect = dom.getBlockRect(block.uuid);
         if (!rect || !el) {
-          continue
+          continue;
         }
-        const style = theme.getDraggableStyle(el)
+        const style = theme.getDraggableStyle(el);
         this.addRectangle(
           {
             id: block.uuid,
@@ -78,67 +57,52 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector<Selecti
             x: rect.x,
             y: rect.y,
             radius: style.radius,
-            isInverted: style.isInverted,
+            isInverted: style.isInverted
           },
-          style.isInverted ? 1 : 0,
-        )
-        this.lastCount++
+          style.isInverted ? 1 : 0
+        );
+        this.lastCount++;
       }
-
-      this.prevKey = key
+      this.prevKey = key;
     }
-
-    // Only update the buffer info if it has changed.
     if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo()
+      this.bufferInfo = this.createBufferInfo();
     }
-
-    return { info: this.bufferInfo, hasChanged }
+    return { info: this.bufferInfo, hasChanged };
   }
 }
-
-const collector = new SelectionRectangleBufferCollector(props.gl)
-
-onBlokkliEvent('canvas:draw', (e) => {
-  props.gl.useProgram(programInfo.program)
-
+const collector = new SelectionRectangleBufferCollector(props.gl);
+onBlokkliEvent("canvas:draw", (e) => {
+  props.gl.useProgram(programInfo.program);
   setUniforms(programInfo, {
     u_color_default: toShaderColor(theme.accent.value[600]),
     u_color_inverted: [255, 255, 255],
     u_is_transforming: ui.isTransforming.value ? 1 : 0,
-    u_time: e.time,
-  })
-  animation.setSharedUniforms(props.gl, programInfo)
-  const { info, hasChanged } = collector.getBufferInfo()
-
-  // Nothing to draw.
+    u_time: e.time
+  });
+  animation.setSharedUniforms(props.gl, programInfo);
+  const { info, hasChanged } = collector.getBufferInfo();
   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)
-})
-
-onBlokkliEvent('ui:resized', function () {
-  collector.reset()
-})
-
-onBlokkliEvent('state:reloaded', function () {
-  collector.reset()
-})
-
+  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
+});
+onBlokkliEvent("ui:resized", function() {
+  collector.reset();
+});
+onBlokkliEvent("state:reloaded", function() {
+  collector.reset();
+});
 onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT)
-})
+  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'SelectionOverlay',
-}
+  name: "SelectionOverlay"
+};
 </script>

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

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

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

@@ -5,46 +5,38 @@
         v-for="item in items"
         :key="item.uuid"
         :style="{
-          top: item.rect.y + 'px',
-          left: item.rect.x + 'px',
-          width: item.rect.width + 'px',
-          height: item.rect.height + 'px',
-        }"
+  top: item.rect.y + 'px',
+  left: item.rect.x + 'px',
+  width: item.rect.width + 'px',
+  height: item.rect.height + 'px'
+}"
       />
     </div>
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { falsy } from '#blokkli/helpers'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import { useBlokkli, computed } from '#imports'
-
-const props = defineProps<{
-  uuids: string[]
-}>()
-
-const { ui, dom } = useBlokkli()
-
-const artboard = ui.artboardElement()
-
+<script setup>
+import { falsy } from "#blokkli/helpers";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useBlokkli, computed } from "#imports";
+const props = defineProps({
+  uuids: { type: Array, required: true }
+});
+const { ui, dom } = useBlokkli();
+const artboard = ui.artboardElement();
 const items = computed(() => {
-  return props.uuids
-    .map((uuid) => {
-      const block = dom.findBlock(uuid)
-      if (!block) {
-        return null
-      }
-
-      const rect = dom.getBlockRect(uuid)
-      if (!rect) {
-        return null
-      }
-
-      return { uuid, rect }
-    })
-    .filter(falsy)
-})
-
-onBlokkliEvent('animationFrame', function () {})
+  return props.uuids.map((uuid) => {
+    const block = dom.findBlock(uuid);
+    if (!block) {
+      return null;
+    }
+    const rect = dom.getBlockRect(uuid);
+    if (!rect) {
+      return null;
+    }
+    return { uuid, rect };
+  }).filter(falsy);
+});
+onBlokkliEvent("animationFrame", function() {
+});
 </script>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    uuids: string[];
+};
+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;