ag-psd 16.0.0 → 17.0.0

package/src/imageResources.ts

@@ -12,7 +12,11 @@ import {
 } from './psdWriter';
 import { createCanvasFromData, createEnum, MOCK_HANDLERS } from './helpers';
 import { decodeString, encodeString } from './utf8';
-import { ESliceBGColorType, ESliceHorzAlign, ESliceOrigin, ESliceType, ESliceVertAlign, FractionDescriptor, parseTrackList, readVersionAndDescriptor, serializeTrackList, TimelineTrackDescriptor, TimeScopeDescriptor, writeVersionAndDescriptor } from './descriptor';
+import {
+	ESliceBGColorType, ESliceHorzAlign, ESliceOrigin, ESliceType, ESliceVertAlign, frac,
+	FractionDescriptor, parseTrackList, readVersionAndDescriptor, serializeTrackList, TimelineTrackDescriptor,
+	TimeScopeDescriptor, writeVersionAndDescriptor
+} from './descriptor';
 
 export interface ResourceHandler {
 	key: number;
@@ -660,16 +664,15 @@ addHandler(
 	target => target.timelineInformation !== undefined,
 	(reader, target, _, options) => {
 		const desc = readVersionAndDescriptor(reader) as TimelineInformationDescriptor;
-		// console.log('1075', require('util').inspect(desc, false, 99, true));
 
 		target.timelineInformation = {
 			enabled: desc.enab,
-			frameStep: desc.frameStep,
+			frameStep: frac(desc.frameStep),
 			frameRate: desc.frameRate,
-			time: desc.time,
-			duration: desc.duration,
-			workInTime: desc.workInTime,
-			workOutTime: desc.workOutTime,
+			time: frac(desc.time),
+			duration: frac(desc.duration),
+			workInTime: frac(desc.workInTime),
+			workOutTime: frac(desc.workOutTime),
 			repeats: desc.LCnt,
 			hasMotion: desc.hasMotion,
 			globalTracks: parseTrackList(desc.globalTrackList, !!options.logMissingFeatures),
@@ -681,10 +684,10 @@ addHandler(
 				muted: g.muted,
 				audioClips: g.audioClipList.map(({ clipID, timeScope, muted, audioLevel, frameReader }) => ({
 					id: clipID,
-					start: timeScope.Strt,
-					duration: timeScope.duration,
-					inTime: timeScope.inTime,
-					outTime: timeScope.outTime,
+					start: frac(timeScope.Strt),
+					duration: frac(timeScope.duration),
+					inTime: frac(timeScope.inTime),
+					outTime: frac(timeScope.outTime),
 					muted: muted,
 					audioLevel: audioLevel,
 					frameReader: {
@@ -745,7 +748,6 @@ addHandler(
 			hasMotion: timeline.hasMotion,
 		};
 
-		// console.log('WRITE:1075', require('util').inspect(desc, false, 99, true));
 		writeVersionAndDescriptor(writer, '', 'null', desc, 'anim');
 	},
 );
@@ -767,7 +769,6 @@ addHandler(
 	target => target.sheetDisclosure !== undefined,
 	(reader, target) => {
 		const desc = readVersionAndDescriptor(reader) as SheetDisclosureDescriptor;
-		// console.log('1076', require('util').inspect(desc, false, 99, true));
 
 		target.sheetDisclosure = {};
 
@@ -930,7 +931,6 @@ addHandler(
 					bounds: { top, left, bottom, right },
 					backgroundColorType, backgroundColor: { r, g, b, a },
 				});
-				// console.log(require('util').inspect(slices[slices.length - 1], false, 99, true));
 			}
 			const desc = readVersionAndDescriptor(reader) as SlicesDesc;
 			desc.slices.forEach(d => {
@@ -942,12 +942,8 @@ addHandler(
 					slice.rightOutset = d.rightOutset;
 				}
 			});
-
-			// console.log(require('util').inspect(desc, false, 99, true));
-			// console.log(require('util').inspect(target.slices, false, 99, true));
 		} else if (version == 7 || version == 8) {
 			const desc = readVersionAndDescriptor(reader) as SlicesDesc7;
-			// console.log(require('util').inspect(desc, false, 99, true));
 
 			if (!target.slices) target.slices = [];
 			target.slices.push({
@@ -1247,7 +1243,6 @@ addHandler(
 	target => target.pathSelectionState !== undefined,
 	(reader, target, _left) => {
 		const desc: Descriptor1088 = readVersionAndDescriptor(reader);
-		// console.log(require('util').inspect(desc, false, 99, true));
 		target.pathSelectionState = desc['null'];
 	},
 	(writer, target) => {

package/src/psd.ts

@@ -674,43 +674,458 @@ export interface LinkedFile {
 	assetLockedState?: number;
 }
 
-export interface PlacedLayerPuppetFilter {
-	rigidType: boolean;
-	bounds: { x: number; y: number; }[];
-	puppetShapeList: {
+type FilterVariant = {
+	type: 'average' | 'blur' | 'blur more';
+} | {
+	type: 'box blur';
+	filter: {
+		radius: UnitsValue;
+	};
+} | {
+	type: 'gaussian blur';
+	filter: {
+		radius: UnitsValue;
+	};
+} | {
+	type: 'motion blur';
+	filter: {
+		angle: number; // in degrees
+		distance: UnitsValue;
+	};
+} | {
+	type: 'radial blur';
+	filter: {
+		amount: number;
+		method: 'spin' | 'zoom';
+		quality: 'draft' | 'good' | 'best';
+	};
+} | {
+	type: 'shape blur';
+	filter: {
+		radius: UnitsValue;
+		customShape: { name: string; id: string };
+	};
+} | {
+	type: 'smart blur';
+	filter: {
+		radius: number;
+		threshold: number;
+		quality: 'low' | 'medium' | 'high';
+		mode: 'normal' | 'edge only' | 'overlay edge';
+	};
+} | {
+	type: 'surface blur';
+	filter: {
+		radius: UnitsValue;
+		threshold: number;
+	};
+} | {
+	type: 'displace';
+	filter: {
+		horizontalScale: number;
+		verticalScale: number;
+		displacementMap: 'stretch to fit' | 'tile';
+		undefinedAreas: 'wrap around' | 'repeat edge pixels';
+		displacementFile: {
+			signature: string;
+			path: string;
+		};
+	};
+} | {
+	type: 'pinch';
+	filter: {
+		amount: number;
+	};
+} | {
+	type: 'polar coordinates';
+	filter: {
+		conversion: 'rectangular to polar' | 'polar to rectangular';
+	};
+} | {
+	type: 'ripple';
+	filter: {
+		amount: number;
+		size: 'small' | 'medium' | 'large';
+	};
+} | {
+	type: 'shear';
+	filter: {
+		shearPoints: { x: number; y: number }[];
+		shearStart: number;
+		shearEnd: number;
+		undefinedAreas: 'wrap around' | 'repeat edge pixels';
+	};
+} | {
+	type: 'spherize';
+	filter: {
+		amount: number;
+		mode: 'normal' | 'horizontal only' | 'vertical only';
+	};
+} | {
+	type: 'twirl';
+	filter: {
+		angle: number; // degrees
+	};
+} | {
+	type: 'wave';
+	filter: {
+		numberOfGenerators: number;
+		type: 'sine' | 'triangle' | 'square';
+		wavelength: { min: number; max: number };
+		amplitude: { min: number; max: number };
+		scale: { x: number; y: number };
+		randomSeed: number;
+		undefinedAreas: 'wrap around' | 'repeat edge pixels';
+	};
+} | {
+	type: 'zigzag';
+	filter: {
+		amount: number;
+		ridges: number;
+		style: 'around center' | 'out from center' | 'pond ripples';
+	};
+} | {
+	type: 'add noise';
+	filter: {
+		amount: number; // 0..1
+		distribution: 'uniform' | 'gaussian';
+		monochromatic: boolean;
+		randomSeed: number;
+	};
+} | {
+	type: 'despeckle';
+} | {
+	type: 'dust and scratches';
+	filter: {
+		radius: number; // pixels
+		threshold: number; // levels
+	};
+} | {
+	type: 'median';
+	filter: {
+		radius: UnitsValue;
+	};
+} | {
+	type: 'reduce noise';
+	filter: {
+		preset: string;
+		removeJpegArtifact: boolean;
+		reduceColorNoise: number; // 0..1
+		sharpenDetails: number; // 0..1
+		channelDenoise: {
+			channels: ('red' | 'green' | 'blue' | 'composite')[];
+			amount: number;
+			preserveDetails?: number; // percent
+		}[];
+	};
+} | {
+	type: 'color halftone';
+	filter: {
+		radius: number; // pixels
+		angle1: number; // degrees
+		angle2: number; // degrees
+		angle3: number; // degrees
+		angle4: number; // degrees
+	};
+} | {
+	type: 'crystallize';
+	filter: {
+		cellSize: number;
+		randomSeed: number;
+	};
+} | {
+	type: 'facet' | 'fragment';
+} | {
+	type: 'mezzotint';
+	filter: {
+		type: 'fine dots' | 'medium dots' | 'grainy dots' | 'coarse dots' | 'short lines' | 'medium lines' | 'long lines' | 'short strokes' | 'medium strokes' | 'long strokes';
+		randomSeed: number;
+	};
+} | {
+	type: 'mosaic';
+	filter: {
+		cellSize: UnitsValue;
+	};
+} | {
+	type: 'pointillize';
+	filter: {
+		cellSize: number;
+		randomSeed: number;
+	};
+} | {
+	type: 'clouds';
+	filter: {
+		randomSeed: number;
+	};
+} | {
+	type: 'difference clouds';
+	filter: {
+		randomSeed: number;
+	};
+} | {
+	type: 'fibers';
+	filter: {
+		variance: number;
+		strength: number;
+		randomSeed: number;
+	};
+} | {
+	type: 'lens flare';
+	filter: {
+		brightness: number; // percent
+		position: { x: number; y: number; };
+		lensType: '50-300mm zoom' | '32mm prime' | '105mm prime' | 'movie prime';
+	};
+} /*| {
+	type: 'lighting effects';
+	filter: {
+		lights: Light3D;
+		cameraPosition: Position3D;
+		gloss: number;
+		metallic: number;
+		exposure: number;
+		ambience: number;
+		ambientColor: Color;
+		// TODO: BmpA, BmpC / Hotspot / color ?
+		width: number;
+		height: number;
+	};
+}*/ | {
+	type: 'sharpen' | 'sharpen edges' | 'sharpen more';
+} | {
+	type: 'smart sharpen';
+	filter: {
+		amount: number; // 0..1
+		radius: UnitsValue;
+		threshold: number;
+		angle: number; // degrees
+		moreAccurate: boolean;
+		blur: 'gaussian blur' | 'lens blur' | 'motion blur';
+		preset: string;
+		shadow: {
+			fadeAmount: number; // 0..1
+			tonalWidth: number; // 0..1
+			radius: number; // px
+		};
+		highlight: {
+			fadeAmount: number; // 0..1
+			tonalWidth: number; // 0..1
+			radius: number; // px
+		};
+	};
+} | {
+	type: 'unsharp mask';
+	filter: {
+		amount: number; // 0..1
+		radius: UnitsValue;
+		threshold: number; // levels
+	};
+} | {
+	type: 'diffuse';
+	filter: {
+		mode: 'normal' | 'darken only' | 'lighten only' | 'anisotropic';
+		randomSeed: number;
+	};
+} | {
+	type: 'emboss';
+	filter: {
+		angle: number; // degrees
+		height: number; // pixels
+		amount: number; // percent
+	};
+} | {
+	type: 'extrude';
+	filter: {
+		type: 'blocks' | 'pyramids';
+		size: number; // pixels
+		depth: number;
+		depthMode: 'random' | 'level-based';
+		randomSeed: number;
+		solidFrontFaces: boolean;
+		maskIncompleteBlocks: boolean;
+	};
+} | {
+	type: 'find edges' | 'solarize';
+} | {
+	type: 'tiles';
+	filter: {
+		numberOfTiles: number;
+		maximumOffset: number; // percent
+		fillEmptyAreaWith: 'background color' | 'foreground color' | 'inverse image' | 'unaltered image';
+		randomSeed: number;
+	};
+} | {
+	type: 'trace contour';
+	filter: {
+		level: number;
+		edge: 'lower' | 'upper';
+	};
+} | {
+	type: 'wind';
+	filter: {
+		method: 'wind' | 'blast' | 'stagger';
+		direction: 'left' | 'right';
+	};
+} | {
+	type: 'de-interlace';
+	filter: {
+		eliminate: 'odd lines' | 'even lines';
+		newFieldsBy: 'duplication' | 'interpolation';
+	};
+} | {
+	type: 'ntsc colors';
+} | {
+	type: 'custom';
+	filter: {
+		scale: number;
+		offset: number;
+		matrix: number[];
+	};
+} | {
+	type: 'high pass' | 'maximum' | 'minimum';
+	filter: {
+		radius: UnitsValue;
+	};
+} | {
+	type: 'offset';
+	filter: {
+		horizontal: number; // pixels
+		vertical: number; // pixels
+		undefinedAreas: 'set to transparent' | 'repeat edge pixels' | 'wrap around';
+	};
+} | {
+	type: 'puppet';
+	filter: {
 		rigidType: boolean;
-		// VrsM: number;
-		// VrsN: number;
-		originalVertexArray: { x: number; y: number; }[];
-		deformedVertexArray: { x: number; y: number; }[];
-		indexArray: number[];
-		pinOffsets: { x: number; y: number; }[];
-		posFinalPins: { x: number; y: number; }[];
-		pinVertexIndices: number[];
-		selectedPin: number[];
-		pinPosition: { x: number; y: number; }[];
-		pinRotation: number[]; // in degrees
-		pinOverlay: boolean[];
-		pinDepth: number[];
-		meshQuality: number;
-		meshExpansion: number;
-		meshRigidity: number;
-		imageResolution: number;
-		meshBoundaryPath: {
-			pathComponents: {
-				shapeOperation: string;
-				paths: {
-					closed: boolean;
-					points: {
-						anchor: { x: UnitsValue; y: UnitsValue; };
-						forward: { x: UnitsValue; y: UnitsValue; };
-						backward: { x: UnitsValue; y: UnitsValue; };
-						smooth: boolean;
+		bounds: { x: number; y: number; }[];
+		puppetShapeList: {
+			rigidType: boolean;
+			// VrsM: number;
+			// VrsN: number;
+			originalVertexArray: { x: number; y: number; }[];
+			deformedVertexArray: { x: number; y: number; }[];
+			indexArray: number[];
+			pinOffsets: { x: number; y: number; }[];
+			posFinalPins: { x: number; y: number; }[];
+			pinVertexIndices: number[];
+			selectedPin: number[];
+			pinPosition: { x: number; y: number; }[];
+			pinRotation: number[]; // in degrees
+			pinOverlay: boolean[];
+			pinDepth: number[];
+			meshQuality: number;
+			meshExpansion: number;
+			meshRigidity: number;
+			imageResolution: number;
+			meshBoundaryPath: {
+				pathComponents: {
+					shapeOperation: string;
+					paths: {
+						closed: boolean;
+						points: {
+							anchor: { x: UnitsValue; y: UnitsValue; };
+							forward: { x: UnitsValue; y: UnitsValue; };
+							backward: { x: UnitsValue; y: UnitsValue; };
+							smooth: boolean;
+						}[];
 					}[];
 				}[];
-			}[];
-		};
-	}[];
+			};
+		}[];
+	};
+} | {
+	type: 'oil paint plugin';
+	filter: {
+		name: string;
+		gpu: boolean;
+		lighting: boolean;
+		// FPth ???
+		parameters: {
+			name: string;
+			value: number;
+		}[];
+	};
+} /*| {
+	type: 'lens correction';
+	filter: {
+		profile: string;
+		
+	};
+}*//* | {
+	type: 'adaptive wide angle';
+	filter: {
+		correction: 'fisheye' | 'perspective' | 'auto' | 'full spherical';
+		focalLength: number;
+		cropFactor: number;
+		imageScale: number;
+		imageX: number;
+		imageY: number;
+	};
+}*//* | {
+	type: 'filter gallery';
+	filter: {
+		filter: 'colored pencil';
+		pencilWidth: number;
+		strokePressure: number;
+		paperBrightness: number;
+	} | ...;
+}*/ | {
+	type: 'hsb/hsl';
+	filter: {
+		inputMode: 'rgb' | 'hsb' | 'hsl';
+		rowOrder: 'rgb' | 'hsb' | 'hsl';
+	};
+} | {
+	type: 'oil paint';
+	filter: {
+		lightingOn: boolean;
+		stylization: number;
+		cleanliness: number;
+		brushScale: number;
+		microBrush: number;
+		lightDirection: number; // degrees
+		specularity: number;
+	};
+} | {
+	type: 'liquify';
+	filter: {
+		liquifyMesh: Uint8Array;
+	};
+};
+
+/*
+export interface Position3D {
+	x: number;
+	y: number;
+	z: number;
+	angleX: number;
+	angleY: number;
+	angleZ: number;
+}
+
+export interface Light3D {
+	name: string;
+	type: 'point' | 'spot' | 'infinite';
+	red: number; // 0..1
+	green: number; // 0..1
+	blue: number; // 0..1
+	// TODO: hots
+	falloff: number;
+	shadow: number;
+	// TODO: attn
+	// TODO: attt atta, attb, attc, orad, irad, mult, Type
+	// ...
+}
+*/
+
+export type Filter = FilterVariant & {
+	name: string;
+	opacity: number;
+	blendMode: BlendMode;
+	enabled: boolean;
+	hasOptions: boolean;
+	foregroundColor: Color;
+	backgroundColor: Color;
 }
 
 export interface PlacedLayerFilter {
@@ -719,17 +1134,7 @@ export interface PlacedLayerFilter {
 	maskEnabled: boolean;
 	maskLinked: boolean;
 	maskExtendWithWhite: boolean;
-	list: {
-		id: number;
-		name: string;
-		opacity: number;
-		blendMode: BlendMode;
-		enabled: boolean;
-		hasOptions: boolean;
-		foregroundColor: Color;
-		backgroundColor: Color;
-		filter: PlacedLayerPuppetFilter | {};
-	}[];
+	list: Filter[];
 }
 
 export type PlacedLayerType = 'unknown' | 'vector' | 'raster' | 'image stack';
@@ -953,7 +1358,22 @@ export interface LayerAdditionalInfo {
 		unifyLayerVisibility?: boolean;
 	};
 	timeline?: Timeline;
-	filterEffects?: any;
+	filterEffectsMasks?: {
+		id: string;
+		top: number;
+		left: number;
+		bottom: number;
+		right: number;
+		depth: number;
+		channels: ({
+			compressionMode: number;
+			data: Uint8Array;
+		} | undefined)[];
+		extra?: {
+			compressionMode: number;
+			data: Uint8Array;
+		};
+	}[];
 
 	// Base64 encoded raw EngineData, currently just kept in original state to support
 	// loading and modifying PSD file without breaking text layers.
@@ -1165,6 +1585,7 @@ export interface Layer extends LayerAdditionalInfo {
 	blendMode?: BlendMode;
 	opacity?: number;
 	transparencyProtected?: boolean;
+	effectsOpen?: boolean; // effects/filters panel is expanded
 	hidden?: boolean;
 	clipping?: boolean;
 	canvas?: HTMLCanvasElement;

package/src/psdReader.ts

@@ -67,6 +67,11 @@ export function readUint16(reader: PsdReader) {
 	return reader.view.getUint16(reader.offset - 2, false);
 }
 
+export function readUint16LE(reader: PsdReader) {
+	reader.offset += 2;
+	return reader.view.getUint16(reader.offset - 2, true);
+}
+
 export function readInt32(reader: PsdReader) {
 	reader.offset += 4;
 	return reader.view.getInt32(reader.offset - 4, false);
@@ -153,6 +158,20 @@ export function readUnicodeStringWithLength(reader: PsdReader, length: number) {
 	return text;
 }
 
+export function readUnicodeStringWithLengthLE(reader: PsdReader, length: number) {
+	let text = '';
+
+	while (length--) {
+		const value = readUint16LE(reader);
+
+		if (value || length > 0) { // remove trailing \0
+			text += String.fromCharCode(value);
+		}
+	}
+
+	return text;
+}
+
 export function readAsciiString(reader: PsdReader, length: number) {
 	let text = '';
 
@@ -379,15 +398,15 @@ function readLayerRecord(reader: PsdReader, psd: Psd, options: ReadOptionsExt) {
 	const channels: ChannelInfo[] = [];
 
 	for (let i = 0; i < channelCount; i++) {
-		let channelID = readInt16(reader) as ChannelID;
-		let channelLength = readUint32(reader);
+		let id = readInt16(reader) as ChannelID;
+		let length = readUint32(reader);
 
 		if (options.large) {
-			if (channelLength !== 0) throw new Error('Sizes larger than 4GB are not supported');
-			channelLength = readUint32(reader);
+			if (length !== 0) throw new Error('Sizes larger than 4GB are not supported');
+			length = readUint32(reader);
 		}
 
-		channels.push({ id: channelID, length: channelLength });
+		channels.push({ id, length });
 	}
 
 	checkSignature(reader, '8BIM');
@@ -401,11 +420,11 @@ function readLayerRecord(reader: PsdReader, psd: Psd, options: ReadOptionsExt) {
 	const flags = readUint8(reader);
 	layer.transparencyProtected = (flags & 0x01) !== 0;
 	layer.hidden = (flags & 0x02) !== 0;
+	if (flags & 0x20) layer.effectsOpen = true;
 	// 0x04 - obsolete
 	// 0x08 - 1 for Photoshop 5.0 and later, tells if bit 4 has useful information
 	// 0x10 - pixel data irrelevant to appearance of document
-	// 0x20 - ???
-	// if (flags & 0x20) (layer as any)._2 = true; // TEMP !!!!
+	// 0x20 - effects/filters panel is expanded
 
 	skipBytes(reader, 1);