Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-scenejs-timeline

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scenejs-timeline - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

12

declaration/consts.d.ts

@@ -0,4 +1,4 @@

import { DirectionType, FillModeType } from "scenejs";
import { IObject } from "@daybrush/utils";
export declare const PREFIX = "scenejs-editor-";
export declare const SUPPORT_POINTER_EVENTS: boolean;
export declare const SUPPORT_TOUCH: boolean;
export declare const CSS: string;

@@ -35,1 +35,9 @@ export declare const DURATION = "duration";

export declare const TRANSFORM_NAME = "transform";
export declare const INFOS_CSS: string;
export declare const MENUS_CSS: string;
export declare const EDITOR_CSS: string;
export declare const DIRECTIONS: DirectionType[];
export declare const FILL_MODES: FillModeType[];
export declare const ANGLE_TYPE: (string | string[])[];
export declare const SIZE_TYPE: (string | string[])[];
export declare const PROPERTY_TYPES: IObject<any>;

11

declaration/HeaderArea/ControlArea.d.ts

@@ -0,11 +1,9 @@

/// <reference types="react" />
import ElementComponent from "../utils/ElementComponent";
import TimeArea from "./TimeArea";
import Scene, { SceneItem } from "scenejs";
import Timeline from "../Timeline";
export default class ControlArea extends ElementComponent<{
scene?: Scene | SceneItem;
select: (property: string, time: number) => any;
setTime: (time: number) => any;
prev: () => any;
next: () => any;
togglePlay: () => any;
timeline: Timeline;
}, {

@@ -26,3 +24,6 @@ isPlay: boolean;

private pause;
private togglePlay;
private prev;
private next;
private unselect;
}

11

declaration/HeaderArea/HeaderArea.d.ts

@@ -0,6 +1,6 @@

/// <reference types="react" />
import { TimelineInfo } from "../types";
import ElementComponent from "../utils/ElementComponent";
import KeytimesArea from "./KeytimesArea";
import Axes from "@egjs/axes";
import Scene, { SceneItem } from "scenejs";
import Timeline from "../Timeline";
export default class HeaderArea extends ElementComponent<{

@@ -11,10 +11,7 @@ timelineInfo: TimelineInfo;

zoom: number;
axes: Axes;
scene?: Scene | SceneItem;
add: (item?: Scene | SceneItem, properties?: string[]) => any;
move: (clientX: number) => void;
timeline: Timeline;
}> {
keytimesArea: KeytimesArea;
render(): JSX.Element;
private add;
private openDialog;
}

10

declaration/HeaderArea/KeytimesArea.d.ts

@@ -0,6 +1,9 @@

/// <reference types="react" />
import { TimelineInfo } from "../types";
import ElementComponent from "../utils/ElementComponent";
import KeyframeCursor from "../ScrollArea/KeyframesArea/KeyframeCursor";
import Axes from "@egjs/axes";
import Dragger from "@daybrush/drag";
import Timeline from "../Timeline";
export default class KeytimesArea extends ElementComponent<{
timeline: Timeline;
timelineInfo: TimelineInfo;

@@ -10,10 +13,11 @@ maxTime: number;

zoom: number;
axes: Axes;
move: (clientX: number) => void;
}> {
scrollAreaElement: HTMLElement;
cursor: KeyframeCursor;
dragger: Dragger;
renderKeytimes(): JSX.Element[];
render(): JSX.Element;
onWheel: (e: WheelEvent) => void;
componentDidMount(): void;
componentWillUnmount(): void;
}

4

declaration/HeaderArea/TimeArea.d.ts

@@ -0,4 +1,6 @@

/// <reference types="react" />
import ElementComponent from "../utils/ElementComponent";
import Timeline from "../Timeline";
export default class TimeArea extends ElementComponent<{
setTime: (time: number) => any;
timeline: Timeline;
}, {}, HTMLInputElement> {

@@ -5,0 +7,0 @@ render(): JSX.Element;

3

declaration/ScrollArea/KeyframesArea/Keyframe.d.ts

@@ -0,7 +1,6 @@

/// <reference types="react" />
import ElementComponent from "../../utils/ElementComponent";
export default class Keyframe extends ElementComponent<{
id: string;
time: number;
maxTime: number;
iterationTime: number;
value: string | undefined;

@@ -8,0 +7,0 @@ selected: boolean;

1

declaration/ScrollArea/KeyframesArea/KeyframeCursor.d.ts

@@ -0,1 +1,2 @@

/// <reference types="react" />
import ElementComponent from "../../utils/ElementComponent";

@@ -2,0 +3,0 @@ export default class KeyframeCursor extends ElementComponent {

2

declaration/ScrollArea/KeyframesArea/KeyframeDelay.d.ts
import * as React from "react";
export default class KeyframeDelay extends React.Component<{
export default class KeyframeDelay extends React.PureComponent<{
id: string;

@@ -4,0 +4,0 @@ time: number;

3

declaration/ScrollArea/KeyframesArea/KeyframeGroup.d.ts
import * as React from "react";
export default class KeyframeGroup extends React.Component<{
id: string;
export default class KeyframeGroup extends React.PureComponent<{
time: number;

@@ -5,0 +4,0 @@ nextTime: number;

2

declaration/ScrollArea/KeyframesArea/KeyframeLine.d.ts
import * as React from "react";
export default class KeyframeLine extends React.Component<{
export default class KeyframeLine extends React.PureComponent<{
id: string;

@@ -4,0 +4,0 @@ time: number;

1

declaration/ScrollArea/KeyframesArea/Keyframes.d.ts

@@ -0,1 +1,2 @@

/// <reference types="react" />
import { PropertiesInfo } from "../../types";

@@ -2,0 +3,0 @@ import ElementComponent from "../../utils/ElementComponent";

9

declaration/ScrollArea/KeyframesArea/KeyframesArea.d.ts

@@ -0,8 +1,8 @@

/// <reference types="react" />
import { TimelineInfo } from "../../types";
import Keyframes from "./Keyframes";
import ElementComponent from "../../utils/ElementComponent";
import Axes from "@egjs/axes";
import KeyController from "keycon";
import { IObject } from "@daybrush/utils";
import KeyframeCursor from "./KeyframeCursor";
import Timeline from "../../Timeline";
export default class KeyframesArea extends ElementComponent<{

@@ -13,4 +13,3 @@ timelineInfo: TimelineInfo;

zoom: number;
axes: Axes;
keycon: KeyController;
timeline: Timeline;
selectedProperty: string;

@@ -28,3 +27,3 @@ selectedTime: number;

render(): JSX.Element;
componentDidMount(): void;
private onWheel;
}

8

declaration/ScrollArea/KeyframesArea/LineArea.d.ts

@@ -1,4 +0,6 @@

declare const _default: ({ maxTime, }: {
import * as React from "react";
export default class KeyframeLine extends React.PureComponent<{
maxTime: number;
}) => JSX.Element;
export default _default;
}> {
render(): JSX.Element;
}

5

declaration/ScrollArea/PropertiesArea/PropertiesArea.d.ts

@@ -0,1 +1,2 @@

/// <reference types="react" />
import { TimelineInfo } from "../../types";

@@ -5,5 +6,9 @@ import Property from "./Property";

import { IObject } from "@daybrush/utils";
import ScrollArea from "../ScrollArea";
import Timeline from "../../Timeline";
export default class PropertiesArea extends ElementComponent<{
timelineInfo: TimelineInfo;
selectedProperty: string;
timeline: Timeline;
scrollArea: ScrollArea;
}, {

@@ -10,0 +15,0 @@ foldedInfo: IObject<boolean>;

9

declaration/ScrollArea/PropertiesArea/Property.d.ts

@@ -0,10 +1,19 @@

/// <reference types="react" />
import { PropertiesInfo } from "../../types";
import ElementComponent from "../../utils/ElementComponent";
import Timeline from "../../Timeline";
import ScrollArea from "../ScrollArea";
export default class Property extends ElementComponent<{
id: string;
index: number;
propertiesInfo: PropertiesInfo;
selected: boolean;
folded: number;
timeline: Timeline;
scrollArea: ScrollArea;
}> {
render(): JSX.Element;
private onClick;
private onClickArrow;
private onClickRemove;
}

17

declaration/ScrollArea/ScrollArea.d.ts

@@ -0,1 +1,2 @@

/// <reference types="react" />
import { TimelineInfo } from "../types";

@@ -6,6 +7,5 @@ import ElementComponent from "../utils/ElementComponent";

import ValuesArea from "./ValuesArea/ValuesArea";
import Axes from "@egjs/axes";
import KeyController from "keycon";
import Scene, { SceneItem } from "scenejs";
import Timeline from "../Timeline";
export default class ScrollArea extends ElementComponent<{
timeline: Timeline;
timelineInfo: TimelineInfo;

@@ -15,11 +15,4 @@ maxTime: number;

zoom: number;
axes: Axes;
keycon: KeyController;
selectedProperty: string;
selectedTime: number;
add: (item: Scene | SceneItem, properties: string[]) => any;
setTime: (time?: number) => any;
select: (property: string, time?: number, isNotUpdate?: boolean) => any;
editKeyframe: (index: number, value: any) => any;
update: () => any;
}> {

@@ -32,5 +25,3 @@ propertiesArea: PropertiesArea;

foldAll(): void;
private fold;
private removeProperty;
private initClickProperty;
fold(index: number, isNotUpdate?: boolean): void;
}

5

declaration/ScrollArea/ValuesArea/Value.d.ts

@@ -0,4 +1,5 @@

/// <reference types="react" />
import { PropertiesInfo } from "../../types";
import Scene, { SceneItem } from "scenejs";
import ElementComponent from "../../utils/ElementComponent";
import Timeline from "../..";
export default class Value extends ElementComponent<{

@@ -9,3 +10,3 @@ id: string;

selected: boolean;
add: (item: Scene | SceneItem, properties: string[]) => any;
timeline: Timeline;
}> {

@@ -12,0 +13,0 @@ inputElement: HTMLInputElement;

13

declaration/ScrollArea/ValuesArea/ValuesArea.d.ts

@@ -0,1 +1,2 @@

/// <reference types="react" />
import { TimelineInfo } from "../../types";

@@ -5,14 +6,12 @@ import Value from "./Value";

import { IObject } from "@daybrush/utils";
import Scene, { SceneItem } from "scenejs";
import KeyController from "keycon";
import Dragger from "@daybrush/drag";
import Timeline from "../../Timeline";
export default class ValuesArea extends ElementComponent<{
timelineInfo: TimelineInfo;
keycon: KeyController;
selectedProperty: string;
add: (item: Scene | SceneItem, properties: string[]) => any;
setTime: (time?: number) => any;
editKeyframe: (index: number, value: any) => any;
timeline: Timeline;
}, {
foldedInfo: IObject<boolean>;
}> {
dragger: Dragger;
values: Value[];

@@ -22,5 +21,7 @@ state: {

};
private keycon;
render(): JSX.Element;
componentDidMount(): void;
componentWillUnmount(): void;
private edit;
}

30

declaration/Timeline.d.ts

@@ -0,1 +1,2 @@

/// <reference types="react" />
import { TimelineProps, TimelineState } from "./types";

@@ -5,2 +6,4 @@ import ControlArea from "./HeaderArea/ControlArea";

import ScrollArea from "./ScrollArea/ScrollArea";
import Scene, { SceneItem } from "scenejs";
import Dragger from "@daybrush/drag";
import { IObject } from "@daybrush/utils";

@@ -11,3 +14,5 @@ import PureProps from "react-pure-props";

keyboard: boolean;
onSelect: () => void;
};
draggers: Dragger[];
headerArea: HeaderArea;

@@ -18,26 +23,29 @@ controlArea: ControlArea;

state: TimelineState;
private isExportCSS;
private axes;
private keycon;
private pinchDragger;
private keyMap;
constructor(props: any);
render(): JSX.Element;
componentDidMount(): void;
componentDidUpdate(prevProps: TimelineProps, prevState: TimelineState): void;
componentDidUpdate(prevProps: TimelineProps): void;
componentWillUnmount(): void;
update: (isInit?: boolean) => void;
prev: () => void;
next: () => void;
next(): void;
finish: () => void;
selectItem(scene: Scene | SceneItem): void;
select(property: string, time?: number, isNotUpdate?: boolean): void;
editKeyframe(index: number, value: any): void;
togglePlay: () => void;
setTime(time?: number): void;
setZoom(zoom: number): void;
getZoom(): number;
getValues(): IObject<any>;
private add;
openDialog(item?: Scene | SceneItem, properties?: string[]): void;
move(clientX: number): void;
private newItem;
private newProperty;
private getDistTime;
private setTime;
private getTime;
private move;
private moveCursor;
private setInputs;
private select;
private editKeyframe;
private removeKeyframe;

@@ -50,4 +58,6 @@ private addKeyframe;

private initScroll;
private selectByKeyframe;
private initDragKeyframes;
private onBlur;
private initKeyController;
}

9

declaration/types.d.ts

@@ -1,2 +0,2 @@

import Scene, { SceneItem } from "scenejs";
import Scene, { SceneItem, Frame } from "scenejs";
import { IObject } from "@daybrush/utils";

@@ -9,2 +9,3 @@ import { HTMLAttributes } from "react";

selectedTime: number;
prevSelectedItem: Scene | SceneItem | null;
prevSelectedProperty: string;

@@ -30,5 +31,11 @@ prevSelectedTime: number;

selectedTime: number;
selectedItem: Scene | SceneItem | null;
updateTime: boolean;
init: boolean;
}
export interface EditorState {
selectedFrame: Frame | null;
selectedItem: SceneItem | null;
selectedTarget: HTMLElement | SVGElement | Array<HTMLElement | SVGElement> | null;
}
export interface PropertiesInfo {

@@ -35,0 +42,0 @@ key: string;

6

declaration/utils.d.ts

@@ -23,5 +23,3 @@ import Scene, { SceneItem, Frame } from "scenejs";

export declare function findElementIndexByPosition(elements: HTMLElement[], pos: number): number;
export declare function prefix(className: string): string;
export declare function ref(target: any, name: string): (e: any) => void;
export declare function refs(target: any, name: string, i: number): (e: any) => void;
export declare function prefix(...classNames: string[]): string;
export declare function checkFolded(foldedInfo: IObject<any>, names: any[]): 0 | 1 | 2;

@@ -31,1 +29,3 @@ export declare function fold(target: ElementComponent<any, {

}>, foldedProperty: string, isNotUpdate?: boolean): void;
export declare function findSceneItemByElementStack(element: HTMLElement | SVGElement, scene: Scene | SceneItem): [HTMLElement | SVGElement | null, Scene | SceneItem | null];
export declare function findSceneItemByElement(element: HTMLElement | SVGElement, scene: Scene | SceneItem): SceneItem | null;

18

package.json
{
"name": "react-scenejs-timeline",
"version": "0.2.4",
"version": "0.3.0",
"description": "A library that represents the timeline of Scene.js. You can control time, properties, and items.",

@@ -38,3 +38,3 @@ "main": "./dist/timeline.cjs.js",

"@daybrush/builder": "^0.1.0",
"@scenejs/effects": "^0.1.0",
"@scenejs/effects": "^1.0.1",
"@types/react": "^16.8.18",

@@ -51,9 +51,9 @@ "@types/react-dom": "^16.8.4",

"dependencies": {
"@daybrush/drag": "^0.4.2",
"@daybrush/utils": "^0.10.0",
"@egjs/axes": "^2.5.13",
"keycon": "^0.2.2",
"react-css-styler": "^0.1.1",
"react-pure-props": "^0.1.2",
"scenejs": "^1.0.4"
"@daybrush/drag": "^0.9.1",
"@daybrush/utils": "^0.10.1",
"framework-utils": "^0.2.1",
"keycon": "^0.5.0",
"react-css-styler": "^0.4.0",
"react-pure-props": "^0.1.5",
"scenejs": "^1.1.4"
},

@@ -60,0 +60,0 @@ "browserslist": {

8

rollup.config.js

@@ -5,10 +5,2 @@ import builder from "@daybrush/builder";

tsconfig: "tsconfig.build.json",
external: {
"@daybrush/utils": "utils",
"@daybrush/drag": "utils",
"@egjs/axes": "eg.Axes",
"react": "React",
"keycon": "KeyController",
"react-dom": "ReactDOM",
},
};

@@ -15,0 +7,0 @@

275

src/react-scenejs-timeline/consts.ts

@@ -0,6 +1,8 @@

import { DirectionType, FillModeType } from "scenejs";
import { IObject } from "@daybrush/utils";
import { prefixCSS } from "framework-utils";
export const PREFIX = `scenejs-editor-`;
export const SUPPORT_POINTER_EVENTS = "PointerEvent" in window || "MSPointerEvent" in window;
export const SUPPORT_TOUCH = "ontouchstart" in window;
export const CSS = `
export const CSS = prefixCSS(PREFIX, `
{

@@ -15,2 +17,3 @@ position: relative;

* {
font-family: sans-serif;
box-sizing: border-box;

@@ -217,3 +220,3 @@ color: #fff;

}
.alt .value input {
:host.alt .value input {
cursor: ew-resize;

@@ -430,3 +433,3 @@ }

}
.scroll-aare .keyframe-cursor {
.scroll-area .keyframe-cursor {
pointer-events: none;

@@ -441,3 +444,3 @@ }

}
`.replace(/\.([^{,\s\d.]+)/g, `.${PREFIX}$1`);
`);

@@ -474,1 +477,261 @@ export const DURATION = "duration";

export const TRANSFORM_NAME = "transform";
export const INFOS_CSS = prefixCSS(PREFIX, `
{
position: fixed;
right: 0;
top: 0;
width: 250px;
}
.info {
margin-bottom: 5px;
background: #3f3f3f;
}
.info .option {
position: relative;
border-bottom: 1px solid #555;
box-sizing: border-box;
white-space: nowrap;
background: #3f3f3f;
font-size: 12px;
font-weight: bold;
color: #eee;
display: flex;
}
.info .option.title {
border-bottom: 0;
}
.info .option.title h3 {
padding: 7px 6px 7px 1px;
margin: 0;
font-size: 11px;
font-weight: bold;
border-bottom: 1px solid #ccc;
margin-left: 6px;
margin-bottom: 2px;
}
.info .option .name, .info .option .value {
height: 28px;
line-height: 20px;
box-sizing: border-box;
padding: 4px;
}
.info .option .name {
width: 110px;
font-size: 12px;
padding-left: 6px;
text-align: left;
}
.info .option .value {
flex: 1;
background: transparent;
border-bottom: 0;
z-index: auto;
}
.info .option .value input {
position: relative;
text-align: left;
appearance: none;
-webkit-appearance: none;
outline: none;
display: block;
width: 100%;
height: 100%;
background: transparent;
color: #4af;
font-weight: bold;
background: none;
border: 0;
box-sizing: border-box;
}
.info .option .value .unit {
display: flex;
}
.info .value .select {
position: relative;
width: 100%;
height: 100%;
}
.info .value .select:after {
content: "";
position: absolute;
top: 50%;
right: 2px;
width: 0;
height: 0;
margin-top: 1px;
border-top: 5px solid #666;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
transform: translate(-50%, -50%);
}
.info .value select {
position: relative;
appearance: none;
-webkit-appearance: none;
outline: none;
display: block;
width: 100%;
height: 100%;
background: transparent;
color: #4af;
font-weight: bold;
background: none;
border: 0;
box-sizing: border-box;
text-align: center;
}
.info .option.add {
display: block;
padding: 6px;
}
.info .option.add .button {
position: relative;
width: auto;
height: 30px;
line-height: 30px;
font-size: 16px;
text-align: center;
background: #555;
}
.info .option.add:hover .button {
cursor: pointer;
background: #666;
}
.info .option.add .button {
position: relative;
width: auto;
height: 30px;
line-height: 30px;
font-size: 16px;
text-align: center;
background: #555;
}
.info .option.add:hover .button {
cursor: pointer;
background: #666;
}
.info .option.add .button.disable {
cursor: not-allowed;
color: #aaa;
background: #444;
}
.info .group .option.title {
border-bottom: 1px solid #555;
}
.info .group .option.title h3 {
border-bottom: none;
font-size: 12px;
}
.info .group .group {
padding-left: 10px;
}
.info .color {
z-index: 10;
display: flex;
align-items: center;
height: 100%;
}
.info .color .preview-color {
width: 15px;
height: 15px;
display: inline-block;
flex: 1;
margin-right: 5px;
}
.info .option .value .color>input {
width: auto;
}
.info .picker {
position: absolute;
right: 5px;
top: 100%;
z-index: 10;
}
`);
export const MENUS_CSS = prefixCSS(PREFIX, `
{
position: fixed;
left: 0;
top: 0;
background: #3f3f3f;
padding: 5px 0px;
}
.menu {
position: relative;
width: 44px;
height: 40px;
}
.menu .icon {
position: absolute;
width: 28px;
height: 28px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
text-align: center;
box-sizing: border-box;
transition: border-color ease 0.5s;
border: 2px solid transparent;
padding: 0px;
}
.menu .icon svg {
position: relative;
height: 100%;
}
.menu.selected .icon {
background: transparent;
border: 1px solid #eee;
}
`);
export const EDITOR_CSS = prefixCSS(PREFIX, `
.label {
position: absolute;
top: 0;
left: 0;
padding: 5px;
border-radius: 5px;
background: #333;
z-index: 3001;
color: #fff;
font-weight: bold;
font-size: 12px;
display: none;
transform: translate(-100%, -100%);
}
`);
export const DIRECTIONS: DirectionType[] = ["normal", "reverse", "alternate", "alternate-reverse"];
export const FILL_MODES: FillModeType[] = ["forwards", "backwards", "both"];
export const ANGLE_TYPE = ["unit", ["deg", "rad"]];
export const SIZE_TYPE = [
"unit",
[
"auto", "px", "", "%", "em", "vw", "vh", "pt", "cm", "mm", "in", "pc", "ch", "rem", "vmin", "vmax",
],
];
export const PROPERTY_TYPES: IObject<any> = {
"transform": "group",
"filter": "group",
"width": SIZE_TYPE,
"height": SIZE_TYPE,
"color": "color",
"background-color": "color",
"border-left-color": "color",
"border-right-color": "color",
"border-top-color": "color",
"border-bottom-color": "color",
"opacity": "number",
"transform///rotate": ANGLE_TYPE,
"transform///rotateX": ANGLE_TYPE,
"transform///rotateY": ANGLE_TYPE,
"transform///rotateZ": ANGLE_TYPE,
"transform///skewX": ANGLE_TYPE,
"transform///skewY": ANGLE_TYPE,
"transform///scaleX": "number",
"transform///scaleY": "number",
};

1

src/react-scenejs-timeline/TimelineInfo.ts

@@ -10,3 +10,2 @@ import Scene, { AnimatorState, SceneItem } from "scenejs";

ALTERNATE_REVERSE,
DURATION,
INFINITE,

@@ -13,0 +12,0 @@ } from "./consts";

9

src/react-scenejs-timeline/types.ts

@@ -1,2 +0,2 @@

import Scene, { SceneItem } from "scenejs";
import Scene, { SceneItem, Frame } from "scenejs";
import { IObject } from "@daybrush/utils";

@@ -10,2 +10,3 @@ import { HTMLAttributes } from "react";

selectedTime: number;
prevSelectedItem: Scene | SceneItem | null;
prevSelectedProperty: string;

@@ -29,5 +30,11 @@ prevSelectedTime: number;

selectedTime: number;
selectedItem: Scene | SceneItem | null;
updateTime: boolean;
init: boolean;
}
export interface EditorState {
selectedFrame: Frame | null;
selectedItem: SceneItem | null;
selectedTarget: HTMLElement | SVGElement | Array<HTMLElement | SVGElement> | null;
}
export interface PropertiesInfo {

@@ -34,0 +41,0 @@ key: string;

60

src/react-scenejs-timeline/utils.ts

@@ -11,2 +11,3 @@ import { PREFIX } from "./consts";

} from "@daybrush/utils";
import { prefixNames } from "framework-utils";
import ElementComponent from "./utils/ElementComponent";

@@ -90,9 +91,9 @@

export function isScene(value: any): value is Scene {
return !!(value.constructor as typeof Scene).prototype.getItem;
return value && !!(value.constructor as typeof Scene).prototype.getItem;
}
export function isSceneItem(value: any): value is SceneItem {
return !!(value.constructor as typeof SceneItem).prototype.getFrame;
return value && !!(value.constructor as typeof SceneItem).prototype.getFrame;
}
export function isFrame(value: any): value is Frame {
return !!(value.constructor as typeof Frame).prototype.toCSS;
return value && !!(value.constructor as typeof Frame).prototype.toCSS;
}

@@ -134,15 +135,5 @@ export function splitProperty(scene: Scene, property: string) {

export function prefix(className: string) {
return className.split(" ").map(name => `${PREFIX}${name}`).join(" ");
export function prefix(...classNames: string[]) {
return prefixNames(PREFIX, ...classNames);
}
export function ref(target: any, name: string) {
return (e: any) => {
e && (target[name] = e);
};
}
export function refs(target: any, name: string, i: number) {
return (e: any) => {
e && (target[name][i] = e);
};
}

@@ -177,1 +168,40 @@ export function checkFolded(foldedInfo: IObject<any>, names: any[]) {

}
export function findSceneItemByElementStack(element: HTMLElement | SVGElement, scene: Scene | SceneItem):
[HTMLElement | SVGElement | null, Scene | SceneItem | null] {
let target: HTMLElement | SVGElement | null = element;
let item: Scene | SceneItem | null = null;
while (target && !item) {
item = findSceneItemByElement(target, scene);
if (!item) {
target = target.parentElement;
}
}
if (!target || !item) {
return [null, null];
}
return [target, item];
}
export function findSceneItemByElement(element: HTMLElement | SVGElement, scene: Scene | SceneItem) {
let target: SceneItem | null = null;
if (!scene) {
return null;
}
if (isScene(scene)) {
scene.forEach(item => {
if (target) {
return;
}
target = findSceneItemByElement(element, item);
});
} else {
const elements = scene.getElements();
if (elements.indexOf(element) > -1) {
return scene;
}
}
return target;
}

52

tsconfig.json
{
"compilerOptions": {
"outDir": "./outjs/",
"esModuleInterop": false,
"sourceMap": true,
"module": "esnext",
"target": "es5",
"experimentalDecorators": true,
"skipLibCheck": true,
"moduleResolution": "node",
"jsx": "preserve",
"lib": [
"es2015",
"dom"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"./src/**/*.ts"
]
"compilerOptions": {
"outDir": "./outjs/",
"esModuleInterop": false,
"sourceMap": true,
"module": "esnext",
"target": "es5",
"experimentalDecorators": true,
"skipLibCheck": true,
"moduleResolution": "node",
"jsx": "preserve",
"lib": [
"es2015",
"dom"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"./src/**/*.ts"
]
}

3

tslint.json

@@ -12,2 +12,3 @@ {

"no-any": false,
"no-empty": false,
"interface-name": false,

@@ -46,2 +47,2 @@ "indent": [

}
}
}
dist/timeline.cjs.js

Sorry, the diff of this file is too big to display

dist/timeline.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/timeline.esm.js

Sorry, the diff of this file is too big to display

dist/timeline.esm.js.map

Sorry, the diff of this file is not supported yet

src/demo/App.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/HeaderArea/ControlArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/HeaderArea/HeaderArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/HeaderArea/KeytimesArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/HeaderArea/TimeArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/Keyframe.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/KeyframeCursor.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/KeyframeDelay.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/KeyframeGroup.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/KeyframeLine.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/Keyframes.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/KeyframesArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/KeyframesArea/LineArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/PropertiesArea/PropertiesArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/PropertiesArea/Property.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/ScrollArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/ValuesArea/Value.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/ScrollArea/ValuesArea/ValuesArea.tsx

Sorry, the diff of this file is not supported yet

src/react-scenejs-timeline/Timeline.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc