Fix type issue by branding unknowns, enabling fill-translate

Author: sprusr

src/renderer/layers/fill.ts

@@ -26,11 +26,11 @@ export const render = (
       1,
     );
 
-    // resolver.resolve(
-    //   feature.paint?.["fill-translate"] ?? layer.paint?.["fill-translate"],
-    //   (value) =>
-    //     path.setAttribute("transform", `translate(${value.x} ${value.y})`),
-    // );
+    resolver.resolve(
+      feature.paint?.["fill-translate"] ?? layer.paint?.["fill-translate"],
+      (value) =>
+        path.setAttribute("transform", `translate(${value[0]} ${value[1]})`),
+    );
 
     // TODO: move to parent styles
     path.setAttribute("stroke", "none");

src/style/index.ts

@@ -4,7 +4,7 @@ import * as fill from "./layers/fill.js";
 import * as line from "./layers/line.js";
 import type * as schema from "./schema.js";
 
-export const style = (spec: z.input<typeof schema.style>): Style => {
+export const style = (spec: z.output<typeof schema.style>): Style => {
   return {
     background: getBackground(spec),
     layers: spec.layers.map((layer) => ({ name: layer.id })),
@@ -55,7 +55,7 @@ export const style = (spec: z.input<typeof schema.style>): Style => {
   };
 };
 
-const getBackground = (spec: z.input<typeof schema.style>): string | null => {
+const getBackground = (spec: z.output<typeof schema.style>): string | null => {
   const background = spec.layers.find((layer) => layer.type === "background")
     ?.paint?.["background-color"];
   if (typeof background === "string") {

src/style/layers/fill.ts

@@ -27,18 +27,34 @@ export const prepare = (
     features: [{ geometry }],
     paint: {
       "fill-color": color(layer),
-      "fill-translate": undefined,
+      "fill-translate": translate(layer),
       "fill-opacity": undefined,
     },
     layout: {},
   };
 };
 
 const color = (
-  layer: z.input<typeof schema.fillLayer>,
+  layer: z.output<typeof schema.fillLayer>,
 ): PreparedFeatureValue<string> => {
   if (typeof layer.paint?.["fill-color"] !== "string") {
     return undefined;
   }
   return { type: "constant", value: layer.paint["fill-color"] };
 };
+
+const translate = (
+  layer: z.output<typeof schema.fillLayer>,
+): PreparedFeatureValue<[number, number]> => {
+  if (!Array.isArray(layer.paint?.["fill-translate"])) {
+    return undefined;
+  }
+  const [x, y] = layer.paint["fill-translate"];
+  if (typeof x !== "number" || typeof y !== "number") {
+    return undefined;
+  }
+  return {
+    type: "constant",
+    value: [x, y],
+  };
+};

src/style/layers/line.ts

@@ -36,7 +36,7 @@ export const prepare = (
 };
 
 const color = (
-  layer: z.input<typeof schema.lineLayer>,
+  layer: z.output<typeof schema.lineLayer>,
 ): PreparedFeatureValue<string> => {
   if (typeof layer.paint?.["line-color"] !== "string") {
     return undefined;
@@ -45,7 +45,7 @@ const color = (
 };
 
 const width = (
-  layer: z.input<typeof schema.lineLayer>,
+  layer: z.output<typeof schema.lineLayer>,
 ): PreparedFeatureValue<number> => {
   if (layer.paint?.["line-width"] === undefined) return undefined;
   if (typeof layer.paint?.["line-width"] === "number") {

src/style/schema.ts

@@ -5,9 +5,9 @@ export const fn = z.union([
   z.object({ stops: z.array(z.tuple([z.number(), z.number()])) }),
 ]);
 
-export const filter = z.unknown();
+export const filter = z.unknown().brand<"Filter">();
 
-export const expression = z.array(z.unknown());
+export const expression = z.array(z.unknown()).brand<"Expression">();
 
 export const vectorSource = z
   .object({