Merge pull request '...' (#224) from develop/tags-3 into master
Reviewed-on: #224 Reviewed-by: giles <giles.bradshaw@sigyl.com>
This commit is contained in:
commit
ed41a9707b
|
@ -17,7 +17,7 @@
|
|||
- Name: NO
|
||||
- Ordinal: '0'
|
||||
- EnumerationSet:
|
||||
- UniqueName: PHASE_FAILURES
|
||||
- UniqueName: PHASE_FAILURESzx
|
||||
- Type: '0'
|
||||
- EnumerationSet:
|
||||
- UniqueName: $TIMER_TYPE
|
||||
|
|
|
@ -0,0 +1,160 @@
|
|||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import * as React from "react";
|
||||
import ReactVersion from "shared/ReactVersion";
|
||||
import { LegacyRoot } from "react-reconciler/src/ReactRootTags";
|
||||
import {
|
||||
createContainer,
|
||||
updateContainer,
|
||||
injectIntoDevTools,
|
||||
} from "react-reconciler/src/ReactFiberReconciler";
|
||||
import Transform from "art/core/transform";
|
||||
import Mode from "art/modes/current";
|
||||
import FastNoSideEffects from "art/modes/fast-noSideEffects";
|
||||
|
||||
import { TYPES, childrenAsString } from "./ReactARTInternals";
|
||||
|
||||
Mode.setCurrent(
|
||||
// Change to 'art/modes/dom' for easier debugging via SVG
|
||||
FastNoSideEffects,
|
||||
);
|
||||
|
||||
/** Declarative fill-type objects; API design not finalized */
|
||||
|
||||
const slice = Array.prototype.slice;
|
||||
|
||||
class LinearGradient {
|
||||
constructor(stops, x1, y1, x2, y2) {
|
||||
this._args = slice.call(arguments);
|
||||
}
|
||||
|
||||
applyFill(node) {
|
||||
node.fillLinear.apply(node, this._args);
|
||||
}
|
||||
}
|
||||
|
||||
class RadialGradient {
|
||||
constructor(stops, fx, fy, rx, ry, cx, cy) {
|
||||
this._args = slice.call(arguments);
|
||||
}
|
||||
|
||||
applyFill(node) {
|
||||
node.fillRadial.apply(node, this._args);
|
||||
}
|
||||
}
|
||||
|
||||
class Pattern {
|
||||
constructor(url, width, height, left, top) {
|
||||
this._args = slice.call(arguments);
|
||||
}
|
||||
|
||||
applyFill(node) {
|
||||
node.fillImage.apply(node, this._args);
|
||||
}
|
||||
}
|
||||
|
||||
/** React Components */
|
||||
|
||||
class Surface extends React.Component {
|
||||
componentDidMount() {
|
||||
const { height, width } = this.props;
|
||||
|
||||
this._surface = Mode.Surface(+width, +height, this._tagRef);
|
||||
|
||||
this._mountNode = createContainer(
|
||||
this._surface,
|
||||
LegacyRoot,
|
||||
null,
|
||||
false,
|
||||
false,
|
||||
"",
|
||||
);
|
||||
updateContainer(this.props.children, this._mountNode, this);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const props = this.props;
|
||||
|
||||
if (props.height !== prevProps.height || props.width !== prevProps.width) {
|
||||
this._surface.resize(+props.width, +props.height);
|
||||
}
|
||||
|
||||
updateContainer(this.props.children, this._mountNode, this);
|
||||
|
||||
if (this._surface.render) {
|
||||
this._surface.render();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
updateContainer(null, this._mountNode, this);
|
||||
}
|
||||
|
||||
render() {
|
||||
// This is going to be a placeholder because we don't know what it will
|
||||
// actually resolve to because ART may render canvas, vml or svg tags here.
|
||||
// We only allow a subset of properties since others might conflict with
|
||||
// ART's properties.
|
||||
const props = this.props;
|
||||
|
||||
// TODO: ART's Canvas Mode overrides surface title and cursor
|
||||
const Tag = Mode.Surface.tagName;
|
||||
|
||||
return (
|
||||
<Tag
|
||||
ref={(ref) => (this._tagRef = ref)}
|
||||
accessKey={props.accessKey}
|
||||
className={props.className}
|
||||
draggable={props.draggable}
|
||||
role={props.role}
|
||||
style={props.style}
|
||||
tabIndex={props.tabIndex}
|
||||
title={props.title}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Text extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// We allow reading these props. Ideally we could expose the Text node as
|
||||
// ref directly.
|
||||
["height", "width", "x", "y"].forEach((key) => {
|
||||
Object.defineProperty(this, key, {
|
||||
get: function () {
|
||||
return this._text ? this._text[key] : undefined;
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
render() {
|
||||
// This means you can't have children that render into strings...
|
||||
const T = TYPES.TEXT;
|
||||
return (
|
||||
<T {...this.props} ref={(t) => (this._text = t)}>
|
||||
{childrenAsString(this.props.children)}
|
||||
</T>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
injectIntoDevTools({
|
||||
findFiberByHostInstance: () => null,
|
||||
bundleType: __DEV__ ? 1 : 0,
|
||||
version: ReactVersion,
|
||||
rendererPackageName: "react-art",
|
||||
});
|
||||
|
||||
/** API */
|
||||
|
||||
export const ClippingRectangle = TYPES.CLIPPING_RECTANGLE;
|
||||
export const Group = TYPES.GROUP;
|
||||
export const Shape = TYPES.SHAPE;
|
||||
export const Path = Mode.Path;
|
||||
export { LinearGradient, Pattern, RadialGradient, Surface, Text, Transform };
|
Loading…
Reference in New Issue