fiddlek/pages/newindex.ts

import './newindex.scss';
import '../modules/themes/themes.scss';
import '../modules/fiddle-sk';
import { FiddleSk, FiddleSkFiddleSuccessEventDetail } from '../modules/fiddle-sk/fiddle-sk';
import { FiddleContext } from '../modules/json';
import '../../infra-sk/modules/theme-chooser-sk';
import '../../infra-sk/modules/app-sk';

const fiddle = document.querySelector<FiddleSk>('fiddle-sk')!;
fiddle.config = {
  display_options: true,
  embedded: false,
  cpu_embedded: false,
  gpu_embedded: false,
  options_open: false,
  basic_mode: false,
  domain: 'https://fiddle.skia.org',
  bug_link: true,
  sources: [1, 2, 3, 4, 5, 6],
  loop: true,
  play: true,
};

fiddle.options = {
  textOnly: false,
  srgb: false,
  f16: false,
  width: 256,
  height: 256,
  animated: false,
  duration: 2,
  offscreen: false,
  offscreen_width: 256,
  offscreen_height: 256,
  offscreen_sample_count: 1,
  offscreen_texturable: false,
  offscreen_mipmap: false,
  source: 1,
  source_mipmap: false,
};

fiddle.runResults = {
  compile_errors: [],
  runtime_error: '',
  fiddleHash: '',
  text: `void draw(SkCanvas* canvas) {
    SkPaint p;
    p.setColor(SK_ColorRED);
    p.setAntiAlias(true);
    p.setStyle(SkPaint::kStroke_Style);
    p.setStrokeWidth(10);

    canvas->drawLine(20, 20, 100, 100, p);
}`,
};

declare global {
  interface Window {
    sk: {
        fiddle: FiddleContext;
    };
  }
}

// If the context is supplied, i.e. we are being served from /c/<name>, then use
// that context in the element.
if (window.sk.fiddle.fiddlehash) {
  fiddle.context = window.sk.fiddle;
}

fiddle.addEventListener('fiddle-success', (e) => {
  const hash = (e as CustomEvent<FiddleSkFiddleSuccessEventDetail>).detail;
  window.history.pushState(null, hash, `/c/${hash}`);
});