Skip to content

fix the html example #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MiguelPF wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix the html example #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 35 additions & 28 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./index.js" charset="utf-8"></script>
<script type="text/javascript">
var b = null

window.onload = function () {
var c = document.getElementById('canvasContainer')
var img = document.createElement('img')
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./index.js" charset="utf-8"></script>
<script type="text/javascript">
var b = null
var bbox = { x1: 440, y1: 540, x2: 497, y2: 621 };
window.onload = function () {
var c = document.getElementById('canvasContainer')
var img = document.createElement('img')

img.onload = function () {
b = window.Bbox({
img: img,
canvasContainer: c,
onload: function () { console.log('loaded!') }
})
b.subscribe(function (annotation) {
console.log(annotation)
})
}

img.src = 'http://www.dressedupgirl.com/wp-content/uploads/2014/12/Summer-Beach-Dresses.jpg'
img.onload = function () {
b = window.Bbox.default({
img: img,
canvasContainer: c,
onload: function () { console.log('loaded!') }
})
b.subscribe(function (annotation) {
console.log(annotation)
})
}
</script>
</head>
<body>
<div id="canvasContainer" style="width: 600px; height: 400px; margin: 60px auto;"></div>
<button onclick="b.setBbox({x1: 10, x2: 100, y1: 10, y2: 100})">FOO</button>
</body>
</html>

//img.src = 'http://www.dressedupgirl.com/wp-content/uploads/2014/12/Summer-Beach-Dresses.jpg'
img.src = 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nyc-fashion-week-street-style-nyfw-ss20-tyler-joe-day-4-cos-069-1568297393.jpg?crop=0.669xw:1.00xh;0.130xw,0&resize=640:*';

}
</script>
</head>

<body>
<div id="canvasContainer" style="height: 10px; margin: 60px auto;"></div>

<!-- <button onclick="b.setBbox({x1: 10, x2: 100, y1: 10, y2: 100})">FOO</button> -->
<button onclick="b.setBbox(bbox)">setBbox</button>
</body>

</html>
38 changes: 19 additions & 19 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import CanvasWindow from './CanvasWindow'
import isMobile from 'ismobilejs'
import {Observable} from 'rxjs/Observable'
import { Observable } from 'rxjs/Observable'

import 'rxjs/add/observable/fromEvent'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/takeUntil'

export default function BBOX ({
export default function BBOX({
canvasContainer,
img,
initCoords,
Expand All @@ -28,7 +28,7 @@ export default function BBOX ({

let image = img

let curPos = {x: 0, y: 0}
let curPos = { x: 0, y: 0 }
let ratio = 1

let down = 'mousedown'
Expand Down Expand Up @@ -134,14 +134,14 @@ export default function BBOX ({
subscribe
}

function dispose () {
function dispose() {
canvasContainer.innerHTML = ''
if (md.dispose) md.dispose()
instance = null
ratio = 1
}

function subscribe (callback) {
function subscribe(callback) {
if (callback == null || typeof callback !== 'function') {
console.warn('wrong argument type, expected function and got ', typeof callback)
return undefined
Expand All @@ -150,7 +150,7 @@ export default function BBOX ({
subscription = callback
}

function setBbox (bbox) {
function setBbox(bbox) {
if (bbox == null || typeof bbox !== 'object') {
console.warn('wrong argument type: expected Object and got ', typeof bbox)
return undefined
Expand Down Expand Up @@ -181,11 +181,11 @@ export default function BBOX ({

const width = (bbox.x2 - bbox.x1) * ratio
const height = (bbox.y2 - bbox.y1) * ratio

console.log(`drawing bbox: ${JSON.stringify(bbox)} at origin: ${JSON.stringify(origin)}, width: ${width}, height: ${height}`);
cw.draw(origin, width, height)
}

function onMousedown (md) {
function onMousedown(md) {
md.preventDefault()

canvas.style.zIndex = 10
Expand Down Expand Up @@ -218,7 +218,7 @@ export default function BBOX ({
}
}

function _onMouseup (e) {
function _onMouseup(e) {
e.preventDefault();
curPos = _getPosition(e)

Expand All @@ -239,7 +239,7 @@ export default function BBOX ({
return styleCursorListener()
}

function _handleRectResize (e) {
function _handleRectResize(e) {
const res = _getDelta(curPos, e)
curPos = _getPosition(e)

Expand All @@ -252,7 +252,7 @@ export default function BBOX ({
}
}

function _handleRectMove (e) {
function _handleRectMove(e) {
const res = _getDelta(curPos, e)
curPos = _getPosition(e)

Expand All @@ -262,7 +262,7 @@ export default function BBOX ({
}
}

function redrawCanvas (e) {
function redrawCanvas(e) {
switch (e.type) {
case 'draw':
cw.draw(e.data.origin, e.data.width, e.data.height)
Expand All @@ -278,7 +278,7 @@ export default function BBOX ({
}
}

function _styleCursor (e) {
function _styleCursor(e) {
const pos = _getPosition(e, canvasContainer)
const ep = cw.getEditPoint(pos)

Expand All @@ -291,7 +291,7 @@ export default function BBOX ({
}
}

function resizeImage (image, limitWidth, limitHeight) {
function resizeImage(image, limitWidth, limitHeight) {
if (
typeof image === 'undefined' ||
typeof limitWidth === 'undefined' ||
Expand All @@ -307,7 +307,7 @@ export default function BBOX ({
}
}

function resizeWidth (image, limitWidth) {
function resizeWidth(image, limitWidth) {
const newImage = document.createElement('img')
const ratio = limitWidth / image.width

Expand All @@ -320,7 +320,7 @@ export default function BBOX ({
}
}

function resizeHeight (image, limitHeight) {
function resizeHeight(image, limitHeight) {
const newImage = document.createElement('img')
const ratio = limitHeight / image.height

Expand All @@ -333,7 +333,7 @@ export default function BBOX ({
}
}

function _getPosition (e) {
function _getPosition(e) {
// get container position on document, it has a performance impact when window is resized
container = canvas.getBoundingClientRect()

Expand All @@ -345,7 +345,7 @@ export default function BBOX ({
}
}

function _getDelta (origin, e) {
function _getDelta(origin, e) {
// get container position on document, it has a performance impact when window is resized
container = canvas.getBoundingClientRect()

Expand All @@ -355,7 +355,7 @@ export default function BBOX ({
}
}

function styleCursorListener () {
function styleCursorListener() {
return Observable
.fromEvent(canvasContainer, move)
.takeUntil(Observable.fromEvent(canvasContainer, down))
Expand Down