快速开始

Pattaya 可以和任何框架一起工作，比如 Vue, React, Svelte, Web components，纯粹 HTML Javascript 页面，甚至 electron 或者 webview。

Pattaya 选择 Depict 来处理底层事件和渲染。 所以你需要先安装 Depict。

npm install @challenai/depict --save

然后从 npm 安装 Pattaya。

npm install @pattaya/pattaya --save

这里有一个 React 开始的示例

你可以在 Depict 的 Github 找到更多其他框架的示例。

import { NonWorkerDepict } from "@challenai/depict/nonworker";
import { Graph } from "@challenai/depict/graph";
import { nodes } from "@pattaya/pattaya/components";
import mayk from "@pattaya/pattaya/mayk";
import { useEffect, useRef, useState } from "react";

function App() {
  const rootRef = useRef<HTMLDivElement>(null);
  const [graph, setGraph] = useState<NonWorkerDepict | undefined>();

  useEffect(() => {
    let g = graph;
    if (!g) {
      const canvas = rootRef.current;
      if (canvas === null) return;
      g = new NonWorkerDepict({
        root: canvas,
        maxLayers: 1,
        graph: new Graph(),
      });
      setGraph(g);
      g.start();

      g.graph.resetGraph([[{
        x: 240,
        y: 130,
        shapes: nodes.circle.shapes({ radius: 48 }, mayk.theme.nodes.normal),
      }]])
    }
    return () => g?.destroy();
  }, []);

  return (
    <div
      style={{
        position: "relative",
        width: "600px",
        height: "400px",
      }}
      ref={rootRef}
    ></div>
  );
}

这里有一个 Vue 开始的示例

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import { NonWorkerDepict } from "@challenai/depict/nonworker";
import { Graph } from "@challenai/depict/graph";
import { nodes } from "@pattaya/pattaya/components";
import mayk from "@pattaya/pattaya/mayk";

export default defineComponent({
  name: "Graph",
  setup(props) {
    const rootRef = ref<HTMLDivElement>()
    const depict = ref<NonWorkerDepict | undefined>(undefined)

    onMounted(() => {
      if (!depict.value) {
        if (!rootRef.value) return
        depict.value = new NonWorkerDepict({
          root: rootRef.value,
          maxLayers: 1,
          graph: new Graph(),
        });
        depict.value.start();
        depict.value.graph.resetGraph([[{
          x: 240,
          y: 130,
          shapes: nodes.circle.shapes({ radius: 48 }, mayk.theme.nodes.normal),
        }]]);
      }
    })

    return {
      rootRef,
    }
  }
})

</script>

<template>
  <div class="graph" ref="rootRef"></div>
</template>

<style scoped>
.graph {
  position: relative;
  width: 600px;
  height: 400px;
  border: 1px solid #333;
  border-radius: 20px;
}
</style>

这里有一个 Svelte 开始的示例

<script lang="ts">
  import { onMount } from "svelte";
  import { NonWorkerDepict } from "@challenai/depict/nonworker";
  import { Graph } from "@challenai/depict/graph";
  import { nodes } from "@pattaya/pattaya/components";
  import mayk from "@pattaya/pattaya/mayk";

  let depict: NonWorkerDepict | undefined = $state(undefined);
  let rootRef: HTMLDivElement | undefined;

  onMount(() => {
    if (!depict) {
      if (!rootRef) return;
      depict = new NonWorkerDepict({
        root: rootRef,
        maxLayers: 1,
        graph: new Graph(),
      });
      depict.start();
      depict.graph.resetGraph([[{
        x: 240,
        y: 130,
        shapes: nodes.circle.shapes({ radius: 48 }, mayk.theme.nodes.normal),
      }]]);
    }

    return () => depict?.destroy();
  });
</script>

<div class="graph" bind:this={rootRef}></div>

<style>
  .graph {
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid #333;
    border-radius: 20px;
  }
</style>