solid-pianoroll 0.0.24 → 0.0.25

package/dist/index.css

@@ -0,0 +1,212 @@
+/* src/PianoRoll.module.css */
+.PianoRoll {
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  height: 100%;
+  user-select: none;
+}
+.PianoRollContainer {
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.PianoRollLeftColumn {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  max-width: 250px;
+  margin-top: 30px;
+}
+.PianoRollLeftColumn.showTrackList {
+  width: 30%;
+  margin-top: 0;
+}
+.PianoRollRightColumn {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+}
+
+/* src/PianoRollKeys.module.css */
+.PianoRollKeys {
+  position: relative;
+  height: 100%;
+  border-width: 0;
+  border-color: #000;
+  border-style: solid;
+  border-right-width: 1px;
+  border-left-width: 1px;
+  background: white;
+  cursor: pointer;
+  background: black;
+}
+.Key {
+  transition-property: background-color, box-shadow;
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+  border-width: 0px;
+  position: absolute;
+  box-sizing: border-box;
+  width: 120%;
+  left: -20%;
+  border-color: #000;
+  border-style: solid;
+  transform: rotateX(0deg);
+  perspective: 100px;
+}
+.black {
+  background: black;
+  border-top-right-radius: 12%;
+  border-bottom-right-radius: 12%;
+  margin-left: -20%;
+  z-index: 1;
+  border: 1px black outset;
+}
+.white {
+  background: white;
+  border-top-width: 0.5px;
+  border-bottom-width: 0.5px;
+  border-top-right-radius: 4%;
+  border-bottom-right-radius: 4%;
+}
+.down {
+  transition: none;
+  background: red;
+  transform: rotateX(0deg) rotateY(20deg);
+}
+
+/* src/viewport/ScrollZoomContainer.module.css */
+.ScrollZoomContainer {
+  height: 100%;
+  width: 100%;
+  z-index: 4;
+}
+
+/* src/PianoRollNotes.module.css */
+.PianoRollNotes {
+  position: absolute;
+  flex: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  cursor: grab;
+}
+.Note {
+  position: absolute;
+  box-sizing: border-box;
+  border-width: 0.5px;
+  border-style: solid;
+  border-color: #a00;
+  cursor: move;
+}
+.Note.trimStart {
+  cursor: w-resize;
+}
+.Note.trimEnd {
+  cursor: e-resize;
+}
+
+/* src/PianoRollGrid.module.css */
+.PianoRollGrid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.PianoRollGrid-Row {
+  position: absolute;
+  border-style: solid;
+  border-color: gray;
+  width: 100%;
+  border-width: 0;
+}
+.PianoRollGrid-Row.IsDark {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.PianoRollGrid-Row.Key {
+  border-width: 0px 1px 0px 0;
+}
+.PianoRollGrid-Row.IsBlackAndNextIsWhite {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-width: 0.1px 1px 0.1px 0;
+}
+.PianoRollGrid-Time {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0px;
+  height: 100%;
+  border-left-style: solid;
+  border-left-width: 0.5px;
+  border-left-color: #bbb;
+  background: #ccc;
+}
+.PianoRollGrid-Time.Highlighted {
+  background: #ddd;
+}
+.PianoRollGrid-Time.HighlightedBorder {
+  border-left-color: gray;
+}
+
+/* src/PianoRollTrackList.module.css */
+.PianoRollTrackList {
+  position: relative;
+  height: 100%;
+  flex: 1;
+}
+.Track {
+  border-width: 0px;
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: #000;
+  border-style: solid;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  padding: 2px;
+  cursor: pointer;
+  background: lightgrey;
+}
+Track.selected {
+  background: gray;
+}
+
+/* src/PianoRollScale.module.css */
+.PianoRollScale {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.PianoRollScale-Time {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0px;
+  height: 100%;
+  border-left-style: solid;
+  border-left-width: 0.5px;
+  border-left-color: x#666;
+  border-bottom-color: #333;
+  border-bottom-style: solid;
+  border-bottom-width: 0.5px;
+  background: #777;
+  display: flex;
+  align-items: center;
+}
+.PianoRollScale-Label {
+  position: absolute;
+  z-index: 1;
+  color: #ccc;
+  margin-left: 3px;
+  font-size: 0.8em;
+}
+.PianoRollScale-Time.Highlighted {
+  background: #666;
+}
+.PianoRollScale-Time.HighlightedBorder {
+  border-left-color: #111;
+}

package/dist/{types/usePianoRollState.d.ts → index.d.ts}

@@ -1,6 +1,17 @@
-import { GridDivision } from "./types";
-import { Note, Track } from "./types";
-import { ClientRect } from "./useBoundingClientRect";
+import * as solid_js from 'solid-js';
+import { ParentProps, JSX } from 'solid-js';
+import { Midi } from '@tonejs/midi';
+
+type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
+type Note = Pick<ReturnType<Midi["tracks"][number]["notes"][number]["toJSON"]>, "durationTicks" | "midi" | "ticks" | "velocity">;
+type Track = {
+    name: string;
+    notes: Note[];
+    color: string;
+};
+
+type ClientRect = Omit<DOMRect, "toJSON">;
+
 type PianoRollState = {
     ppq: number;
     mode: "keys" | "tracks";
@@ -25,7 +36,6 @@ type PropNameToHandlerName<PropName extends string> = `on${Capitalize<PropName>}
 type StateChangeHandlerObject = {
     [PropName in keyof typeof defaultState as PropNameToHandlerName<PropName>]: (value: typeof defaultState[PropName], originalEvent?: MouseEvent | KeyboardEvent) => void;
 };
-export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onPlayHeadPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "snapValueToGridIfEnabled" | "onPlayheadPositionChange")[];
 declare const createPianoRollstate: (initialState?: Partial<PianoRollState & StateChangeHandlerObject>) => {
     ppq: number;
     mode: "keys" | "tracks";
@@ -53,7 +63,7 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState & Sta
     snapValueToGridIfEnabled: (value: number, altKey: boolean) => number;
     onPlayheadPositionChange: (playheadPosition: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
     onPpqChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
-    onModeChange: (value: "keys" | "tracks", originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onModeChange: (value: "tracks" | "keys", originalEvent?: MouseEvent | KeyboardEvent) => void;
     onPositionChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
     onZoomChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
     onVerticalZoomChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
@@ -70,4 +80,26 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState & Sta
     onNotesScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">, originalEvent?: MouseEvent | KeyboardEvent) => void;
     onTracksScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">, originalEvent?: MouseEvent | KeyboardEvent) => void;
 };
-export default createPianoRollstate;
+
+type PianoRollProps = {
+    showAllTracks?: boolean;
+    showTrackList?: boolean;
+} & ReturnType<typeof createPianoRollstate> & Omit<JSX.IntrinsicElements["div"], "onDurationChange">;
+declare const PianoRoll: (allProps: ParentProps<PianoRollProps>) => JSX.Element;
+
+declare const PlayHead: (allProps: {
+    position: number;
+    onPositionChange?: ((playHeadPosition: number, event: MouseEvent) => void) | undefined;
+    sync?: boolean | undefined;
+    dimensionName?: string | undefined;
+} & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+declare const useNotes: () => {
+    notes: solid_js.Accessor<Note[]>;
+    onNotesChange: solid_js.Setter<Note[]>;
+    onNoteChange: (index: number, note: Note) => void;
+    onInsertNote: (note: Note) => number;
+    onRemoveNote: (index: number) => void;
+};
+
+export { GridDivision, Note, PianoRoll, PlayHead, Track, createPianoRollstate, useNotes };