@hi-ashleyj/llama 0.8.1 → 0.9.0

package/components/drawables/Arc.svelte

@@ -2,6 +2,7 @@
 import { onMount } from "svelte";
 export let fill = null;
 export let stroke = null;
+export let strokeWidth = null;
 export let startAngle;
 export let endAngle;
 $: sd = (startAngle - 90) * Math.PI / 180;
@@ -15,8 +16,9 @@ const draw = function ({ ctx }, { x, y, w, h }) {
         ctx.fillStyle = fill;
         ctx.fill();
     }
-    if (stroke) {
+    if (stroke && strokeWidth) {
         ctx.strokeStyle = stroke;
+        ctx.lineWidth = strokeWidth;
         ctx.stroke();
     }
 };

package/components/drawables/Arc.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         fill?: string | null | undefined;
         stroke?: string | null | undefined;
+        strokeWidth?: number | null | undefined;
         startAngle: number;
         endAngle: number;
     };

package/components/drawables/Circle.svelte

@@ -2,6 +2,7 @@
 import { onMount } from "svelte";
 export let fill = null;
 export let stroke = null;
+export let strokeWidth = null;
 const TWO_PI = Math.PI * 2;
 const draw = function ({ ctx }, { x, y, w, h }) {
     let r = (w + h) / 4;
@@ -11,8 +12,9 @@ const draw = function ({ ctx }, { x, y, w, h }) {
         ctx.fillStyle = fill;
         ctx.fill();
     }
-    if (stroke) {
+    if (stroke && strokeWidth) {
         ctx.strokeStyle = stroke;
+        ctx.lineWidth = strokeWidth;
         ctx.stroke();
     }
 };

package/components/drawables/Circle.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         fill?: string | null | undefined;
         stroke?: string | null | undefined;
+        strokeWidth?: number | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/drawables/MultiLineText.svelte

@@ -7,6 +7,7 @@ export let font;
 export let style = undefined;
 export let fill = undefined;
 export let stroke = undefined;
+export let strokeWidth = null;
 export let alignH = "left";
 export let alignV = "top";
 $: computedFont = (style ? style + " " : "") + size + "px " + font;
@@ -30,8 +31,9 @@ const draw = function ({ ctx }, { x, y }) {
             ctx.fillStyle = fill;
             ctx.fillText(line, x, y + size * spacing * i - offset);
         }
-        if (stroke) {
+        if (stroke && strokeWidth) {
             ctx.strokeStyle = stroke;
+            ctx.lineWidth = strokeWidth;
             ctx.strokeText(line, x, y + size * spacing * i - offset);
         }
     }

package/components/drawables/MultiLineText.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         style?: string | undefined;
         fill?: string | undefined;
         stroke?: string | undefined;
+        strokeWidth?: number | null | undefined;
         alignH?: "left" | "center" | "right" | undefined;
         alignV?: "top" | "middle" | "bottom" | "alphabetic" | undefined;
     };

package/components/drawables/Rectangle.svelte

@@ -2,6 +2,7 @@
 import { onMount } from "svelte";
 export let fill = null;
 export let stroke = null;
+export let strokeWidth = null;
 const draw = function ({ ctx }, { x, y, w, h }) {
     ctx.beginPath();
     ctx.rect(x, y, w, h);
@@ -9,7 +10,7 @@ const draw = function ({ ctx }, { x, y, w, h }) {
         ctx.fillStyle = fill;
         ctx.fill();
     }
-    if (stroke) {
+    if (stroke && strokeWidth) {
         ctx.strokeStyle = stroke;
         ctx.stroke();
     }

package/components/drawables/Rectangle.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         fill?: string | null | undefined;
         stroke?: string | null | undefined;
+        strokeWidth?: number | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/drawables/RoundedRectangle.svelte

@@ -0,0 +1,24 @@
+<script>import { setupDrawable } from "../../setup";
+import { onMount } from "svelte";
+export let fill = null;
+export let stroke = null;
+export let strokeWidth = null;
+export let radius = 0;
+const draw = function ({ ctx }, { x, y, w, h }) {
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, h, radius);
+    if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+    }
+    if (stroke && strokeWidth) {
+        ctx.strokeStyle = stroke;
+        ctx.lineWidth = strokeWidth;
+        ctx.stroke();
+    }
+};
+let register = setupDrawable({});
+onMount(() => {
+    return register({ draw });
+});
+</script>

package/components/drawables/RoundedRectangle.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        fill?: string | null | undefined;
+        stroke?: string | null | undefined;
+        strokeWidth?: number | null | undefined;
+        radius?: number | [number] | [number, number] | [number, number, number] | [number, number, number, number] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RoundedRectangleProps = typeof __propDef.props;
+export type RoundedRectangleEvents = typeof __propDef.events;
+export type RoundedRectangleSlots = typeof __propDef.slots;
+export default class RoundedRectangle extends SvelteComponentTyped<RoundedRectangleProps, RoundedRectangleEvents, RoundedRectangleSlots> {
+}
+export {};

package/components/drawables/Text.svelte

@@ -6,23 +6,27 @@ export let font;
 export let style = undefined;
 export let fill = undefined;
 export let stroke = undefined;
+export let strokeWidth = null;
 export let alignH = "left";
 export let alignV = "top";
 $: computedFont = ((style) ? style + " " : "") + size + "px " + font;
-const draw = function ({ ctx }, { x, y }) {
+const draw = function ({ ctx }, { x, y, w, h }) {
     if (!text)
         return;
     ctx.beginPath();
     ctx.textAlign = alignH;
     ctx.textBaseline = alignV;
     ctx.font = computedFont;
+    let actualX = x + (alignH === "right" ? w : alignH === "center" ? w / 2 : 0);
+    let actualY = y + (alignV === "bottom" ? h : alignV === "middle" ? (h / 2) + (size * 0.10) : 0);
     if (fill) {
         ctx.fillStyle = fill;
-        ctx.fillText(text, x, y);
+        ctx.fillText(text, actualX, actualY);
     }
-    if (stroke) {
+    if (stroke && strokeWidth) {
         ctx.strokeStyle = stroke;
-        ctx.strokeText(text, x, y);
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeText(text, actualX, actualY);
     }
 };
 let register = setupDrawable({});

package/components/drawables/Text.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         style?: string | undefined;
         fill?: string | undefined;
         stroke?: string | undefined;
+        strokeWidth?: number | null | undefined;
         alignH?: "left" | "center" | "right" | undefined;
         alignV?: "top" | "middle" | "bottom" | "alphabetic" | undefined;
     };

package/components/drawables/index.d.ts

@@ -4,3 +4,4 @@ export { default as Arc } from "./Arc.svelte";
 export { default as DisplayImage } from "./DisplayImage.svelte";
 export { default as Text } from "./Text.svelte";
 export { default as MultiLineText } from "./MultiLineText.svelte";
+export { default as RoundedRectangle } from "./RoundedRectangle.svelte";

package/components/drawables/index.js

@@ -4,3 +4,4 @@ export { default as Arc } from "./Arc.svelte";
 export { default as DisplayImage } from "./DisplayImage.svelte";
 export { default as Text } from "./Text.svelte";
 export { default as MultiLineText } from "./MultiLineText.svelte";
+export { default as RoundedRectangle } from "./RoundedRectangle.svelte";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hi-ashleyj/llama",
   "description": "A (Very Incomplete) 2D Canvas Game Engine powered by Svelte",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -35,6 +35,7 @@
     "./components/drawables/DisplayImage.svelte": "./components/drawables/DisplayImage.svelte",
     "./components/drawables/MultiLineText.svelte": "./components/drawables/MultiLineText.svelte",
     "./components/drawables/Rectangle.svelte": "./components/drawables/Rectangle.svelte",
+    "./components/drawables/RoundedRectangle.svelte": "./components/drawables/RoundedRectangle.svelte",
     "./components/drawables/Text.svelte": "./components/drawables/Text.svelte",
     "./components/drawables": "./components/drawables/index.js",
     "./components/motions": "./components/motions.js",