CPImage.j

Go to the documentation of this file.

/*
 * CPImage.j
 * AppKit
 *
 * Created by Francisco Tolmasky.
 * Copyright 2008, 280 North, Inc.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
 */




@protocol CPImageDelegate <CPObject>

@optional
- (void)imageDidLoad:(CPImage)anImage;
- (void)imageDidError:(CPImage)anImage;
- (void)imageDidAbort:(CPImage)anImage;

@end

var CPImageDelegate_imageDidLoad_   = 1 << 1,
    CPImageDelegate_imageDidError_  = 1 << 2,
    CPImageDelegate_imageDidAbort_  = 1 << 3;

CPImageLoadStatusInitialized    = 0;
CPImageLoadStatusLoading        = 1;
CPImageLoadStatusCompleted      = 2;
CPImageLoadStatusCancelled      = 3;
CPImageLoadStatusInvalidData    = 4;
CPImageLoadStatusUnexpectedEOF  = 5;
CPImageLoadStatusReadError      = 6;

CPImageDidLoadNotification      = @"CPImageDidLoadNotification";

// Image Names
CPImageNameColorPanel               = @"CPImageNameColorPanel";
CPImageNameColorPanelHighlighted    = @"CPImageNameColorPanelHighlighted";

var imagesForNames = { },
    AppKitImageForNames = { },
    ImageDescriptionFormat = "%s {\n   filename: \"%s\",\n   size: { width:%f, height:%f }\n}";

AppKitImageForNames[CPImageNameColorPanel]              = CGSizeMake(26.0, 29.0);
AppKitImageForNames[CPImageNameColorPanelHighlighted]   = CGSizeMake(26.0, 29.0);

function CPImageInBundle()
{
    var filename = arguments[0],
        size = nil,
        bundle = nil;

    if (typeof(arguments[1]) === "number")
    {
        if (arguments[1] !== nil && arguments[1] !== undefined)
            size = CGSizeMake(arguments[1], arguments[2]);

        bundle = arguments[3];
    }
    else if (typeof(arguments[1]) === "object")
    {
        size = arguments[1];
        bundle = arguments[2];
    }

    if (!bundle)
        bundle = [CPBundle mainBundle];

    if (size)
        return [[CPImage alloc] initWithContentsOfFile:[bundle pathForResource:filename] size:size];

    return [[CPImage alloc] initWithContentsOfFile:[bundle pathForResource:filename]];
}

function CPAppKitImage(aFilename, aSize)
{
    return CPImageInBundle(aFilename, aSize, [CPBundle bundleForClass:[CPView class]]);
}

@implementation CPImage : CPObject
{
    CGSize                  _size;
    CPString                _filename;
    CPString                _name;

    id <CPImageDelegate>    _delegate;
    unsigned                _loadStatus;
    unsigned                _implementedDelegateMethods;

    Image                   _image;
}

- (id)init
{
    return [self initByReferencingFile:@"" size:CGSizeMake(-1, -1)];
}

- (id)initByReferencingFile:(CPString)aFilename size:(CGSize)aSize
{
    // Quietly return nil like in Cocoa, rather than crashing later.
    if (aFilename === undefined || aFilename === nil)
        return nil;

    self = [super init];

    if (self)
    {
        _size = CGSizeMakeCopy(aSize);
        _filename = aFilename;
        _loadStatus = CPImageLoadStatusInitialized;
    }

    return self;
}

- (id)initWithContentsOfFile:(CPString)aFilename size:(CGSize)aSize
{
    self = [self initByReferencingFile:aFilename size:aSize];

    if (self)
        [self load];

    return self;
}

- (id)initWithContentsOfFile:(CPString)aFilename
{
    self = [self initByReferencingFile:aFilename size:CGSizeMake(-1, -1)];

    if (self)
        [self load];

    return self;
}

- (id)initWithData:(CPData)someData
{
    var base64 = [someData base64],
        type = [base64 hasPrefix:@"/9j/4AAQSkZJRgABAQEASABIAAD/"] ? @"jpg" : @"png",
        dataURL = "data:image/" + type + ";base64," + base64;

    return [self initWithContentsOfFile:dataURL];
}

- (CPString)filename
{
    return _filename;
}

- (CPData)data
{
#if PLATFORM(DOM)
    var dataURL;

    if ([_filename hasPrefix:@"data:image"])
        dataURL = _filename;
    else if (CPFeatureIsCompatible(CPHTMLCanvasFeature))
    {
        var canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d");

        canvas.width = _image.width;
        canvas.height = _image.height;

        ctx.drawImage(_image, 0, 0);

        dataURL = canvas.toDataURL("image/png");
    }
    else
        return nil;

    var base64 = dataURL.replace(/^data:image\/png;base64,/, "");
    return [CPData dataWithBase64:base64];
#endif
}

- (void)setSize:(CGSize)aSize
{
    _size = CGSizeMakeCopy(aSize);
}

- (CGSize)size
{
    return CGSizeMakeCopy(_size);
}

+ (id)imageNamed:(CPString)aName
{
    var image = imagesForNames[aName];

    if (image)
        return image;

    var imageOrSize = AppKitImageForNames[aName];

    if (!imageOrSize)
        return nil;

    if (!imageOrSize.isa)
    {
        imageOrSize = CPAppKitImage("CPImage/" + aName + ".png", imageOrSize);

        [imageOrSize setName:aName];

        AppKitImageForNames[aName] = imageOrSize;
    }

    return imageOrSize;
}

- (BOOL)setName:(CPString)aName
{
    if (_name === aName)
        return YES;

    if (imagesForNames[aName])
        return NO;

    _name = aName;

    imagesForNames[aName] = self;

    return YES;
}

- (CPString)name
{
    return _name;
}

- (Image)image
{
    return _image;
}

- (void)setDelegate:(id <CPImageDelegate>)aDelegate
{
    if (_delegate === aDelegate)
        return;

    _delegate = aDelegate;
    _implementedDelegateMethods = 0;

    if ([_delegate respondsToSelector:@selector(imageDidLoad:)])
        _implementedDelegateMethods |= CPImageDelegate_imageDidLoad_;

    if ([_delegate respondsToSelector:@selector(imageDidError:)])
        _implementedDelegateMethods |= CPImageDelegate_imageDidError_;

    if ([_delegate respondsToSelector:@selector(imageDidAbort:)])
        _implementedDelegateMethods |= CPImageDelegate_imageDidAbort_;
}

- (id)delegate
{
    return _delegate;
}

- (unsigned)loadStatus
{
    return _loadStatus;
}

- (void)load
{
    if (_loadStatus == CPImageLoadStatusLoading || _loadStatus == CPImageLoadStatusCompleted)
        return;

    _loadStatus = CPImageLoadStatusLoading;

#if PLATFORM(DOM)
    _image = new Image();

    var isSynchronous = YES;

    // FIXME: We need a better/performance way of doing this.
    _image.onload = function ()
        {
            if (isSynchronous)
                window.setTimeout(function() { [self _imageDidLoad]; }, 0);
            else
            {
                [self _imageDidLoad];
                [[CPRunLoop currentRunLoop] limitDateForMode:CPDefaultRunLoopMode];
            }
            [self _derefFromImage];
        };

    _image.onerror = function ()
        {
            if (isSynchronous)
                window.setTimeout(function() { [self _imageDidError]; }, 0);
            else
            {
                [self _imageDidError];
                [[CPRunLoop currentRunLoop] limitDateForMode:CPDefaultRunLoopMode];
            }
            [self _derefFromImage];
        };

    _image.onabort = function ()
        {
            if (isSynchronous)
                window.setTimeout(function() { [self _imageDidAbort]; }, 0);
            else
            {
                [self _imageDidAbort];
                [[CPRunLoop currentRunLoop] limitDateForMode:CPDefaultRunLoopMode];
            }
            [self _derefFromImage];
        };

    _image.src = _filename;

    // onload and friends may fire after this point but BEFORE the end of the run loop,
    // crazy, I know. So don't set isSynchronous here, rather wait a bit longer.
    window.setTimeout(function() { isSynchronous = NO; }, 0);
#endif
}

- (BOOL)isSingleImage
{
    return YES;
}

- (BOOL)isThreePartImage
{
    return NO;
}

- (BOOL)isNinePartImage
{
    return NO;
}

- (CPString)description
{
    var filename = [self filename],
        size = [self size];

    if (filename.indexOf("data:") === 0)
    {
        var index = filename.indexOf(",");

        if (index > 0)
            filename = [CPString stringWithFormat:@"%s,%s...%s", filename.substr(0, index), filename.substr(index + 1, 10), filename.substr(filename.length - 10)];
        else
            filename = "data:<unknown type>";
    }

    return [CPString stringWithFormat:ImageDescriptionFormat, [super description], filename, size.width, size.height];
}

/* @ignore */
- (void)_derefFromImage
{
    _image.onload = null;
    _image.onerror = null;
    _image.onabort = null;
}

/* @ignore */
- (void)_imageDidLoad
{
    _loadStatus = CPImageLoadStatusCompleted;

    // FIXME: IE is wrong on image sizes????
    if (!_size || (_size.width == -1 && _size.height == -1))
        _size = CGSizeMake(_image.width, _image.height);

    [[CPNotificationCenter defaultCenter]
        postNotificationName:CPImageDidLoadNotification
        object:self];

    if (_implementedDelegateMethods & CPImageDelegate_imageDidLoad_)
        [_delegate imageDidLoad:self];
}

/* @ignore */
- (void)_imageDidError
{
    _loadStatus = CPImageLoadStatusReadError;

    if (_implementedDelegateMethods & CPImageDelegate_imageDidError_)
        [_delegate imageDidError:self];
}

/* @ignore */
- (void)_imageDidAbort
{
    _loadStatus = CPImageLoadStatusCancelled;

    if (_implementedDelegateMethods & CPImageDelegate_imageDidAbort_)
        [_delegate imageDidAbort:self];
}

@end

#pragma mark -
#pragma mark CSS Theming

// The code below adds support for CSS theming with 100% compatibility with current theming system.
// The idea is to extend CPImage (and CPColor) with CSS components and adapt low level UI components to
// support this new kind of CPColor/CPImage. See CPImageView, CPView and _CPImageAndTextView.
//
// To create a CPImage that uses CSS, simply use the new class method :
// + (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary size:(CGSize)aSize
// where beforeDictionary & afterDictionary are related to ::before & ::after pseudo-elements.
// If you don't need them, just use the simplified class method :
// + (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary size:(CGSize)aSize
//
// Examples :
// regularImageNormal = [CPImage imageWithCSSDictionary:@{
//                                                        @"border-color": A3ColorActiveBorder,
//                                                        @"border-style": @"solid",
//                                                        @"border-width": @"1px",
//                                                        @"border-radius": @"50%",
//                                                        @"box-sizing": @"border-box",
//                                                        @"background-color": A3ColorBackgroundWhite,
//                                                        @"transition-duration": @"0.35s",
//                                                        @"transition-property": @"all",
//                                                        @"transition-timing-function": @"ease"
//                                                        }
//                                                 size:CGSizeMake(16,16)];
//
// imageSearch = [CPImage imageWithCSSDictionary:@{
//                                                 @"background-image": @"url(%%packed.png)",
//                                                 @"background-position": @"-16px -32px",
//                                                 @"background-repeat": @"no-repeat",
//                                                 @"background-size": @"100px 400px"
//                                                 }
//                                          size:CGSizeMake(16,16)];
//
// Remark : Please note the special URL of the background image used in this example : url(%%packed.png)
//          During theme loading, "%%" will be replaced by the path to the theme blend resources folder.
//          Typically, a CSS theme will use some (rare) images all packed together in a single image resource (see packed.png in Aristo3 theme)
//
//          Also, please note that if you don't use one of the CSS components, you can either set it to nil (best solution) or to an empty dictionary, like :
//          aCssImage = [CPImage imageWithCSSDictionary:@{} beforeDictionary:nil afterDictionary:@{ ... }];
//
// You can use -(BOOL)isCSSBased to determine how to cope with it in your code.
// -(BOOL)hasCSSDictionary, -(BOOL)hasCSSBeforeDictionary and -(BOOL)hasCSSAfterDictionary are convience methods you can use.
//
// Remark : -(DOMElement)applyCSSImageForView is meant to be used by low level UI widgets (like CPImageView and _CPImageAndTextView) to implement CSS theme support.
//
// In some circumstances, you may have to clear a CSS image. You can do this easily by replacing your current image with the special dummy empty CSS image :
// [CPImage dummyCSSImageOfSize:CGSizeMake(someWidth, someHeight)]

@implementation CPImage (CSSTheming)
{
    CPDictionary            _cssDictionary;
    CPDictionary            _cssBeforeDictionary;
    CPDictionary            _cssAfterDictionary;
}

+ (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary size:(CGSize)aSize
{
    return [[CPImage alloc] initWithCSSDictionary:aDictionary beforeDictionary:nil afterDictionary:nil size:aSize];
}

+ (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary size:(CGSize)aSize
{
    return [[CPImage alloc] initWithCSSDictionary:aDictionary beforeDictionary:beforeDictionary afterDictionary:afterDictionary size:aSize];
}

+ (CPImage)dummyCSSImageOfSize:(CGSize)aSize
{
    // This is used to clear a previous CSS image
    return [[CPImage alloc] initWithCSSDictionary:@{} beforeDictionary:nil afterDictionary:nil size:aSize];
}

- (id)initWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary size:(CGSize)aSize
{
    self = [super init];

    if (self)
    {
        _size = CGSizeMakeCopy(aSize);
        _filename = @"CSS image";
        _loadStatus = CPImageLoadStatusCompleted;
        _cssDictionary = aDictionary;
        _cssBeforeDictionary = beforeDictionary;
        _cssAfterDictionary = afterDictionary;
    }

    return self;
}

- (BOOL)isCSSBased
{
    return !!(_cssDictionary || _cssBeforeDictionary || _cssAfterDictionary);
}

- (BOOL)hasCSSDictionary
{
    return ([_cssDictionary count] > 0);
}

- (BOOL)hasCSSBeforeDictionary
{
    return ([_cssBeforeDictionary count] > 0);
}

- (BOOL)hasCSSAfterDictionary
{
    return ([_cssAfterDictionary count] > 0);
}

- (DOMElement)applyCSSImageForView:(CPView)aView onDOMElement:(DOMElement)aDOMElement styleNode:(DOMElement)aStyleNode previousState:(CPArrayRef)aPreviousStateRef
{
#if PLATFORM(DOM)
    // First, restore previous CSS styling before applying the new one

    var aPreviousState = @deref(aPreviousStateRef);

    for (var i = 0, count = aPreviousState.length; i < count; i++)
        aDOMElement.style[aPreviousState[i][0]] = aPreviousState[i][1];

    aPreviousState = @[];

    // Then apply new CSS styling

    [_cssDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
     {
         [aPreviousState addObject:@[aKey, aDOMElement.style[aKey]]];
         aDOMElement.style[aKey] = anObject;
     }];

    if (_cssBeforeDictionary || _cssAfterDictionary)
    {
        // We need to create a unique class name

        var styleClassName = @".CP" + [aView UID],
        styleContent = @"";

        if (_cssBeforeDictionary)
        {
            styleContent += styleClassName + @"::before { ";

            [_cssBeforeDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
             {
                 styleContent += aKey + ": " + anObject + "; ";
             }];

            styleContent += "} ";
        }

        if (_cssAfterDictionary)
        {
            styleContent += styleClassName + @"::after { ";

            [_cssAfterDictionary enumerateKeysAndObjectsUsingBlock:function(aKey, anObject, stop)
             {
                 styleContent += aKey + ": " + anObject + "; ";
             }];

            styleContent += "} ";
        }

        var styleDescription = document.createTextNode(styleContent);

        if (!aStyleNode)
        {
            aStyleNode = document.createElement("style");

            aView._DOMElement.insertBefore(aStyleNode, aView._DOMElement.firstChild);

            aStyleNode.appendChild(styleDescription);
        }
        else
        {
            aStyleNode.replaceChild(styleDescription, aStyleNode.firstChild);
        }

        [aView setDOMClassName:@"CP"+[aView UID]];
    }
    else
    {
        // no before/after so remove aStyleNode if existing

        if (aStyleNode)
        {
            aView._DOMElement.removeChild(aStyleNode);
            aStyleNode = nil;
        }
    }


    // Return actualised values

    @deref(aPreviousStateRef) = aPreviousState;

    return aStyleNode;
#endif
}

@end

var CPImageCSSDictionaryKey       = @"CPImageCSSDictionaryKey",
    CPImageCSSBeforeDictionaryKey = @"CPImageCSSBeforeDictionaryKey",
    CPImageCSSAfterDictionaryKey  = @"CPImageCSSAfterDictionaryKey";

#pragma mark -

@implementation CPImage (CPCoding)

- (id)initWithCoder:(CPCoder)aCoder
{
    if ([aCoder containsValueForKey:CPImageCSSDictionaryKey])
        return [self initWithCSSDictionary:[aCoder decodeObjectForKey:CPImageCSSDictionaryKey] beforeDictionary:[aCoder decodeObjectForKey:CPImageCSSBeforeDictionaryKey] afterDictionary:[aCoder decodeObjectForKey:CPImageCSSAfterDictionaryKey] size:[aCoder decodeSizeForKey:@"CPSize"]];
    else
        return [self initWithContentsOfFile:[aCoder decodeObjectForKey:@"CPFilename"] size:[aCoder decodeSizeForKey:@"CPSize"]];
}

- (void)encodeWithCoder:(CPCoder)aCoder
{
    [aCoder encodeObject:_filename forKey:@"CPFilename"];
    [aCoder encodeSize:_size forKey:@"CPSize"];

    // CSS Styling
    if ([self isCSSBased])
    {
        [aCoder encodeObject:_cssDictionary       forKey:CPImageCSSDictionaryKey];
        [aCoder encodeObject:_cssBeforeDictionary forKey:CPImageCSSBeforeDictionaryKey];
        [aCoder encodeObject:_cssAfterDictionary  forKey:CPImageCSSAfterDictionaryKey];
    }
}

@end

@implementation CPThreePartImage : CPObject
{
    CPArray _imageSlices;
    BOOL    _isVertical;
}

- (id)initWithImageSlices:(CPArray)imageSlices isVertical:(BOOL)isVertical
{
    self = [super init];

    if (self)
    {
        _imageSlices = imageSlices;
        _isVertical = isVertical;
    }

    return self;
}

- (CPString)filename
{
    return @"";
}

- (CPArray)imageSlices
{
    return _imageSlices;
}

- (BOOL)isVertical
{
    return _isVertical;
}

- (BOOL)isSingleImage
{
    return NO;
}

- (BOOL)isThreePartImage
{
    return YES;
}

- (BOOL)isNinePartImage
{
    return NO;
}

@end

var CPThreePartImageImageSlicesKey  = @"CPThreePartImageImageSlicesKey",
    CPThreePartImageIsVerticalKey   = @"CPThreePartImageIsVerticalKey";

@implementation CPThreePartImage (CPCoding)

- (id)initWithCoder:(CPCoder)aCoder
{
    self = [super init];

    if (self)
    {
        _imageSlices = [aCoder decodeObjectForKey:CPThreePartImageImageSlicesKey];
        _isVertical = [aCoder decodeBoolForKey:CPThreePartImageIsVerticalKey];
    }

    return self;
}

- (void)encodeWithCoder:(CPCoder)aCoder
{
    [aCoder encodeObject:_imageSlices forKey:CPThreePartImageImageSlicesKey];
    [aCoder encodeBool:_isVertical forKey:CPThreePartImageIsVerticalKey];
}

@end


@implementation CPNinePartImage : CPObject
{
    CPArray _imageSlices;
}

- (id)initWithImageSlices:(CPArray)imageSlices
{
    self = [super init];

    if (self)
        _imageSlices = imageSlices;

    return self;
}

- (CPString)filename
{
    return @"";
}

- (CPArray)imageSlices
{
    return _imageSlices;
}

- (BOOL)isSingleImage
{
    return NO;
}

- (BOOL)isThreePartImage
{
    return NO;
}

- (BOOL)isNinePartImage
{
    return YES;
}

@end

var CPNinePartImageImageSlicesKey   = @"CPNinePartImageImageSlicesKey";

@implementation CPNinePartImage (CPCoding)

- (id)initWithCoder:(CPCoder)aCoder
{
    self = [super init];

    if (self)
        _imageSlices = [aCoder decodeObjectForKey:CPNinePartImageImageSlicesKey];

    return self;
}

- (void)encodeWithCoder:(CPCoder)aCoder
{
    [aCoder encodeObject:_imageSlices forKey:CPNinePartImageImageSlicesKey];
}

@end