API voor schalen en centreren

alleen comp-hub

$onScaleChange wordt geïnjecteerd door de preview-omgeving van comp-hub. Het is GEEN standaard framework-API en bestaat niet buiten comp-hub. Voor Vue-componenten wordt het toegevoegd aan de Vue-instance (this.$onScaleChange), en voor React-componenten wordt het doorgegeven als prop onScaleChange. Als je deze API in je component gebruikt, zorg er dan voor dat je hem beschermt tegen undefined wanneer de component buiten comp-hub draait.

$onScaleChange abonneert zich op wijzigingen in de containergrootte en berekent automatisch schaal- en centreringsstijlen, zodat de inhoud zich aanpast aan de preview-container.

Waarom schalen?

Het mini-previewpaneel heeft beperkte ruimte (meestal ongeveer 300×200), maar sommige componenten tonen rijke inhoud (grafieken, tabellen, complexe formulierlayouts, enz.). Zonder schalen is in het mini-paneel slechts een deel van het gebied zichtbaar, waardoor je de volledige component niet kunt zien. Met de scale-API kun je een vooraf ingestelde inhoudsgrootte definiëren (bijvoorbeeld 800×500) en wordt deze automatisch geschaald om in de mini-container te passen, zodat alles zichtbaar blijft.

type ScaleMode = "widthFirst" | "heightFirst" | "contain" | "cover"

interface ScaleStyle {
  transform: string       // e.g. "translate(100px, 50px) scale(0.75)"
  transformOrigin: string // always "left top"
}

Schaalmodi

Modus	Gedrag
"widthFirst"	Schaal om te passen binnen de containerbreedte, de hoogte kan overlopen
"heightFirst"	Schaal om te passen binnen de containerhoogte, de breedte kan overlopen
"contain"	Proportioneel schalen, inhoud volledig zichtbaar binnen de container (aanbevolen standaard)
"cover"	Proportioneel schalen, inhoud vult de container (kan het teveel afsnijden)

Alle modi centreren de inhoud in de container via translate.

$onScaleChange(params, callback) → afmelden

Abonneert zich op wijzigingen in de containergrootte. De callback wordt direct aangeroepen met de huidige schaal en daarna opnieuw telkens wanneer de container van grootte verandert.

const unsubscribe = this.$onScaleChange(
  params: { mode: ScaleMode, width: number, height: number },
  callback: (style: ScaleStyle) => void
): () => void

Gebruik (React)

De React-versie van de scale-API wordt als prop onScaleChange doorgegeven aan je demo-component:

import React, { useEffect, useState } from "react";

const DemoMini = ({ onScaleChange }) => {
  const [scaleStyle, setScaleStyle] = useState({});

  useEffect(() => {
    if (onScaleChange) {
      const unsubscribe = onScaleChange(
        { mode: "contain", width: 800, height: 500 },
        (style) => setScaleStyle(style)
      );
      return unsubscribe; // cleanup on unmount
    }
  }, [onScaleChange]);

  return (
    <div style={scaleStyle}>
      {/* your content */}
    </div>
  );
};

export default DemoMini;

Gebruik (Vue 2 Options API)

<script>
export default {
  data() {
    return { scaleStyle: {} }
  },
  mounted() {
    // Abonneren — wordt automatisch herberekend bij het wijzigen van de containergrootte
    this._unsub = this.$onScaleChange(
      { mode: "contain", width: 800, height: 500 },
      (style) => { this.scaleStyle = style }
    )
  },
  beforeDestroy() {
    this._unsub?.() // Clean up subscription
  }
}
</script>

Gebruik (Vue 3 Composition API)

<script setup>
import { ref, getCurrentInstance, onBeforeUnmount } from "vue"

const instance = getCurrentInstance()
const scaleStyle = ref({})

const unsub = instance.proxy.$onScaleChange(
  { mode: "contain", width: 800, height: 500 },
  (style) => { scaleStyle.value = style }
)

onBeforeUnmount(() => unsub())
</script>

Veelvoorkomende patronen

Demo-component met vaste inhoudsgrootte

Preview-demo-componenten declareren meestal een vast inhoudsgebied en gebruiken daarna de scale-API om het previewpaneel te vullen:

<template>
  <div class="demo-wrapper" :style="scaleStyle">
    <!-- Content designed to 800×500 -->
    <div class="demo-content">...</div>
  </div>
</template>

<script>
export default {
  data() {
    return { scaleStyle: {} }
  },
  mounted() {
    this._unsub = this.$onScaleChange(
      { mode: "contain", width: 800, height: 500 },
      (style) => { this.scaleStyle = style }
    )
  },
  beforeDestroy() {
    this._unsub?.()
  }
}
</script>

<style scoped>
.demo-wrapper {
  transform-origin: left top;
}
.demo-content {
  width: 800px;
  height: 500px;
  overflow: hidden;
}
</style>

Best practices

1. Ruim abonnementen op — roep altijd unsubscribe() aan in beforeDestroy / onBeforeUnmount om geheugenlekken te voorkomen
2. Vaste inhoudsgrootte — ontwerp je demo met een specifieke breedte × hoogte (bijvoorbeeld 800×500) en laat de scale-API de rest afhandelen
3. contain is de veilige standaard — het zorgt ervoor dat alle inhoud zichtbaar is, zelfs in kleine panelen
4. Bescherm tegen niet-comp-hub-omgevingen — omdat deze API alleen bestaat binnen de comp-hub preview, controleer altijd of hij beschikbaar is voordat je hem aanroept:

// Veilig aanroeppatroon
if (this.$onScaleChange) {
  this._unsub = this.$onScaleChange(
    { mode: "contain", width: 800, height: 500 },
    (style) => { this.scaleStyle = style }
  )
}