Files
game-cards-poker-design/frontend/node_modules/fabric/scripts/updater-reference.mjs

67 lines
16 KiB
JavaScript
Raw Normal View History

import * as fabric from 'fabric/node';
/**
* Updates the fromObject function of a class to return a version that can restore old data
* with values of originX and originY that are different from 'center', 'center'
* Used to upgrade from fabric 6 to fabric 7
* @param originalFn the original fromObject function of an object,
* @param defaultOriginX optional default value for non exported originX,
* @param defaultOriginY optional default value for non exported originY,
* @returns a wrapped fromObject function for the object
*/
export const originUpdaterWrapper = (
originalFn,
defaultOriginX = 'left',
defaultOriginY = 'top',
) =>
async function (serializedObject, ...args) {
// we default to left and top because those are defaults before deprecation
const { originX = defaultOriginX, originY = defaultOriginY } =
serializedObject;
// and we do not want to pass those properties on the object anymore
delete serializedObject.originX;
delete serializedObject.originY;
const originalObject = await originalFn.call(
this,
serializedObject,
...args,
);
const actualPosition = new fabric.Point(
originalObject.left,
originalObject.top,
);
originalObject.setPositionByOrigin(actualPosition, originX, originY);
return originalObject;
};
const installOriginWrapperUpdater = (originX, originY) => {
// @ts-expect-error the _fromObject parameter could be instantiated differently
fabric.BaseFabricObject._fromObject = originUpdaterWrapper(
fabric.BaseFabricObject._fromObject,
originX,
originY,
);
// FabricImage and Group do not use _fromObject
fabric.FabricImage.fromObject = originUpdaterWrapper(
fabric.FabricImage.fromObject,
originX,
originY,
);
fabric.Group.fromObject = originUpdaterWrapper(
fabric.Group.fromObject,
originX,
originY,
);
};
const canvasWithObjects =
'{"version":"2.4.6","objects":[{"type":"Rect","version":"2.4.6","left":-8,"top":-11,"width":50,"height":50,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":50,"y2":0},"colorStops":[{"offset":0,"color":"rgb(109,67,57)","opacity":1},{"offset":1,"color":"rgb(51,167,218)","opacity":1}],"offsetX":0,"offsetY":0},"scaleX":16,"scaleY":12.18,"opacity":0.8},{"type":"Circle","version":"2.4.6","left":13.11,"top":130.77,"width":100,"height":100,"fill":"#0ec6ba","scaleX":0.57,"scaleY":0.57,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":360},{"type":"Triangle","version":"2.4.6","left":361.54,"top":236.84,"width":50,"height":50,"fill":"#b99503","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"Rect","version":"2.4.6","left":119.83,"top":97.98,"width":50,"height":50,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":0,"y2":50},"colorStops":[{"offset":0,"color":"rgb(12,101,114)","opacity":1},{"offset":1,"color":"rgb(206,164,109)","opacity":1}],"offsetX":0,"offsetY":0},"scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"Polygon","version":"2.4.6","left":511.04,"top":115.36,"width":385,"height":245,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":385,"y2":0},"colorStops":[{"offset":0,"color":"rgb(151,164,232)","opacity":1},{"offset":1,"color":"rgb(68,30,248)","opacity":1}],"offsetX":0,"offsetY":0},"scaleX":0.49,"scaleY":0.49,"angle":-24.56,"points":[{"x":185,"y":0},{"x":250,"y":100},{"x":385,"y":170},{"x":0,"y":245}]},{"type":"line","version":"2.4.6","left":200.83,"top":101.84,"width":150,"height":100,"stroke":"#d11594","scaleX":0.46,"scaleY":0.46,"x1":-75,"x2":75,"y1":-50,"y2":50},{"type":"Triangle","version":"2.4.6","left":178.97,"top":118.55,"width":50,"height":50,"fill":"#c560ff","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"Circle","version":"2.4.6","left":508.12,"top":23.41,"width":100,"height":100,"fill":"#033516","scaleX":0.62,"scaleY":0.62,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":360},{"type":"Rect","version":"2.4.6","left":108.25,"top":267.7,"width":50,"height":50,"fill":"#ceada8","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"Circle","version":"2.4.6","left":279.26,"top":124.34,"width":100,"height":100,"fill":"#439867","scaleX":0.52,"scaleY":0.52,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":360},{"type":"Triangle","version":"2.4.6","left":178.97,"top":213.7,"width":50,"height":50,"fill":"#a84956","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"line","version":"2.4.6","left":139.11,"top":162.27,"width":150,"height":100,"stroke":"#06150b","scaleX":0.49,"scaleY":0.49,"x1":-75,"x2":75,"y1":-50,"y2":50},{"type":"Polygon","version":"2.4.6","left":464.73,"top":108.91,"width":385,"height":245,"fill":"#78ef2e","stroke":"#4ea2d7","strokeWidth":3,"scaleX":0.54,"scaleY":0.54,"angle":33.18,"opacity":0.84,"points":[{"x":185,"y":0},{"x":250,"y":100},{"x":385,"y":170},{"x":0,"y":245}]},{"type":"line","version":"2.4.6","left":217.54,"top":289.56,"width":150,"height":100,"stroke":"#636d31","scaleX":0.98,"scaleY":0.98,"x1":-75,"x2":75,"y1":-50,"y2":50},{"type":"Triangle","version":"2.4.6","left":229.11,"top":162.27,"width":50,"height":50,"fill":"#21fdd6","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"Circle","version":"2.4.6","left":6.68,"top":52.98,"width":100,"height":100,"fill":"#aff4ab","scaleX":0.38,"scaleY":0.38,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":360},{"type":"Rect","version":"2.4.6","left":434.83,"top":22.12,"width":50,"height":50,"fill":"#0004f0","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"Circle","version":"2.4.6","left":509.4,"top":94.13,"width":100,"height":100,"fill":"#d3abcf","scaleX":0.65,"scaleY":0.65,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":360},{"type":"Triangle","version":"2.4.6","left":105.68,"top":333.27,"width":50,"height":50,"fill":"#dd30e6","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"line","version":"2.4.6","left":366.69,"top":209.9,"width":150,"height":100,"stroke":"#6f48ec","scaleX":0.98,"scaleY":0.98,"x1":-75,"x2":75,"y1":-50,"y2":50},{"type":"Polygon","version":"2.4.6","left":50.4,"top":138.92,"width":385,"height":245,"fi
installOriginWrapperUpdater();
const canvas = new fabric.Canvas();
await canvas.loadFromJSON(canvasWithObjects);
canvas.includeDefaultValues = false;
fabric.config.NUM_FRACTION_DIGITS = 4;
console.log(JSON.stringify(canvas.toJSON()));