Re: Exposing constructors of readonly interfaces to web authors

On Wed, Jul 9, 2014 at 4:54 AM, Domenic Denicola <
domenic@domenicdenicola.com> wrote:

> From: Rik Cabanier <cabanier@gmail.com>
>
> > This confirms that the current behavior can be implemented using
> JavaScript.
> > Doesn't this satisfy Domenic's requirement?
>
> It does, indeed, and gives us a path forward. However, in doing so, it
> points out that what the spec specifies is nowhere close to what was
> implemented. Here is a sketch of how we could update the specification to
> match what is (observably) going on:
>
> - DOMRectReadOnly contains a [[type]] internal slot, which is either
> "quadbounds" or "rect"
> - The x getter on DOMRectReadOnly returns either [[x]] if [[type]] is
> "rect", or the minimum of q.p1.x, q.p2.x, q.p3.x, and q.p4.x if [[type]] is
> "quadbounds". Similarly for y, width, and height.
> - DOMRectReadOnly's constructor then needs to have two different behaviors
> (which could be based on arguments, or on e.g. the first parameter): one
> that sets the [[type]] slot to "quadbounds" and the [[quad]] slot to the
> given quad, and one that sets the [[type]] to "rect" and sets the [[x]],
> [[y]], [[width]], and [[height]] slots.
> - DOMRect derives from DOMRectReadOnly.
>   - It has a single constructor, (x, y, width, height), which calls
> super(x, y, width, height) (or super("rect", x, y, width, height), perhaps).
>   - It has its own getters and setters for manipulating [[x]], [[y]],
> [[width]], and [[height]].
>   - Thus DOMRects will always have [[type]] "rect", which means that you
> can successfully apply DOMRectReadOnly's getters to it, as you would expect
> for an inheritance situation.
>
> I sketched this up, in a similar fashion to the previous one:
> https://gist.github.com/domenic/60871738e49a2b8c7a01
>
> If this looks kind of weird, that's because it is. In general JS
> programmers would not write code this way. But, we are trying to meet many
> constraints here that JS programmers would not normally attempt, e.g.
> readonly views, reusing the same code for both live quad-bounds and
> one-time readonly snapshots, having a common prototype that can be
> monkeypatched by user code, and the like.
>
> This seems to address Roc's concerns, though, and at least it is something
> that can be implemented (and introspected) in JavaScript.
>
> All righty then, what do we think this time around?


After talking to Domenic, maybe we should rethink the DOMRect and
DOMRectReadOnly classes.
Neither has functions and there is little value in them having a unique
type or even an inheritance structure.

What if instead of interfaces, we just define them as dictionaries:

dictionary DOMRect {

unrestricted double x;

unrestricted double y;

unrestricted double width;

unrestricted double height;

readonly unrestricted double top;

readonly unrestricted double right;

readonly unrestricted double bottom;

readonly unrestricted double left;

};

dictionary DOMRectReadOnly {

readonly unrestricted double x;

readonly unrestricted double y;

readonly unrestricted double width;

readonly unrestricted double height;

readonly unrestricted double top;

readonly unrestricted double right;

readonly unrestricted double bottom;

readonly unrestricted double left;

};


a prototype implementation of DOMQuad would then look as follows:

function DOMQuad(p1, p2, p3, p4){
    this.p1 = new DOMPoint(p1);
    this.p2 = new DOMPoint(p2);
    this.p3 = new DOMPoint(p3);
    this.p4 = new DOMPoint(p4);
    this.bounds = {};
    var self = this;

    Object.defineProperty(this, "p1", { writable : false });
    Object.defineProperty(this, "p2", { writable : false });
    Object.defineProperty(this, "p3", { writable : false });
    Object.defineProperty(this, "p4", { writable : false });
    Object.defineProperty(this, "bounds", { writable : false });

    Object.defineProperty(this.bounds, 'left', { enumerable: true,get:
function() {
    return Math.min(Math.min(self.p1.x, self.p2.x), Math.min(self.p3.x,
self.p4.x));
    } });

    Object.defineProperty(this.bounds, 'top', { enumerable: true,get:
function() {
    return Math.min(Math.min(self.p1.y, self.p2.y), Math.min(self.p3.y,
self.p4.y));
    } });

    Object.defineProperty(this.bounds, 'right', { enumerable: true,get:
function() {
    return Math.max(Math.max(self.p1.x, self.p2.x), Math.max(self.p3.x,
self.p4.x));
    } });

    Object.defineProperty(this.bounds, 'bottom', { enumerable: true,get:
function() {
    return Math.max(Math.max(self.p1.y, self.p2.y), Math.max(self.p3.y,
self.p4.y));
    } });

    Object.defineProperty(this.bounds, 'x', { enumerable: true,get:
function() {
    return this.left;
    } });

    Object.defineProperty(this.bounds, 'y', { enumerable: true,get:
function() {
    return this.top;
    } });

    Object.defineProperty(this.bounds, 'width', { enumerable: true,get:
function() {
    return this.right - this.left;
    } });

    Object.defineProperty(this.bounds, 'height', { enumerable: true,get:
function() {
    return this.bottom - this.top;
    } });
}