fabricjs · asturur · Jan 13, 2024 · Nov 19, 2023 · Nov 19, 2023 · Nov 19, 2023
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -4,7 +4,8 @@
     "new",
     "/.codesandbox/templates/node",
     "/.codesandbox/templates/next",
-    "/.codesandbox/templates/vanilla"
+    "/.codesandbox/templates/vanilla",
+    "/.codesandbox/templates/vue"
   ],
   "node": "16"
 }
diff --git a/.codesandbox/deploy.mjs b/.codesandbox/deploy.mjs
@@ -6,7 +6,7 @@ import match from 'micromatch';
 import path from 'path';
 import { getGitInfo } from '../scripts/git.mjs';
 
-const BINARY_EXT = ['png', 'jpg', 'jpeg'];
+const BINARY_EXT = ['png', 'jpg', 'jpeg', 'ico'];
 
 function bufferToBase64DataUrl(buffer, mimeType) {
   return 'data:' + mimeType + ';base64,' + buffer.toString('base64');
@@ -94,7 +94,6 @@ export async function createCodeSandbox(appPath) {
     );
     return `https://codesandbox.io/s/${sandbox_id}`;
   } catch (error) {
-    // console.log(error.response.data);
-    throw new Error(error.response.data);
+    throw error.response?.data || error;
   }
 }
diff --git a/.codesandbox/templates/vue/.gitignore b/.codesandbox/templates/vue/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+package-lock.json
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.codesandbox/templates/vue/.vscode/extensions.json b/.codesandbox/templates/vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/.codesandbox/templates/vue/README.md b/.codesandbox/templates/vue/README.md
@@ -0,0 +1,15 @@
+# Fabric Vue.js Sandbox
+
+A [`vue`](https://vuejs.org/) app for reproducing `fabric` issues and creating examples.
+
+## Reproducing
+
+Creating a clear, easy to use reproduction is very **IMPORTANT**.
+Keep it simple and concise.
+Don't add stuff that is out of scope.
+
+Make sure you are reproducing with the correct version of fabric.
+
+Provide a **detailed description** including steps to reproduce in the [`REPRODUCE.md`](./REPRODUCE.md) file.
+
+Navigate to [`src/App.vue`](./src/App.vue) and start editing.
diff --git a/.codesandbox/templates/vue/REPRODUCE.md b/.codesandbox/templates/vue/REPRODUCE.md
@@ -0,0 +1,5 @@
+# Reproducing
+
+## Steps
+
+1.
diff --git a/.codesandbox/templates/vue/env.d.ts b/.codesandbox/templates/vue/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/.codesandbox/templates/vue/index.html b/.codesandbox/templates/vue/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/.codesandbox/templates/vue/package.json b/.codesandbox/templates/vue/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "vue",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+  },
+  "dependencies": {
+    "fabric": "file:../../..",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^18.18.5",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/tsconfig": "^0.4.0",
+    "npm-run-all2": "^6.1.1",
+    "typescript": "~5.2.0",
+    "vite": "^4.4.11",
+    "vue-tsc": "^1.8.19"
+  }
+}
diff --git a/.codesandbox/templates/vue/public/favicon.ico b/.codesandbox/templates/vue/public/favicon.ico
diff --git a/.codesandbox/templates/vue/sandbox.config.json b/.codesandbox/templates/vue/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "vue-cli"
+}
diff --git a/.codesandbox/templates/vue/src/App.vue b/.codesandbox/templates/vue/src/App.vue
@@ -0,0 +1,41 @@
+<template>
+  <canvas ref="canvas"></canvas>
+</template>
+
+<script>
+import * as fabric from 'fabric';
+
+export default {
+  name: 'Canvas',
+  mounted() {
+    // Do we need to use https://vuejs.org/api/reactivity-advanced.html#markraw?
+    const canvas = new fabric.Canvas(this.$refs.canvas, {
+      width: 500,
+      height: 500,
+    });
+
+    const textValue = 'fabric.js sandbox';
+    const text = new fabric.Textbox(textValue, {
+      originX: 'center',
+      splitByGrapheme: true,
+      width: 200,
+      top: 20,
+      styles: fabric.util.stylesFromArray(
+        [
+          {
+            style: {
+              fontWeight: 'bold',
+              fontSize: 64,
+            },
+            start: 0,
+            end: 9,
+          },
+        ],
+        textValue
+      ),
+    });
+    canvas.add(text);
+    canvas.centerObjectH(text);
+  },
+};
+</script>
diff --git a/.codesandbox/templates/vue/src/main.ts b/.codesandbox/templates/vue/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/.codesandbox/templates/vue/tsconfig.app.json b/.codesandbox/templates/vue/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/.codesandbox/templates/vue/tsconfig.json b/.codesandbox/templates/vue/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
diff --git a/.codesandbox/templates/vue/tsconfig.node.json b/.codesandbox/templates/vue/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
diff --git a/.codesandbox/templates/vue/vite.config.ts b/.codesandbox/templates/vue/vite.config.ts
@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -16,3 +16,7 @@ tasks:
   - name: Vanilla
     init: npm install
     command: npm start vanilla -- --no-watch
+
+  - name: Vue.js
+    init: gp sync-await deps
+    command: npm start vue -- --no-watch
diff --git a/.prettierignore b/.prettierignore
@@ -12,6 +12,7 @@ before_commit
 **/dist/
 /lib/
 /test/
+/website/
 .next/
 .parcel-cache/
 /docs/

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- CD(): vue template [#9502](https://github.com/fabricjs/fabric.js/pull/9502)
 - test(FabricObject): add a snapshot of the default values so that reordering and shuffling is verified. [#9492](https://github.com/fabricjs/fabric.js/pull/9492)
 - feat(FabricObject, Canvas) BREAKING: remove calculate true/false from the api. [#9483](https://github.com/fabricjs/fabric.js/pull/9483)
 - chore(): remove some Type assertions [#8950](https://github.com/fabricjs/fabric.js/pull/8950)
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ before_commit @@
     **/dist/
     /lib/
     /test/
+    /website/
     .next/
     .parcel-cache/
     /docs/
@@ Expand Down @@