@scm-js/plugin-api 1.48.0 → 1.50.0

package/index.d.ts

@@ -980,6 +980,8 @@ export interface UpgradesDat {
 	broodWar: Uint8Array;
 	/** The upgrade's name: a 1-based `stat_txt.tbl` index, 0 for none. */
 	label: Uint16Array;
+	/** Its button picture: a frame of `unit\cmdbtns\cmdicons.grp`. */
+	icon: Uint16Array;
 }
 /** The columns Technology Settings shows as defaults. */
 export interface TechdataDat {
@@ -992,6 +994,8 @@ export interface TechdataDat {
 	broodWar: Uint8Array;
 	/** The technology's name: a 1-based `stat_txt.tbl` index, 0 for none. */
 	label: Uint16Array;
+	/** Its button picture: a frame of `unit\cmdbtns\cmdicons.grp`. */
+	icon: Uint16Array;
 }
 /**
  * Unit edits as invertible change lists, in the same spirit as terrain's `TileChange`.
@@ -2329,6 +2333,8 @@ export interface StatusBarCells {
 export type PluginUpdateMode = "notify" | "manual" | "auto";
 /** The revisions a new map can start on; the two older ones are for opening old files, not making new ones. */
 export type NewMapVersion = Extract<MapVersion, "broodwar" | "remastered">;
+export type IconKind = "unit" | "upgrade" | "tech";
+export type IconLook = "normal" | "disabled" | "selected";
 /**
  * The version a host provides; a manifest that asks for a newer one is refused. It stays
  * at 1 while the API is only used by the plugins in the scm-js organisation and grows
@@ -4138,6 +4144,36 @@ export interface GraphicsApi {
 	 */
 	requestUnit(unitId: number): boolean;
 	requestSprite(kind: SpriteKind, id: number): boolean;
+	/**
+	 * The game's own button picture for a unit type, an upgrade or a technology — the icon
+	 * its command card shows — 36 × 34 at most and transparent round the edges. `look`
+	 * colours it as the game does: `"normal"` yellow (the default), `"disabled"` grey,
+	 * `"selected"` white. It does not depend on the map or its tileset. Null for an id with
+	 * no picture (a unit type past 227, a turret) and until `requestIcons` has the pictures;
+	 * null for good from a game data copy made before the editor kept them (installing the
+	 * game data again brings them). The canvas is the editor's own cached one: draw from it.
+	 *
+	 * @example
+	 * // A row of what a player researched, as the game's icons, with the names where there are no pictures.
+	 * const show = () => list.replaceChildren(...done.map((r) => {
+	 *   const icon = api.graphics.icon(r.kind, r.id);
+	 *   if (!icon) return api.ui.el("span", {}, r.kind === "tech" ? api.names.tech(r.id) : api.names.upgrade(r.id));
+	 *   const canvas = api.ui.el("canvas", { width: icon.width, height: icon.height });
+	 *   canvas.getContext("2d")?.drawImage(icon.image, 0, 0);
+	 *   return canvas;
+	 * }));
+	 * api.graphics.requestIcons();
+	 * api.graphics.onImageLoaded(show);
+	 * show();
+	 */
+	icon(kind: IconKind, id: number, options?: {
+		look?: IconLook;
+	}): PluginImage | null;
+	/**
+	 * Start fetching the icon pictures (one sheet holds them all), and say whether they are
+	 * in memory. `onImageLoaded` fires when they arrive.
+	 */
+	requestIcons(): boolean;
 	/** A GRP finished loading: anything drawn from one may look different now. */
 	onImageLoaded(listener: () => void): Disposable;
 }
@@ -5044,6 +5080,70 @@ export interface MapViewSpec {
 	 * to be called when the view goes (the plugin stops, or `dispose`).
 	 */
 	mount(element: HTMLElement): void | (() => void);
+	/**
+	 * The view is shown in the map's place, where the map was looking: `look` is the map's view
+	 * at that moment, or the other view's (`setCamera`) when the switch came from one. Turn to
+	 * look at the same place, as near the same scale as you can, so the switch keeps the person
+	 * where they were. Not called when another map, already showing the view, comes to the front.
+	 */
+	onShow?(look: MapViewCamera): void;
+	/**
+	 * What the minimap shows while the view is shown. Without it the minimap shows the map, and
+	 * its box and presses are the map's own view's (hidden behind this one).
+	 */
+	minimap?: MapViewMinimapSpec;
+}
+/**
+ * Where a view looks, in map pixels (32 to a tile): the point in the middle of what it shows,
+ * and how much of the map that is.
+ */
+export interface MapViewCamera {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+/**
+ * A map view's own minimap (`MapViewSpec.minimap`): the minimap draws the map's ground, then
+ * `draw` over it in place of the map's units, start locations and fog, and its box where the
+ * view looks (`MapViewHandle.setCamera`).
+ *
+ * @example
+ * // A replay's units as dots, and the minimap moving the game's camera.
+ * const view = api.ui.mapView({
+ *   title: "Replay",
+ *   mount: (el) => el.append(frame),
+ *   minimap: {
+ *     draw(ctx, m) {
+ *       for (const u of units) {
+ *         ctx.fillStyle = u.colour;
+ *         ctx.fillRect(m.x(u.x) - 1, m.y(u.y) - 1, Math.max(2, u.width * m.scale), Math.max(2, u.height * m.scale));
+ *       }
+ *     },
+ *     press: (x, y) => game.lookAt(x, y),
+ *   },
+ * });
+ * game.onUnits(() => view.redrawMinimap());
+ * game.onCamera((c) => view.setCamera(c));
+ */
+export interface MapViewMinimapSpec {
+	/** Draw over the map's ground, each time the minimap's picture is made while the view is shown. */
+	draw?(ctx: CanvasRenderingContext2D, minimap: MinimapView): void;
+	/**
+	 * A press on the minimap, and each move of a drag from it, at a map pixel: look there. Without
+	 * it the minimap does not move anything while the view is shown.
+	 */
+	press?(x: number, y: number): void;
+}
+/** Map pixels to minimap canvas pixels, for `MapViewMinimapSpec.draw`. */
+export interface MinimapView {
+	/** Minimap canvas pixels per map pixel. */
+	scale: number;
+	/** A map pixel's x on the minimap's canvas. */
+	x(px: number): number;
+	y(py: number): number;
+	/** The canvas's size in pixels, each side (the map is centred in it, letterboxed). */
+	size: number;
 }
 export interface MapViewHandle extends Disposable {
 	/**
@@ -5061,6 +5161,14 @@ export interface MapViewHandle extends Disposable {
 	 * `show` was called, or another map came to the front.
 	 */
 	onChange(listener: (shown: boolean) => void): Disposable;
+	/**
+	 * Where the view looks now, in map pixels; call it whenever that changes. The minimap draws
+	 * its box there while the view is shown, and the map, shown again, opens on the same place at
+	 * the same scale.
+	 */
+	setCamera(camera: MapViewCamera): void;
+	/** Make the minimap's picture again (`minimap.draw`), at most once a frame. Cheap: call it as the view's contents move. */
+	redrawMinimap(): void;
 }
 export interface PanelHandle {
 	close(): void;
@@ -5565,6 +5673,24 @@ export interface UiApi {
 	 * }
 	 */
 	progress(label: string, options?: ProgressOptions): ProgressHandle;
+	/**
+	 * A tooltip in the editor's own style over an element of yours, in place of the
+	 * browser's `title`. `content` is a line of text, or a function asked for what to show
+	 * at the pointer — rows, bars, pictures, built with `el` and the widgets — which is how
+	 * a chart says what is under the pointer: it is asked again as the pointer moves, and
+	 * answering null hides the tip there. The editor places it beside the pointer, keeps it
+	 * on screen and takes it away when the pointer leaves, the element leaves the page, or
+	 * the plugin stops. `refresh()` asks again where the pointer stands (a picture arrived,
+	 * the data moved). Remove the element's `title`, or both show.
+	 *
+	 * @example
+	 * // A chart that reads out the value under the pointer.
+	 * api.ui.tooltip(canvas, (at) => {
+	 *   const i = Math.floor((at.offsetX / canvas.clientWidth) * values.length);
+	 *   return values[i] === undefined ? null : api.ui.el("div", {}, api.ui.el("b", {}, `${values[i]}`), " minerals");
+	 * });
+	 */
+	tooltip(target: HTMLElement, content: string | ((at: TooltipPointer) => HTMLElement | string | null), options?: TooltipOptions): TooltipHandle;
 	/** `el("div", { className: "row" }, …)`: the DOM helper the widgets are built from. */
 	el<K extends keyof HTMLElementTagNameMap>(tag: K, props?: Record<string, unknown>, ...children: WidgetChild[]): HTMLElementTagNameMap[K];
 	/** Buttons, fields, forms and lists in the editor's own styles. */
@@ -5579,6 +5705,33 @@ export interface UiApi {
 	/** Ask the viewport to repaint (a transaction does this by itself). Raises no event. */
 	repaint(): void;
 }
+/** Where the pointer is, for a tooltip's `content`. */
+export interface TooltipPointer {
+	/** In the page, CSS pixels (`clientX` / `clientY`). */
+	x: number;
+	y: number;
+	/** From the target's top-left corner, CSS pixels. */
+	offsetX: number;
+	offsetY: number;
+	/** Whether a button is held — a drag across a chart. */
+	pressed: boolean;
+}
+export interface TooltipOptions {
+	/**
+	 * Milliseconds the pointer rests before the tip shows. 500 for text, as the editor's own
+	 * tooltips; 0 for a function, which reads out what is under the pointer and should keep
+	 * up with it.
+	 */
+	delay?: number;
+	/** A width the tip does not grow past, CSS pixels; 320 by default. */
+	maxWidth?: number;
+}
+export interface TooltipHandle extends Disposable {
+	/** Ask `content` again where the pointer stands; nothing when the tip is not showing. */
+	refresh(): void;
+	/** Take the tip away until the pointer next moves over the target. */
+	hide(): void;
+}
 export interface ConfirmOptions {
 	title?: string;
 	/** The primary button; `OK` by default. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-js/plugin-api",
-  "version": "1.48.0",
+  "version": "1.50.0",
   "description": "Type declarations for the scmJS plugin API",
   "license": "MIT",
   "types": "index.d.ts",