<template><h1 id="subject"><a class="header-anchor" href="#subject">#</a> Subject</h1>
<p>The subjects can be controlled from access to the <code>MarkedText</code>,
using methods such as <code>toggleSubject</code> or <code>lineConnectSubject</code>.
Below shows some access to these methods, mapped to buttons.</p>
<p><code>colorOptions</code> and <code>subjectStyleType</code> control the look of subjects.
We use the <a href="https://www.npmjs.com/package/color-scheme" target="_blank" rel="noopener noreferrer"><code>color-scheme</code><OutboundLink/></a> package
to manage color options (this may change in the near future).
<code>colorOptions</code> derives its parameters from this usage.
<code>subjectStyleType</code> controls how these colors are derived and their relationship;
the default gives 16 relatively distinct colors.</p>
<p>We also implement connecting lines between marks that share the same subject.
This feature is fairly prototypical, with little option for customization.
Suggestions for improvement and use-cases are encouraged.</p>
<p>The following example is the Vue component found in
<code>test/SubjectTest.vue</code>.</p>
<ClientOnly>
  <SubjectTest/>
</ClientOnly>
</template>