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

mojs-curve-editor

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mojs-curve-editor - npm Package Compare versions

Comparing version 1.0.2 to 1.4.4

app/css/blocks/ruler.postcss.css
app/css/blocks/ruler.postcss.css.json
app/js/actions/points.babel.js
app/js/helpers/active-pool.babel.js
app/js/tags/maximize-button.babel.jsx
app/js/tags/minimize-button.babel.jsx
app/js/tags/pattern.babel.jsx
app/js/tags/ruler.babel.jsx
mockups/graph paper.svg
mockups/grid.svg
mockups/icons/mazimize.svg
mockups/icons/minimize.svg

2

app/css/blocks/curve-editor.postcss.css.json

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

{"curve-editor":"_curve-editor_llwjd_3","curve-editor__left":"_curve-editor__left_llwjd_1","curve-editor__right":"_curve-editor__right_llwjd_1","curve-editor__resize-handle":"_curve-editor__resize-handle_llwjd_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_llwjd_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_llwjd_1"}
{"curve-editor":"_curve-editor_12556_3","curve-editor__left":"_curve-editor__left_12556_1","curve-editor__right":"_curve-editor__right_12556_140","curve-editor__resize-handle":"_curve-editor__resize-handle_12556_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_12556_135","curve-editor__mojs-logo":"_curve-editor__mojs-logo_12556_118","is-inactive":"_is-inactive_12556_117","is-minimized":"_is-minimized_12556_125","curve__svg-wrapper":"_curve__svg-wrapper_12556_144"}

2

app/css/blocks/curve.postcss.css.json

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

{"curve":"_curve_k9lsx_5","curve__background":"_curve__background_k9lsx_1","curve__svg-wrapper":"_curve__svg-wrapper_k9lsx_1","curve__svg":"_curve__svg_k9lsx_1","curve__svg-segment":"_curve__svg-segment_k9lsx_1"}
{"curve":"_curve_1k7gs_5","curve__background":"_curve__background_1k7gs_1","curve__svg-wrapper":"_curve__svg-wrapper_1k7gs_1","curve__svg":"_curve__svg_1k7gs_1","curve__svg-segment":"_curve__svg-segment_1k7gs_1"}

2

app/css/blocks/resize-handle.postcss.css.json

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

{"resize-handle":"_resize-handle_k81kc_4","resize-handle--right":"_resize-handle--right_k81kc_1","resize-handle--bottom":"_resize-handle--bottom_k81kc_1"}
{"resize-handle":"_resize-handle_1uncf_4","resize-handle--right":"_resize-handle--right_1uncf_1","resize-handle--bottom":"_resize-handle--bottom_1uncf_1"}

47

app/js/app.babel.jsx

@@ -9,9 +9,5 @@ import { Provider } from 'preact-redux';

import defer from './helpers/defer';
import {reset} from './actions/points';
import addPointerDown from './helpers/add-pointer-down';
// TODO
// - import path data
// - move bunch of points at once
// - add period generator
/*

@@ -32,3 +28,3 @@ API wrapper above the app itself.

this._subscribe();
this._subscribeFocus();
// this._subscribeFocus();
}

@@ -43,3 +39,2 @@

_extendDefaults () {

@@ -54,3 +49,3 @@ this._props = {};

_vars () {
this.revision = '1.0.1';
this.revision = '1.4.3';
this.store = initStore();

@@ -72,3 +67,4 @@

<Provider store={this.store}>
<CurveEditor progressLines={this._progressLines} />
<CurveEditor progressLines = {this._progressLines}
ref={ (el) => { this._el = el; }} />
</Provider>, document.body);

@@ -93,4 +89,2 @@ });

});
}

@@ -101,7 +95,3 @@

if ( stored ) { this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });}
else {
this.store.dispatch({ type: 'POINT_ADD', data: { point: {x: 0, y: C.CURVE_SIZE, isLockedX: true}, index: 0 } });
this.store.dispatch({ type: 'POINT_ADD', data: { point: {x: 100, y: 0, isLockedX: true}, index: 1 } });
// this.store.dispatch({ type: 'POINT_SELECT', data: { index: 0, type: 'straight' } });
}
else { reset(this.store); }
}

@@ -114,9 +104,9 @@

_subscribeFocus () {
addPointerDown( document.body, (e) => {
if (this._localStorage !== e._mojsCurveEditorName) {
this.store.dispatch({ type: 'POINT_DESELECT_ALL' });
}
});
}
// _subscribeFocus () {
// addPointerDown( document.body, (e) => {
// if (this._localStorage !== e._mojsCurveEditorName) {
// this.store.dispatch({ type: 'POINT_DESELECT_ALL' });
// }
// });
// }

@@ -157,2 +147,4 @@ _compilePath () {

this._triggerParent( parent );
} else if (parent._o.callbacksContext) {
this._triggerParent( parent._o.callbacksContext.timeline );
} else if ( parent.timeline ) {

@@ -166,3 +158,3 @@ this._triggerParent( parent.timeline )

_triggerParent (parent) {
const step = 0.001,
const step = 0.01,
{progress} = parent,

@@ -209,8 +201,1 @@ updateProgress = (progress + step < 1 )

window.MojsCurveEditor = API;
// curve
// .getFunction({ isInverseX: false, isInverseY: true, name: 'Some name' })
// .getCode()

4

app/js/constants.babel.js

@@ -5,4 +5,6 @@

CURVE_SIZE,
RESIZE_NEGATIVE_OFFSET: 150,
CURVE_PERCENT: CURVE_SIZE/100,
CURVE_PADDING: 10
CURVE_PADDING: 10,
ACTIVE_POOL_NAME: '_mojsCurveEditorPool'
}

5

app/js/helpers/mod-deltas.babel.js
import mod from './resize-mod';
import C from '../constants';

@@ -12,4 +13,6 @@ export default (x, y, type, state) => {

y -= resize[type];
// const offset = C.RESIZE_NEGATIVE_OFFSET;
const offset = 0;
// ensure size won't be less then CURVE_SIZE
if ( size*coef < 0 ) { y = -resize[type]; }
if ( size*coef < -offset ) { y = -resize[type] - offset; }
// ensure size won't be less then CURVE_SIZE

@@ -16,0 +19,0 @@ } else if ( resize[type] + x < 0 ) { x = -resize[type]; }

21

app/js/pool.babel.js

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

// class Pool {
// constructor () {
// this._states = []
// }
// }
class Pool {
constructor () {
this._states = [];
}
push (states) {
// this._states.push(states);
return this;
}
clear () {
this._states = [];
return this;
}
}
export default [];
export default new Pool;

15

app/js/reducers/controls-reducer.babel.js
import calculatePath from '../helpers/calculate-path';
import pool from '../pool';
const INITIAL_STATE = { isCode: false }
const INITIAL_STATE = {
isCode: false,
isMinimize: false,
isActive: false
}

@@ -12,2 +16,11 @@ const controls = (state = INITIAL_STATE, action) => {

}
case 'SET_MINIMIZE': {
return { ...state, isMinimize: action.data };
}
// case 'RESET_MINIMIZE_TRANISTION': {
// return { ...state, isTransition: false };
// }
case 'SET_ACTIVE': {
return { ...state, isActive: action.data };
}
}

@@ -14,0 +27,0 @@ return state;

3

app/js/reducers/point-controls-reducer.babel.js

@@ -0,1 +1,3 @@

import pool from '../pool';
const INITIAL_STATE = {

@@ -7,2 +9,3 @@ isShow: false,

const pointControls = (state = INITIAL_STATE, action) => {
pool.push( state );
switch (action.type) {

@@ -9,0 +12,0 @@ // probably redundant

54

app/js/reducers/points-reducer.babel.js

@@ -7,2 +7,3 @@ import makePoint from '../helpers/make-point';

import findSelectedIndecies from '../helpers/find-selected-indecies';
import pool from '../pool';

@@ -22,2 +23,3 @@ const INITIAL_STATE = {

const pointsReducer = (state = INITIAL_STATE, action) => {
pool.push( state );
switch( action.type ) {

@@ -138,2 +140,6 @@ case 'SET_EDITOR_NAME': {

case 'SET_ACTIVE': {
return (!action.data) ? { ...deselectAll( state ) } : state;
}
// HANDLES

@@ -164,29 +170,33 @@ case 'HANDLE_TRANSLATE': {

case 'EDITOR_RESIZE': {
const {data} = action,
points = [...state.points],
{type, resize} = data;
case 'POINTS_REMOVE': {
return {...state, points: []};
}
// return state if resize to the `right`
if (type === 'right') { return state; }
// case 'EDITOR_RESIZE': {
// const {data} = action,
// points = [...state.points],
// {type, resize} = data;
// normalize points' y regarding resize
if ( type === 'top' ) {
for (var i = 0; i < points.length; i++) {
const borderTop = Math.min(resize.top + data.y, 0),
point = points[i];
if (point.y < borderTop) { point.y = borderTop; }
}
} else if ( type === 'bottom' ) {
for (var i = 0; i < points.length; i++) {
const borderBottom = Math.max(resize.bottom + data.y, 0) + C.CURVE_SIZE,
point = points[i];
// // return state if resize to the `right`
// if (type === 'right') { return state; }
if (point.y > borderBottom) { point.y = borderBottom; }
}
}
// // normalize points' y regarding resize
// if ( type === 'top' ) {
// for (var i = 0; i < points.length; i++) {
// const borderTop = Math.min(resize.top + data.y, 0),
// point = points[i];
// if (point.y < borderTop) { point.y = borderTop; }
// }
// } else if ( type === 'bottom' ) {
// for (var i = 0; i < points.length; i++) {
// const borderBottom = Math.max(resize.bottom + data.y, 0) + C.CURVE_SIZE,
// point = points[i];
return { ...state, points, ...calculatePath( points ) };
}
// if (point.y > borderBottom) { point.y = borderBottom; }
// }
// }
// return { ...state, points, ...calculatePath( points ) };
// }
}

@@ -193,0 +203,0 @@ return state;

4

app/js/reducers/progresses-reducer.babel.js

@@ -0,1 +1,3 @@

import pool from '../pool';
const INITIAL_STATE = {

@@ -22,2 +24,4 @@ selected: 0,

const progresses = (state = INITIAL_STATE, action) => {
pool.push( state );
switch (action.type) {

@@ -24,0 +28,0 @@

17

app/js/reducers/resize-reducer.babel.js
import C from '../constants';
import pool from '../pool';

@@ -19,2 +20,5 @@ const INITIAL_STATE = {

panY: 0,
panTempY: 0,
scalerX: C.CURVE_PERCENT,

@@ -25,2 +29,4 @@ absScalerX: 1

const resizeReducer = (state = INITIAL_STATE, action) => {
pool.push( state );
switch (action.type) {

@@ -70,2 +76,13 @@ case 'EDITOR_RESIZE': {

case 'EDITOR_PAN': {
const y = action.data;
return { ...state, panTempY: y };
}
case 'EDITOR_PAN_END': {
const y = action.data;
return { ...state, panTempY: 0, panY: y + state.panY };
}
}

@@ -72,0 +89,0 @@ return state;

2

app/js/store.babel.js

@@ -5,4 +5,4 @@ import {createStore} from 'redux';

const initStore = () => { return createStore( reducer ); }
const initStore = () => { return createStore( reducer ); }
export default initStore;

4

app/js/tags/code-button.babel.jsx

@@ -9,3 +9,5 @@ import {h, Component} from 'preact';

const {state} = this.props;
return <IconButton shape="code" isCheck={state.controls.isCode} />;
return <div data-component="code-button" title="get code">
<IconButton shape="code" isCheck={state.controls.isCode} />
</div>;
}

@@ -12,0 +14,0 @@ componentDidMount () {

7

app/js/tags/code-panel.babel.jsx

@@ -9,5 +9,6 @@ import {h} from 'preact';

export default ({state}) => {
const {points, controls} = state,
open = (controls.isCode) ? CLASSES['is-open'] : '',
mainClass = `${CLASSES['code-panel']} ${open}`;
const {points, controls} = state;
const isShow = controls.isCode && !controls.isMinimize
const open = (isShow) ? CLASSES['is-open'] : '';
const mainClass = `${CLASSES['code-panel']} ${open}`;

@@ -14,0 +15,0 @@ return <div className={mainClass}>

4

app/js/tags/curve-editor-left.babel.jsx

@@ -5,2 +5,4 @@

import CodeButton from './code-button';
import MinimizeButton from './minimize-button';
import MaximizeButton from './maximize-button';
import IconDivider from './icon-divider';

@@ -13,2 +15,4 @@ import PointControls from './point-controls';

return <div className={CLASSES['curve-editor__left']} id="js-left-panel">
<MinimizeButton state={state} />
<MaximizeButton state={state} />
<CodeButton state={state} />

@@ -15,0 +19,0 @@ <IconDivider />

68

app/js/tags/curve-editor.babel.jsx

@@ -12,6 +12,7 @@ import { h, Component } from 'preact';

import addPointerDown from '../helpers/add-pointer-down';
import {reset} from '../actions/points';
import ActivePool from '../helpers/active-pool';
require('../../css/blocks/curve-editor');
class CurveEditor extends Component {
render () {

@@ -25,4 +26,12 @@ const CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');

let className = `${CLASSES['curve-editor']}`;
className += (state.controls.isMinimize)
? ` ${CLASSES['is-minimized']}` : '';
className += (!state.controls.isActive)
? ` ${CLASSES['is-inactive']}` : '';
this._state = state;
return ( <div className={CLASSES['curve-editor']} style={ style }>
return ( <div className={className} style={ style }>
<Icons />

@@ -55,2 +64,4 @@ <CodePanel state={ state }/>

componentDidMount () {
this._resetCounter = 0;
const {store} = this.context,

@@ -70,3 +81,2 @@ el = this.base.querySelector('#js-left-panel'),

})
// .on('tap', (e) => { store.dispatch({ type: 'POINT_DESELECT_ALL' }); });

@@ -78,8 +88,2 @@ this._addKeyUp();

_subscribeFocus () {
addPointerDown( this.base, (e) => {
e._mojsCurveEditorName = this._state.points.present.name;
});
}
_addKeyUp () { document.addEventListener('keyup', this._onKeyUp.bind(this)); }

@@ -89,2 +93,6 @@

const {store} = this.context;
const {controls} = this._state;
// don't react on shortcuts if inactive or minimized
if (!controls.isActive || controls.isMinimize) { return; }
// don't react if `alt` key is not set
if ( !e.altKey ) { return; }

@@ -98,5 +106,47 @@ switch (e.which) {

case 68: { return store.dispatch({ type: 'POINT_DELETE' }); }
// \
case 220: { return e.shiftKey && this._tryToReset(store); }
}
}
_tryToReset (store) {
if (++this._resetCounter > 2) { reset(store); }
clearTimeout(this._tm);
this._tm = setTimeout(() => { this._resetCounter = 0; }, 300);
}
_subscribeFocus () {
this._createActivePool();
const {store} = this.context;
addPointerDown( this.base, (e) => {
const pool = mojs[C['ACTIVE_POOL_NAME']];
pool && pool.resetActive(this);
if (!this._state.controls.isActive) {
store.dispatch({ type: 'SET_ACTIVE', data: true });
}
});
}
_getPool () {
let activePool = null;
if (!mojs[C['ACTIVE_POOL_NAME']]) {
mojs[C['ACTIVE_POOL_NAME']] = new ActivePool;
}
return mojs[C['ACTIVE_POOL_NAME']];
}
_createActivePool () {
const activePool = this._getPool();
activePool.add(this._setInactive.bind(this));
mojs[C['ACTIVE_POOL_NAME']] = activePool;
}
_setInactive (module) {
const {store} = this.context;
if (module !== this) {
store.dispatch({ type: 'SET_ACTIVE', data: false });
}
}
}

@@ -103,0 +153,0 @@

91

app/js/tags/curve.babel.jsx
import { h, Component } from 'preact';
import angleToPoint from '../helpers/angle-to-point';
import ProgressLine from './progress-line';
import Pattern from './pattern';
import Ruler from './ruler';
import Point from './point';

@@ -21,6 +23,11 @@ import mod from '../helpers/resize-mod';

const curveHeight = this._getCurveHeight(state);
return <div className={ CLASSES['curve'] }>
<div id="js-background"
className={ CLASSES['curve__background']}
style={ styles.background } />
style={styles.background}>
<Pattern styles={styles} />
</div>

@@ -32,6 +39,9 @@ { progressLines }

<Ruler />
<Ruler type="right" />
{ points }
<svg height={ C.CURVE_SIZE }
viewBox="0 0 100 100"
viewBox={`0 0 100 ${curveHeight}`}
preserveAspectRatio="none"

@@ -56,17 +66,32 @@ id="js-svg"

_getCurveHeight (state) {
const {resize} = state;
if (!state.controls.isMinimize) { return 100; }
return C.CURVE_SIZE*4.28;
}
_getStyle(state) {
const {resize} = state;
let {temp_top, temp_right} = resize;
let {temp_top, temp_bottom, temp_right, panTempY} = resize;
let height = C.CURVE_SIZE - (temp_top + resize.top)
+ (temp_bottom + resize.bottom);
temp_top += resize.top;
temp_right += resize.right;
panTempY += resize.panY;
temp_top += resize.top - panTempY;
temp_right += resize.right;
const scale = `transform: scaleX(${(C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE})`,
bgTransform = `${mojs.h.prefix.css}${scale}; ${scale};`,
background = `background-position: 0 ${-temp_top - 1}px; ${bgTransform}`,
transform = `transform: translate(0px, ${-temp_top}px)`;
const yShift = (state.controls.isMinimize)
? -(temp_top/C.CURVE_SIZE) * (20/(height/C.CURVE_SIZE))
: -temp_top;
const scaleX = (C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE;
const background = `width: ${C.CURVE_SIZE*scaleX}px;`,
transform = `transform: translate(0px, ${yShift}px)`;
return {
transform: `${mojs.h.prefix.css}${transform}; ${transform};`,
background,
transform: `${mojs.h.prefix.css}${transform}; ${transform};`
height,
svgTop: temp_top
};

@@ -134,16 +159,8 @@ }

// _renderSegment ( index, string) {
// return <path
// d={string}
// data-index={index}
// stroke="white"
// fill="none"
// stroke-width=""
// vector-effect="non-scaling-stroke"
// class={CLASSES['curve__svg-segment']}
// />;
// }
componentDidUpdate () { this._updateDomProgressLines(); }
componentWillMount () {
this._isFirefox = (navigator.userAgent.indexOf("Firefox") > -1);
}
componentDidMount () {

@@ -156,2 +173,3 @@ this._updateDomProgressLines();

// mc.add(new Hammer.Pan({ threshold: 0 }));

@@ -162,11 +180,23 @@ mc.add(new Hammer.Tap);

.on('tap', (e) => {
const ev = e.srcEvent,
target = ev.target;
const {state} = this.props;
const ev = e.srcEvent;
const target = ev.target;
// handle paths only
if ( target.tagName.toLowerCase() !== 'path' ) { return; }
// coordinates
const x = ev.offsetX,
y = ev.offsetY*C.CURVE_PERCENT,
index = parseInt(target.getAttribute('data-index')) + 1;
let x = ev.offsetX;
let y = ev.offsetY;
let index = parseInt(target.getAttribute('data-index')) + 1;
// normalize for FF issue - it calculates
// events regarding `viewBox` of `svg` tag
if (!this._isFirefox) { x /= state.resize.scalerX; }
else {
y *= C.CURVE_PERCENT;
x -= 1;
y -= 1;
}
this._isFirefox
store.dispatch({

@@ -190,2 +220,3 @@ type: 'POINT_ADD',

svgMc.add(new Hammer.Tap);
svgMc.add(new Hammer.Pan);

@@ -195,2 +226,8 @@ svgMc

store.dispatch({ type: 'POINT_DESELECT_ALL' });
})
.on('pan', (e) => {
store.dispatch({ type: 'EDITOR_PAN', data: e.deltaY });
})
.on('panend', (e) => {
store.dispatch({ type: 'EDITOR_PAN_END', data: e.deltaY });
});

@@ -197,0 +234,0 @@

4

app/js/tags/icon-button.babel.jsx

@@ -11,4 +11,6 @@ import Hammer from 'hammerjs';

render () {
const check = (this.props.isCheck) ? CLASSES['is-checked'] : '';
const p = this.props;
const check = (p.isCheck) ? CLASSES['is-checked'] : '';
return <div className={`${CLASSES['icon-button']} ${check}`}
title={ p.title || '' }
data-component={'icon-button'}>

@@ -15,0 +17,0 @@ <Icon shape={this.props.shape} />

2

app/js/tags/icons.babel.jsx

@@ -41,2 +41,4 @@ import { h } from 'preact';

<path id="mojs-logo-shape" d="M18.4678907,2.67700048 C19.488586,3.25758625 20.2789227,4.18421651 20.87823,5.1973579 C24.0807788,10.501451 27.2777091,15.8113116 30.480258,21.1154047 C31.1320047,22.1612281 31.7706417,23.2647256 31.9354512,24.5162532 C32.188284,26.0619186 31.6919826,27.7363895 30.5589171,28.80336 C29.4501984,29.8857103 27.8807622,30.3182659 26.3806209,30.3048086 C19.4511293,30.3086535 12.5235106,30.3086535 5.59401901,30.3048086 C3.71556494,30.343258 1.69852104,29.5723478 0.683444165,27.8709623 C-0.406546132,26.1099803 -0.0975282643,23.7914822 0.940022637,22.0843293 C4.34296485,16.4130445 7.76650826,10.7532945 11.1825603,5.08969961 C11.9747698,3.74781595 13.1846215,2.60202418 14.6847628,2.18292584 C15.9451812,1.81573418 17.3348251,2.01182606 18.4678907,2.67700048 Z M15.3334668,9.51526849 C15.6146238,9.03779476 16.0791597,9.02250655 16.3785679,9.4929547 L25.2763555,23.4736913 C25.5723919,23.9388414 25.3568433,24.3159201 24.8074398,24.3159202 L7.62314647,24.3159205 C7.06813505,24.3159206 6.84622798,23.9286889 7.12728913,23.4513779 L15.3334668,9.51526849 Z" fill-rule="evenodd"></path>
<path id="minimize-shape" d="M9,18.1970803 L14.4501217,18.1970803 L14.4501217,23.6472019 L9,18.1970803 Z M16.8832117,9 L22.3333333,14.4501217 L16.8832117,14.4501217 L16.8832117,9 Z"></path>
<path id="maximize-shape" d="M16.1358025,11 L21.6666667,11 L21.6666667,16.5308642 L16.1358025,11 Z M11,16.1358025 L16.5308642,21.6666667 L11,21.6666667 L11,16.1358025 Z"></path>
</svg>` }}></div>

@@ -43,0 +45,0 @@ }

4

app/js/tags/little-handle.babel.jsx

@@ -5,2 +5,3 @@ import {h, Component} from 'preact';

import C from '../constants';
import pool from '../pool';

@@ -41,6 +42,4 @@ import Hammer from 'hammerjs';

point = angleToPoint( handle.angle, handle.radius ),
// newX = point.x + e.deltaX,
newY = point.y + e.deltaY,
{resize} = state,
// absolute x regarding horizontal size
absX = point.x + (e.deltaX)/resize.absScalerX,

@@ -81,2 +80,3 @@ angle = pointToAngle( absX, newY );

store.dispatch({ type: 'HANDLE_TRANSLATE_END', isRecord: true });
pool.clear();
e.stopPropagation();

@@ -83,0 +83,0 @@ });

1

app/js/tags/point-controls.babel.jsx

@@ -34,2 +34,3 @@ import {h, Component} from 'preact';

buttons.push(<IconButton shape={`point-${type}`}
title={type}
isCheck={ controls.type === type }

@@ -36,0 +37,0 @@ onTap={ this._onButtonTap(type) } />);

8

app/js/tags/point.babel.jsx

@@ -97,6 +97,6 @@ import { h, Component } from 'preact';

if ( y < resize.top ) {
returnValue = resize.top;
} else if ( y > C.CURVE_SIZE + resize.bottom ) {
returnValue = C.CURVE_SIZE + resize.bottom;
if ( y < resize.top - resize.panY ) {
returnValue = resize.top - resize.panY;
} else if ( y > C.CURVE_SIZE + resize.bottom - resize.panY ) {
returnValue = C.CURVE_SIZE + resize.bottom - resize.panY;
}

@@ -103,0 +103,0 @@

2

package.json
{
"name": "mojs-curve-editor",
"version": "1.0.2",
"version": "1.4.4",
"description": "mojs GUI for editing easing/property curves",

@@ -5,0 +5,0 @@ "keywords": [

10

readme.md

@@ -11,3 +11,3 @@ # mojs curve editor

[CDN](https://www.jsdelivr.com/):
[CDN](https://www.jsdelivr.com/)(pending approval):

@@ -47,3 +47,3 @@ ```

// Name of the Curve you are working on. The name is used to
// idetify record in `localStorage` to resore the state from
// identify record in `localStorage` to resore the state from
// when page gets reloaded, so please specify unique names if

@@ -113,3 +113,6 @@ // you use more than one editor on the same page.

- `alt + d` - `delete` selected point(s)
- [3 times] `alt + \` - `reset` curve
`Please note:` all shortcuts work only for active editor - it should have `orange mojs logo indicator` at bottom left.
## Development

@@ -147,3 +150,2 @@

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
app/build/mojs-curve-editor.js

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

app/build/mojs-curve-editor.min.js

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

app/css/assets/colors.postcss.css

Sorry, the diff of this file is not supported yet

app/css/blocks/curve-editor.postcss.css

Sorry, the diff of this file is not supported yet

app/css/blocks/curve.postcss.css

Sorry, the diff of this file is not supported yet

app/css/blocks/resize-handle.postcss.css

Sorry, the diff of this file is not supported yet

app/index.html

Sorry, the diff of this file is not supported yet

mockups/curve-editor.sketch

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